@guinetik/gcanvas 1.0.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (261) hide show
  1. package/dist/CNAME +1 -0
  2. package/dist/aizawa.html +27 -0
  3. package/dist/animations.html +31 -0
  4. package/dist/basic.html +38 -0
  5. package/dist/baskara.html +31 -0
  6. package/dist/bezier.html +35 -0
  7. package/dist/beziersignature.html +29 -0
  8. package/dist/blackhole.html +28 -0
  9. package/dist/blob.html +35 -0
  10. package/dist/clifford.html +25 -0
  11. package/dist/cmb.html +24 -0
  12. package/dist/coordinates.html +698 -0
  13. package/dist/cube3d.html +23 -0
  14. package/dist/dadras.html +26 -0
  15. package/dist/dejong.html +25 -0
  16. package/dist/demos.css +303 -0
  17. package/dist/dino.html +42 -0
  18. package/dist/easing.html +28 -0
  19. package/dist/events.html +195 -0
  20. package/dist/fluent.html +647 -0
  21. package/dist/fluid-simple.html +22 -0
  22. package/dist/fluid.html +37 -0
  23. package/dist/fractals.html +36 -0
  24. package/dist/gameobjects.html +626 -0
  25. package/dist/gcanvas.es.js +14368 -9093
  26. package/dist/gcanvas.es.min.js +1 -1
  27. package/dist/gcanvas.umd.js +1 -1
  28. package/dist/gcanvas.umd.min.js +1 -1
  29. package/dist/genart.html +26 -0
  30. package/dist/gendream.html +26 -0
  31. package/dist/group.html +36 -0
  32. package/dist/halvorsen.html +27 -0
  33. package/dist/home.html +587 -0
  34. package/dist/hyperbolic001.html +23 -0
  35. package/dist/hyperbolic002.html +23 -0
  36. package/dist/hyperbolic003.html +23 -0
  37. package/dist/hyperbolic004.html +23 -0
  38. package/dist/hyperbolic005.html +22 -0
  39. package/dist/index.html +446 -0
  40. package/dist/isometric.html +34 -0
  41. package/dist/js/aizawa.js +425 -0
  42. package/dist/js/animations.js +452 -0
  43. package/dist/js/basic.js +204 -0
  44. package/dist/js/baskara.js +751 -0
  45. package/dist/js/bezier.js +692 -0
  46. package/dist/js/beziersignature.js +241 -0
  47. package/dist/js/blackhole/accretiondisk.obj.js +379 -0
  48. package/dist/js/blackhole/blackhole.obj.js +318 -0
  49. package/dist/js/blackhole/index.js +409 -0
  50. package/dist/js/blackhole/particle.js +56 -0
  51. package/dist/js/blackhole/starfield.obj.js +218 -0
  52. package/dist/js/blob.js +2276 -0
  53. package/dist/js/clifford.js +236 -0
  54. package/dist/js/cmb.js +594 -0
  55. package/dist/js/coordinates.js +840 -0
  56. package/dist/js/cube3d.js +789 -0
  57. package/dist/js/dadras.js +405 -0
  58. package/dist/js/dejong.js +257 -0
  59. package/dist/js/dino.js +1420 -0
  60. package/dist/js/easing.js +477 -0
  61. package/dist/js/fluent.js +183 -0
  62. package/dist/js/fluid-simple.js +253 -0
  63. package/dist/js/fluid.js +527 -0
  64. package/dist/js/fractals.js +932 -0
  65. package/dist/js/fractalworker.js +93 -0
  66. package/dist/js/gameobjects.js +176 -0
  67. package/dist/js/genart.js +268 -0
  68. package/dist/js/gendream.js +209 -0
  69. package/dist/js/group.js +140 -0
  70. package/dist/js/halvorsen.js +405 -0
  71. package/dist/js/hyperbolic001.js +310 -0
  72. package/dist/js/hyperbolic002.js +388 -0
  73. package/dist/js/hyperbolic003.js +319 -0
  74. package/dist/js/hyperbolic004.js +345 -0
  75. package/dist/js/hyperbolic005.js +340 -0
  76. package/dist/js/info-toggle.js +25 -0
  77. package/dist/js/isometric.js +851 -0
  78. package/dist/js/kerr.js +1547 -0
  79. package/dist/js/lavalamp.js +590 -0
  80. package/dist/js/layout.js +354 -0
  81. package/dist/js/lorenz.js +425 -0
  82. package/dist/js/mondrian.js +285 -0
  83. package/dist/js/opacity.js +275 -0
  84. package/dist/js/painter.js +484 -0
  85. package/dist/js/particles-showcase.js +514 -0
  86. package/dist/js/particles.js +299 -0
  87. package/dist/js/patterns.js +397 -0
  88. package/dist/js/penrose/artifact.js +69 -0
  89. package/dist/js/penrose/blackhole.js +121 -0
  90. package/dist/js/penrose/constants.js +73 -0
  91. package/dist/js/penrose/game.js +943 -0
  92. package/dist/js/penrose/lore.js +278 -0
  93. package/dist/js/penrose/penrosescene.js +892 -0
  94. package/dist/js/penrose/ship.js +216 -0
  95. package/dist/js/penrose/sounds.js +211 -0
  96. package/dist/js/penrose/voidparticle.js +55 -0
  97. package/dist/js/penrose/voidscene.js +258 -0
  98. package/dist/js/penrose/voidship.js +144 -0
  99. package/dist/js/penrose/wormhole.js +46 -0
  100. package/dist/js/pipeline.js +555 -0
  101. package/dist/js/plane3d.js +256 -0
  102. package/dist/js/platformer.js +1579 -0
  103. package/dist/js/rossler.js +480 -0
  104. package/dist/js/scene.js +304 -0
  105. package/dist/js/scenes.js +320 -0
  106. package/dist/js/schrodinger.js +706 -0
  107. package/dist/js/schwarzschild.js +1015 -0
  108. package/dist/js/shapes.js +628 -0
  109. package/dist/js/space/alien.js +171 -0
  110. package/dist/js/space/boom.js +98 -0
  111. package/dist/js/space/boss.js +353 -0
  112. package/dist/js/space/buff.js +73 -0
  113. package/dist/js/space/bullet.js +102 -0
  114. package/dist/js/space/constants.js +85 -0
  115. package/dist/js/space/game.js +1884 -0
  116. package/dist/js/space/hud.js +112 -0
  117. package/dist/js/space/laserbeam.js +179 -0
  118. package/dist/js/space/lightning.js +277 -0
  119. package/dist/js/space/minion.js +192 -0
  120. package/dist/js/space/missile.js +212 -0
  121. package/dist/js/space/player.js +430 -0
  122. package/dist/js/space/powerup.js +90 -0
  123. package/dist/js/space/starfield.js +58 -0
  124. package/dist/js/space/starpower.js +90 -0
  125. package/dist/js/spacetime.js +559 -0
  126. package/dist/js/sphere3d.js +229 -0
  127. package/dist/js/sprite.js +473 -0
  128. package/dist/js/starfaux/config.js +118 -0
  129. package/dist/js/starfaux/enemy.js +353 -0
  130. package/dist/js/starfaux/hud.js +78 -0
  131. package/dist/js/starfaux/index.js +482 -0
  132. package/dist/js/starfaux/laser.js +182 -0
  133. package/dist/js/starfaux/player.js +468 -0
  134. package/dist/js/starfaux/terrain.js +560 -0
  135. package/dist/js/study001.js +275 -0
  136. package/dist/js/study002.js +366 -0
  137. package/dist/js/study003.js +331 -0
  138. package/dist/js/study004.js +389 -0
  139. package/dist/js/study005.js +209 -0
  140. package/dist/js/study006.js +194 -0
  141. package/dist/js/study007.js +192 -0
  142. package/dist/js/study008.js +413 -0
  143. package/dist/js/svgtween.js +204 -0
  144. package/dist/js/tde/accretiondisk.js +471 -0
  145. package/dist/js/tde/blackhole.js +219 -0
  146. package/dist/js/tde/blackholescene.js +209 -0
  147. package/dist/js/tde/config.js +59 -0
  148. package/dist/js/tde/index.js +820 -0
  149. package/dist/js/tde/jets.js +290 -0
  150. package/dist/js/tde/lensedstarfield.js +154 -0
  151. package/dist/js/tde/tdestar.js +297 -0
  152. package/dist/js/tde/tidalstream.js +372 -0
  153. package/dist/js/tde_old/blackhole.obj.js +354 -0
  154. package/dist/js/tde_old/debris.obj.js +791 -0
  155. package/dist/js/tde_old/flare.obj.js +239 -0
  156. package/dist/js/tde_old/index.js +448 -0
  157. package/dist/js/tde_old/star.obj.js +812 -0
  158. package/dist/js/tetris/config.js +157 -0
  159. package/dist/js/tetris/grid.js +286 -0
  160. package/dist/js/tetris/index.js +1195 -0
  161. package/dist/js/tetris/renderer.js +634 -0
  162. package/dist/js/tetris/tetrominos.js +280 -0
  163. package/dist/js/thomas.js +394 -0
  164. package/dist/js/tiles.js +312 -0
  165. package/dist/js/tweendemo.js +79 -0
  166. package/dist/js/visibility.js +102 -0
  167. package/dist/kerr.html +28 -0
  168. package/dist/lavalamp.html +27 -0
  169. package/dist/layouts.html +37 -0
  170. package/dist/logo.svg +4 -0
  171. package/dist/loop.html +84 -0
  172. package/dist/lorenz.html +27 -0
  173. package/dist/mondrian.html +32 -0
  174. package/dist/og_image.png +0 -0
  175. package/dist/opacity.html +36 -0
  176. package/dist/painter.html +39 -0
  177. package/dist/particles-showcase.html +28 -0
  178. package/dist/particles.html +24 -0
  179. package/dist/patterns.html +33 -0
  180. package/dist/penrose-game.html +31 -0
  181. package/dist/pipeline.html +737 -0
  182. package/dist/plane3d.html +24 -0
  183. package/dist/platformer.html +43 -0
  184. package/dist/rossler.html +27 -0
  185. package/dist/scene-interactivity-test.html +220 -0
  186. package/dist/scene.html +33 -0
  187. package/dist/scenes.html +96 -0
  188. package/dist/schrodinger.html +27 -0
  189. package/dist/schwarzschild.html +27 -0
  190. package/dist/shapes.html +16 -0
  191. package/dist/space.html +85 -0
  192. package/dist/spacetime.html +27 -0
  193. package/dist/sphere3d.html +24 -0
  194. package/dist/sprite.html +18 -0
  195. package/dist/starfaux.html +22 -0
  196. package/dist/study001.html +23 -0
  197. package/dist/study002.html +23 -0
  198. package/dist/study003.html +23 -0
  199. package/dist/study004.html +23 -0
  200. package/dist/study005.html +22 -0
  201. package/dist/study006.html +24 -0
  202. package/dist/study007.html +24 -0
  203. package/dist/study008.html +22 -0
  204. package/dist/svgtween.html +29 -0
  205. package/dist/tde.html +28 -0
  206. package/dist/tetris3d.html +25 -0
  207. package/dist/thomas.html +27 -0
  208. package/dist/tiles.html +28 -0
  209. package/dist/transforms.html +400 -0
  210. package/dist/tween.html +45 -0
  211. package/dist/visibility.html +33 -0
  212. package/package.json +1 -1
  213. package/readme.md +30 -22
  214. package/src/game/objects/go.js +7 -0
  215. package/src/game/objects/index.js +2 -0
  216. package/src/game/objects/isometric-scene.js +53 -3
  217. package/src/game/objects/layoutscene.js +57 -0
  218. package/src/game/objects/mask.js +241 -0
  219. package/src/game/objects/scene.js +19 -0
  220. package/src/game/objects/wrapper.js +14 -2
  221. package/src/game/pipeline.js +17 -0
  222. package/src/game/ui/button.js +101 -16
  223. package/src/game/ui/theme.js +0 -6
  224. package/src/game/ui/togglebutton.js +25 -14
  225. package/src/game/ui/tooltip.js +12 -4
  226. package/src/index.js +3 -0
  227. package/src/io/gesture.js +409 -0
  228. package/src/io/index.js +4 -1
  229. package/src/io/keys.js +9 -1
  230. package/src/io/screen.js +476 -0
  231. package/src/math/attractors.js +664 -0
  232. package/src/math/heat.js +106 -0
  233. package/src/math/index.js +1 -0
  234. package/src/mixins/draggable.js +15 -19
  235. package/src/painter/painter.shapes.js +11 -5
  236. package/src/particle/particle-system.js +165 -1
  237. package/src/physics/index.js +26 -0
  238. package/src/physics/physics-updaters.js +333 -0
  239. package/src/physics/physics.js +375 -0
  240. package/src/shapes/image.js +5 -5
  241. package/src/shapes/index.js +2 -0
  242. package/src/shapes/parallelogram.js +147 -0
  243. package/src/shapes/righttriangle.js +115 -0
  244. package/src/shapes/svg.js +281 -100
  245. package/src/shapes/text.js +22 -6
  246. package/src/shapes/transformable.js +5 -0
  247. package/src/sound/effects.js +807 -0
  248. package/src/sound/index.js +13 -0
  249. package/src/webgl/index.js +7 -0
  250. package/src/webgl/shaders/clifford-point-shaders.js +131 -0
  251. package/src/webgl/shaders/dejong-point-shaders.js +131 -0
  252. package/src/webgl/shaders/point-sprite-shaders.js +152 -0
  253. package/src/webgl/webgl-clifford-renderer.js +477 -0
  254. package/src/webgl/webgl-dejong-renderer.js +472 -0
  255. package/src/webgl/webgl-line-renderer.js +391 -0
  256. package/src/webgl/webgl-particle-renderer.js +410 -0
  257. package/types/index.d.ts +30 -2
  258. package/types/io.d.ts +217 -0
  259. package/types/physics.d.ts +299 -0
  260. package/types/shapes.d.ts +8 -0
  261. package/types/webgl.d.ts +188 -109
package/dist/hyperbolic005.html ADDED
@@ -0,0 +1,22 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Hyperbolic 005 - Fractal Terrain</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="info">
12
+ <strong>Hyperbolic 005 - Fractal Terrain</strong><br/>
13
+ <span style="color:#CCC">
14
+ Inspired by hyperbolic space - Julia set as 3D terrain
15
+ <li>Click to disturb - settles to equilibrium</li>
16
+ <li>Drag to rotate</li>
17
+ </span>
18
+ </div>
19
+ <canvas id="game"></canvas>
20
+ <script type="module" src="./js/hyperbolic005.js"></script>
21
+ </body>
22
+ </html>
package/dist/index.html ADDED
@@ -0,0 +1,446 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
7
+ <!-- Primary Meta Tags -->
8
+ <title>GCanvas Demos - Interactive Examples & Documentation</title>
9
+ <meta
10
+ name="title"
11
+ content="GCanvas Demos - Interactive Examples & Documentation"
12
+ />
13
+ <meta
14
+ name="description"
15
+ content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
16
+ />
17
+ <meta
18
+ name="keywords"
19
+ content="gcanvas, canvas demos, 2d canvas examples, game framework demos, javascript canvas, html5 canvas examples, interactive demos, creative coding examples"
20
+ />
21
+ <meta name="author" content="GCanvas" />
22
+ <meta name="robots" content="index, follow" />
23
+ <link rel="canonical" href="https://gcanvas.guinetik.com/" />
24
+
25
+ <!-- Open Graph / Facebook -->
26
+ <meta property="og:type" content="website" />
27
+ <meta property="og:url" content="https://gcanvas.guinetik.com/" />
28
+ <meta
29
+ property="og:title"
30
+ content="GCanvas Demos - Interactive Examples & Documentation"
31
+ />
32
+ <meta
33
+ property="og:description"
34
+ content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
35
+ />
36
+ <meta
37
+ property="og:image"
38
+ content="https://gcanvas.guinetik.com/og_image.png"
39
+ />
40
+ <meta property="og:image:width" content="1200" />
41
+ <meta property="og:image:height" content="630" />
42
+ <meta
43
+ property="og:image:alt"
44
+ content="GCanvas interactive demos and examples"
45
+ />
46
+ <meta property="og:site_name" content="GCanvas" />
47
+ <meta property="og:locale" content="en_US" />
48
+
49
+ <!-- Twitter -->
50
+ <meta name="twitter:card" content="summary_large_image" />
51
+ <meta name="twitter:url" content="https://gcanvas.guinetik.com/" />
52
+ <meta
53
+ name="twitter:title"
54
+ content="GCanvas Demos - Interactive Examples & Documentation"
55
+ />
56
+ <meta
57
+ name="twitter:description"
58
+ content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
59
+ />
60
+ <meta
61
+ name="twitter:image"
62
+ content="https://gcanvas.guinetik.com/og_image.png"
63
+ />
64
+ <meta
65
+ name="twitter:image:alt"
66
+ content="GCanvas interactive demos and examples"
67
+ />
68
+ <meta name="twitter:creator" content="@guinetik" />
69
+
70
+ <!-- Favicon -->
71
+ <link rel="icon" type="image/svg+xml" href="./logo.svg" />
72
+ <link rel="apple-touch-icon" href="./logo.svg" />
73
+ <meta name="theme-color" content="#000000" />
74
+
75
+ <!-- Structured Data (JSON-LD) -->
76
+ <script type="application/ld+json">
77
+ {
78
+ "@context": "https://schema.org",
79
+ "@type": "WebSite",
80
+ "name": "GCanvas Demos",
81
+ "url": "https://gcanvas.guinetik.com/",
82
+ "description": "Interactive demos and examples for GCanvas, a modular 2D canvas rendering and game framework",
83
+ "publisher": {
84
+ "@type": "Organization",
85
+ "name": "GCanvas",
86
+ "url": "https://github.com/guinetik/gcanvas"
87
+ },
88
+ "potentialAction": {
89
+ "@type": "SearchAction",
90
+ "target": "https://gcanvas.guinetik.com/?q={search_term_string}",
91
+ "query-input": "required name=search_term_string"
92
+ }
93
+ }
94
+ </script>
95
+
96
+ <link rel="stylesheet" href="demos.css" />
97
+
98
+ <!-- Google Analytics -->
99
+ <script
100
+ async
101
+ src="https://www.googletagmanager.com/gtag/js?id=G-1GHJD0LM4Z"
102
+ ></script>
103
+ <script>
104
+ window.dataLayer = window.dataLayer || [];
105
+ function gtag() {
106
+ dataLayer.push(arguments);
107
+ }
108
+ gtag("js", new Date());
109
+ gtag("config", "G-1GHJD0LM4Z", { send_page_view: false });
110
+
111
+ // Track virtual pageviews on hash changes
112
+ function trackPageView(route) {
113
+ gtag("event", "page_view", {
114
+ page_title: route + " - GCanvas Demos",
115
+ page_path: "/demos/" + route,
116
+ });
117
+ }
118
+ </script>
119
+ </head>
120
+
121
+ <body>
122
+ <!-- Mobile Header (hidden on desktop) -->
123
+ <header class="mobile-header">
124
+ <img src="./logo.svg" alt="GCanvas Logo" class="mobile-logo" />
125
+ <span class="mobile-title">GCANVAS</span>
126
+ <button
127
+ class="hamburger"
128
+ id="hamburger-btn"
129
+ aria-label="Toggle menu"
130
+ >
131
+ <span></span>
132
+ <span></span>
133
+ <span></span>
134
+ </button>
135
+ </header>
136
+
137
+ <!-- Overlay for closing menu when clicking outside -->
138
+ <div class="nav-overlay" id="nav-overlay"></div>
139
+
140
+ <nav id="main-nav">
141
+ <div class="nav-branding">
142
+ <div style="text-align: center; margin-bottom: 1em">
143
+ <img
144
+ src="./logo.svg"
145
+ alt="Logo"
146
+ width="90"
147
+ height="80"
148
+ style="display: inline-block; vertical-align: middle"
149
+ />
150
+ </div>
151
+ <div style="text-align: center; margin-bottom: 1em">
152
+ <h1
153
+ style="
154
+ letter-spacing: 2px;
155
+ margin-bottom: 0.3em;
156
+ margin-top: 0.25em;
157
+ font-family: monospace;
158
+ font-size: 2em;
159
+ color: #ccc;
160
+ "
161
+ >
162
+ GCANVAS
163
+ </h1>
164
+ <hr style="margin: 0.5em 1.6em" />
165
+ <a
166
+ href="https://github.com/guinetik/gcanvas"
167
+ target="_blank"
168
+ title="View on GitHub"
169
+ style="
170
+ display: inline-block;
171
+ background: #1f1f1f;
172
+ border-radius: 50%;
173
+ width: 36px;
174
+ height: 36px;
175
+ margin: 0.5em;
176
+ box-shadow: 0 2px 6px #0002;
177
+ "
178
+ >
179
+ <svg
180
+ viewBox="0 0 16 16"
181
+ width="22"
182
+ height="22"
183
+ aria-hidden="true"
184
+ fill="#fff"
185
+ style="margin: 7px 0 0 0"
186
+ >
187
+ <path
188
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
189
+ 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
190
+ -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2
191
+ -3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
192
+ 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04
193
+ 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
194
+ 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01
195
+ 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
196
+ ></path>
197
+ </svg>
198
+ </a>
199
+ </div>
200
+ <hr />
201
+ </div>
202
+ <h2 style="margin-bottom: 0.3em">Home</h2>
203
+ <a href="home.html" target="demo-frame" class="active">Welcome</a>
204
+ <hr />
205
+ <h2 style="margin-bottom: 0.3em">Docs</h2>
206
+ <a href="pipeline.html" target="demo-frame">Rendering Pipeline</a>
207
+ <a href="gameobjects.html" target="demo-frame">Game Objects</a>
208
+ <a href="coordinates.html" target="demo-frame">Coordinate System</a>
209
+ <a href="fluent.html" target="demo-frame">Fluent API</a>
210
+ <hr />
211
+ <h2>Demos</h2>
212
+ <h3>Game</h3>
213
+ <a href="basic.html" target="demo-frame">Basic</a>
214
+ <a href="loop.html" target="demo-frame">Game Loop</a>
215
+ <a href="events.html" target="demo-frame">Event Handlers</a>
216
+ <h3>Shapes</h3>
217
+ <a href="shapes.html" target="demo-frame" class="active"
218
+ >Shape Gallery</a
219
+ >
220
+ <a href="visibility.html" target="demo-frame">Visibility</a>
221
+ <a href="opacity.html" target="demo-frame">Opacity</a>
222
+ <a href="transforms.html" target="demo-frame">Transforms</a>
223
+ <a href="group.html" target="demo-frame">Groups</a>
224
+ <a href="particles.html" target="demo-frame">Shape Particles</a>
225
+ <h3>Painter</h3>
226
+ <a href="painter.html" target="demo-frame">Painter</a>
227
+ <a href="bezier.html" target="demo-frame">Bezier Curves</a>
228
+ <a href="beziersignature.html" target="demo-frame"
229
+ >Bezier Signature</a
230
+ >
231
+ <a href="svgtween.html" target="demo-frame">SVG Motion</a>
232
+ <h3>Image</h3>
233
+ <a href="patterns.html" target="demo-frame">Image Patterns</a>
234
+ <a href="fractals.html" target="demo-frame">Fractals</a>
235
+ <h3>Motion</h3>
236
+ <a href="animations.html" target="demo-frame">Animations</a>
237
+ <a href="easing.html" target="demo-frame">Easing</a>
238
+ <a href="tween.html" target="demo-frame">Tween</a>
239
+ <a href="sprite.html" target="demo-frame">Sprite Timeline</a>
240
+ <a href="particles-showcase.html" target="demo-frame"
241
+ >Particle System</a
242
+ >
243
+ <h3>Scene</h3>
244
+ <a href="scene.html" target="demo-frame">Scene</a>
245
+ <a href="layouts.html" target="demo-frame">Scene Layouts</a>
246
+ <a href="tiles.html" target="demo-frame">Tile Layout</a>
247
+ <a href="isometric.html" target="demo-frame">Isometric</a>
248
+ <a href="scenes.html" target="demo-frame">Scene Transforms</a>
249
+ <a href="scene-interactivity-test.html" target="demo-frame"
250
+ >Scene Interactivity</a
251
+ >
252
+ <hr />
253
+ <h2 style="margin-bottom: 0.3em">3D</h2>
254
+ <a href="sphere3d.html" target="demo-frame">Sphere3D Showcase</a>
255
+ <a href="plane3d.html" target="demo-frame">Plane3D Showcase</a>
256
+ <a href="cube3d.html" target="demo-frame">Rubik's Cube</a>
257
+ <hr />
258
+ <h2 style="margin-bottom: 0.3em; color: #0f0">
259
+ <a
260
+ href="../genuary26/"
261
+ style="color: #0f0; text-decoration: none"
262
+ >
263
+ Genuary 2026 &rarr;
264
+ </a>
265
+ </h2>
266
+ <hr />
267
+ <h2 style="margin-bottom: 0.3em">Generative Art</h2>
268
+ <a href="genart.html" target="demo-frame">Hypnotic Mandala</a>
269
+ <a href="study001.html" target="demo-frame">Study 001</a>
270
+ <a href="study002.html" target="demo-frame">Study 002</a>
271
+ <a href="study003.html" target="demo-frame">Study 003</a>
272
+ <a href="study004.html" target="demo-frame">Study 004</a>
273
+ <a href="study005.html" target="demo-frame">Study 005</a>
274
+ <a href="study006.html" target="demo-frame">Study 006</a>
275
+ <a href="study007.html" target="demo-frame">Study 007</a>
276
+ <a href="study008.html" target="demo-frame">Study 008</a>
277
+ <h3>Hyperbolic</h3>
278
+ <a href="hyperbolic001.html" target="demo-frame">Hyperbolic 001</a>
279
+ <a href="hyperbolic002.html" target="demo-frame">Hyperbolic 002</a>
280
+ <a href="hyperbolic003.html" target="demo-frame">Hyperbolic 003</a>
281
+ <a href="hyperbolic004.html" target="demo-frame">Hyperbolic 004</a>
282
+ <a href="hyperbolic005.html" target="demo-frame">Hyperbolic 005</a>
283
+ <a href="mondrian.html" target="demo-frame">Mondrian</a>
284
+ <a href="gendream.html" target="demo-frame">Fractal Plasma</a>
285
+ <a href="lavalamp.html" target="demo-frame">Lava Lamp</a>
286
+ <a href="baskara.html" target="demo-frame">Root Dance</a>
287
+ <hr />
288
+ <h2 style="margin-bottom: 0.3em">Math & Physics</h2>
289
+ <a href="cmb.html" target="demo-frame">Cosmic Microwave Background</a>
290
+ <a href="fluid.html" target="demo-frame">Fluid Playground</a>
291
+ <a href="fluid-simple.html" target="demo-frame">Fluid System</a>
292
+ <a href="schrodinger.html" target="demo-frame">Schrodinger Wave</a>
293
+ <a href="spacetime.html" target="demo-frame">Spacetime Curvature</a>
294
+ <a href="schwarzschild.html" target="demo-frame"
295
+ >Schwarzschild Metric</a
296
+ >
297
+ <a href="kerr.html" target="demo-frame">Kerr Metric</a>
298
+ <a href="blackhole.html" target="demo-frame">Black Hole</a>
299
+ <a href="tde.html" target="demo-frame">Tidal Disruption</a>
300
+ <a href="dadras.html" target="demo-frame">Dadras Attractor</a>
301
+ <a href="lorenz.html" target="demo-frame">Lorenz Attractor</a>
302
+ <a href="aizawa.html" target="demo-frame">Aizawa Attractor</a>
303
+ <a href="thomas.html" target="demo-frame">Thomas Attractor</a>
304
+ <a href="rossler.html" target="demo-frame">Rössler Attractor</a>
305
+ <a href="halvorsen.html" target="demo-frame">Halvorsen Attractor</a>
306
+ <a href="clifford.html" target="demo-frame">Clifford Attractor</a>
307
+ <a href="dejong.html" target="demo-frame">De Jong Attractor</a>
308
+ <hr />
309
+ <h2 style="margin-bottom: 0.3em">Games</h2>
310
+ <a href="blob.html" target="demo-frame">Bezier Blob</a>
311
+ <a href="space.html" target="demo-frame">Space Invaders</a>
312
+ <a href="dino.html" target="demo-frame">Dino Run</a>
313
+ <a href="platformer.html" target="demo-frame">Tron Platformer</a>
314
+ <a href="tetris3d.html" target="demo-frame">3D Tetris</a>
315
+ <a href="starfaux.html" target="demo-frame">StarFaux</a>
316
+ <a href="penrose-game.html" target="demo-frame"
317
+ >Penrose Spacetime</a
318
+ >
319
+ <hr />
320
+ </nav>
321
+ <iframe name="demo-frame" id="demo-frame" src="home.html"></iframe>
322
+
323
+ <!-- Simple script to highlight the active link -->
324
+ <script>
325
+ // Wait for the DOM to load
326
+ document.addEventListener("DOMContentLoaded", () => {
327
+ const links = document.querySelectorAll("nav a");
328
+
329
+ links.forEach((link) => {
330
+ link.addEventListener("click", () => {
331
+ // Remove .active from all links
332
+ links.forEach((l) => l.classList.remove("active"));
333
+ // Add .active to the clicked link
334
+ link.classList.add("active");
335
+ });
336
+ });
337
+ });
338
+ </script>
339
+
340
+ <script>
341
+ document.addEventListener("DOMContentLoaded", () => {
342
+ const links = document.querySelectorAll("nav a");
343
+ const iframe = document.getElementById("demo-frame");
344
+
345
+ /**
346
+ * Parse the hash in the form "#/shapes" => returns "shapes".
347
+ * Default to "shapes" if there's no valid hash.
348
+ */
349
+ function getRouteFromHash() {
350
+ if (location.hash.startsWith("#/")) {
351
+ return location.hash.slice(2); // remove "#/"
352
+ }
353
+ return "home"; // fallback route
354
+ }
355
+
356
+ /**
357
+ * Load the given route into the iframe, e.g. route="shapes" => "shapes.html"
358
+ * Also highlight the corresponding link and track pageview.
359
+ */
360
+ function loadRoute(route) {
361
+ // Set iframe src
362
+ iframe.src = route + ".html";
363
+
364
+ // Highlight the active link
365
+ links.forEach((link) => {
366
+ // link.href might be "shapes.html"
367
+ // remove ".html" => "shapes"
368
+ const linkRoute = link
369
+ .getAttribute("href")
370
+ .replace(".html", "");
371
+ link.classList.toggle("active", linkRoute === route);
372
+ });
373
+
374
+ // Track virtual pageview
375
+ if (typeof trackPageView === "function") {
376
+ trackPageView(route);
377
+ }
378
+ }
379
+
380
+ /**
381
+ * On initial load (and whenever the hash changes), parse the route and load it.
382
+ */
383
+ function handleHashChange() {
384
+ const route = getRouteFromHash();
385
+ loadRoute(route);
386
+ }
387
+
388
+ // 1) On page load, handle the existing hash (if any).
389
+ handleHashChange();
390
+
391
+ // 2) Listen for future hash changes
392
+ window.addEventListener("hashchange", handleHashChange);
393
+
394
+ // 3) Intercept clicks on nav links so we can
395
+ // set location.hash instead of letting them navigate directly.
396
+ links.forEach((link) => {
397
+ link.addEventListener("click", (e) => {
398
+ e.preventDefault(); // stop normal link navigation
399
+
400
+ // e.g. "shapes.html"
401
+ const href = link.getAttribute("href");
402
+ // remove ".html" => "shapes"
403
+ const routeName = href.replace(".html", "");
404
+
405
+ // set the hash: "#/shapes"
406
+ location.hash = "/" + routeName;
407
+ });
408
+ });
409
+ });
410
+ </script>
411
+
412
+ <!-- Hamburger Menu Toggle -->
413
+ <script>
414
+ document.addEventListener("DOMContentLoaded", () => {
415
+ const hamburgerBtn = document.getElementById("hamburger-btn");
416
+ const nav = document.getElementById("main-nav");
417
+ const overlay = document.getElementById("nav-overlay");
418
+
419
+ function toggleMenu() {
420
+ nav.classList.toggle("open");
421
+ overlay.classList.toggle("open");
422
+ hamburgerBtn.classList.toggle("active");
423
+ }
424
+
425
+ function closeMenu() {
426
+ nav.classList.remove("open");
427
+ overlay.classList.remove("open");
428
+ hamburgerBtn.classList.remove("active");
429
+ }
430
+
431
+ hamburgerBtn.addEventListener("click", toggleMenu);
432
+ overlay.addEventListener("click", closeMenu);
433
+
434
+ // Close menu when a link is clicked (on mobile)
435
+ const links = document.querySelectorAll("nav a");
436
+ links.forEach((link) => {
437
+ link.addEventListener("click", () => {
438
+ if (window.innerWidth <= 768) {
439
+ closeMenu();
440
+ }
441
+ });
442
+ });
443
+ });
444
+ </script>
445
+ </body>
446
+ </html>
package/dist/isometric.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Isometric Scene</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="info" class="light">
14
+ <strong>Marble Madness</strong>
15
+ <span>
16
+ A mini <code>IsometricScene</code> demo with platforms at different heights.<br>
17
+ <b>WASD</b> to move, <b>Space</b> to jump. Navigate the platforms!<br>
18
+ <b>Q/E</b> or <b>arrow buttons</b> to rotate the view 90°.<br>
19
+ The ball will reset if it falls off the edge.<br>
20
+ </span>
21
+ </div>
22
+ <canvas id="game"></canvas>
23
+ <script type="module">
24
+ import { IsometricGame } from './js/isometric.js';
25
+
26
+ window.addEventListener("load", () => {
27
+ const canvas = document.getElementById("game");
28
+ const game = new IsometricGame(canvas);
29
+ game.start();
30
+ });
31
+ </script>
32
+ </body>
33
+
34
+ </html>