funebra.github.io/index.html at main · funebra/funebra.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Funebra — Math‑Art Engine</title>
  <meta name="description" content="Funebra Math‑Art Engine — parametric geometry, generative visuals, and 3D printing ready exports by pLabs Entertainment." />

  <!-- Open Graph -->
  <meta property="og:title" content="Funebra — Math‑Art Engine" />
  <meta property="og:description" content="Experience the Funebra home: generative math‑art, 3D scenes, and printable models." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://funebra.github.io/" />
  <meta property="og:image" content="https://funebra.github.io/assets/og-cover.png" />
  <meta name="twitter:card" content="summary_large_image" />

  <link rel="icon" href="/assets/funebra-star.svg" type="image/svg+xml" />
  <link rel="manifest" href="/manifest.webmanifest" />
  <link rel="canonical" href="https://funebra.github.io/" />
  <meta name="theme-color" content="#0b0b0f" />

  <!-- Import map to use modern ESM (Three.js) -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    }
  }
  </script>

  <link rel="stylesheet" href="/styles/style.css" />
  <script type="module" src="/src/main.js" defer></script>

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Funebra Math‑Art Engine",
    "applicationCategory": "GraphicsApplication",
    "creator": {"@type": "Organization", "name": "pLabs Entertainment"},
    "url": "https://funebra.github.io/",
    "operatingSystem": "Any",
    "image": "https://funebra.github.io/assets/og-cover.png",
    "description": "Browser‑based, hackable, parametric geometry and generative‑art toolkit."
  }
  </script>
</head>
<body>
  <header class="site-header">
    <div class="brand">
      <img src="/assets/funebra-star.svg" alt="Funebra star" class="logo" />
      <h1>Funebra</h1>
      <span class="tag">Math‑Art Engine</span>
    </div>
    <nav class="nav">
      <a href="#playground">Playground</a>
      <a href="#docs">Docs</a>
      <a href="#prints">3D Prints</a>
      <a href="#support">Support</a>
      <a href="https://github.com/funebra/math-art-engine" target="_blank" rel="noopener">GitHub</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <div class="hero-copy">
        <h2>Open the gates — code geometry, export reality.</h2>
        <p>Real‑time parametric shapes, WebGL scenes, PNG/GIF/OBJ/GLTF exporters, and maker‑friendly workflows.</p>
        <div class="cta-row">
          <a class="btn primary" href="#playground">Launch Playground</a>
          <a class="btn" href="https://soundcloud.com/peter-lugha-553056840" target="_blank" rel="noopener">Funebra Sound</a>
        </div>
      </div>
      <canvas id="funebra-canvas" aria-label="Funebra WebGL scene" role="img"></canvas>
    </section>

    <section id="playground" class="panel">
      <h3>Playground</h3>
      <p>Tweak parameters live. Try presets below.</p>
      <div class="controls">
        <label>Shape
          <select id="shapeSel">
            <option value="torusKnot">Torus Knot</option>
            <option value="icosahedron">Icosahedron</option>
            <option value="mobius">Möbius (parametric)</option>
          </select>
        </label>
        <label>Wireframe <input type="checkbox" id="wireChk" /></label>
        <label>Spin <input type="checkbox" id="spinChk" checked /></label>
        <button id="snapBtn" class="btn">Snapshot PNG</button>
      </div>
      <div class="thumbs" id="thumbs"></div>
    </section>

    <section id="prints" class="panel">
      <h3>3D Printing</h3>
      <p>Export meshes you can slice for your Bambu Lab P1S (or any printer). OBJ/GLTF export planned here.</p>
    </section>

    <section id="support" class="panel">
      <h3>Support Funebra</h3>
      <p>If you like this project, consider a one‑time boost ❤️</p>
      <div class="donate">
        <a class="btn primary" href="https://buy.stripe.com/test_123" target="_blank" rel="noopener">Donate €50</a>
        <a class="btn" href="https://buy.stripe.com/test_456" target="_blank" rel="noopener">Donate €100</a>
      </div>
      <small>Funebra™ · pLabs Entertainment © 1982–2025</small>
    </section>
  </main>

  <footer class="site-footer">
    <p>pLabs Entertainment © 2000–2025 · <a href="/privacy.html">Privacy</a>

      <!-- Default Statcounter code for Funebra git
https://funebra.github.io/ -->
<script type="text/javascript">
var sc_project=13181319;
var sc_invisible=0;
var sc_security="09170c7a";
var scJsHost = "https://";
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/13181319/0/09170c7a/0/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code --></p>
  </footer>
</body>
</html>