@guinetik/gcanvas 1.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 (349) hide show
  1. package/.github/workflows/release.yaml +70 -0
  2. package/.jshintrc +4 -0
  3. package/.vscode/settings.json +22 -0
  4. package/CLAUDE.md +310 -0
  5. package/blackhole.jpg +0 -0
  6. package/demo.png +0 -0
  7. package/demos/CNAME +1 -0
  8. package/demos/animations.html +31 -0
  9. package/demos/basic.html +38 -0
  10. package/demos/baskara.html +31 -0
  11. package/demos/bezier.html +35 -0
  12. package/demos/beziersignature.html +29 -0
  13. package/demos/blackhole.html +28 -0
  14. package/demos/blob.html +35 -0
  15. package/demos/demos.css +289 -0
  16. package/demos/easing.html +28 -0
  17. package/demos/events.html +195 -0
  18. package/demos/fluent.html +647 -0
  19. package/demos/fractals.html +36 -0
  20. package/demos/genart.html +26 -0
  21. package/demos/gendream.html +26 -0
  22. package/demos/group.html +36 -0
  23. package/demos/home.html +587 -0
  24. package/demos/index.html +364 -0
  25. package/demos/isometric.html +34 -0
  26. package/demos/js/animations.js +452 -0
  27. package/demos/js/basic.js +204 -0
  28. package/demos/js/baskara.js +751 -0
  29. package/demos/js/bezier.js +692 -0
  30. package/demos/js/beziersignature.js +241 -0
  31. package/demos/js/blackhole/accretiondisk.obj.js +379 -0
  32. package/demos/js/blackhole/blackhole.obj.js +318 -0
  33. package/demos/js/blackhole/index.js +409 -0
  34. package/demos/js/blackhole/particle.js +56 -0
  35. package/demos/js/blackhole/starfield.obj.js +218 -0
  36. package/demos/js/blob.js +2263 -0
  37. package/demos/js/easing.js +477 -0
  38. package/demos/js/fluent.js +183 -0
  39. package/demos/js/fractals.js +931 -0
  40. package/demos/js/fractalworker.js +93 -0
  41. package/demos/js/genart.js +268 -0
  42. package/demos/js/gendream.js +209 -0
  43. package/demos/js/group.js +140 -0
  44. package/demos/js/info-toggle.js +25 -0
  45. package/demos/js/isometric.js +863 -0
  46. package/demos/js/kerr.js +1556 -0
  47. package/demos/js/lavalamp.js +590 -0
  48. package/demos/js/layout.js +354 -0
  49. package/demos/js/mondrian.js +285 -0
  50. package/demos/js/opacity.js +275 -0
  51. package/demos/js/painter.js +484 -0
  52. package/demos/js/particles-showcase.js +514 -0
  53. package/demos/js/particles.js +299 -0
  54. package/demos/js/patterns.js +397 -0
  55. package/demos/js/penrose/artifact.js +69 -0
  56. package/demos/js/penrose/blackhole.js +121 -0
  57. package/demos/js/penrose/constants.js +73 -0
  58. package/demos/js/penrose/game.js +943 -0
  59. package/demos/js/penrose/lore.js +278 -0
  60. package/demos/js/penrose/penrosescene.js +892 -0
  61. package/demos/js/penrose/ship.js +216 -0
  62. package/demos/js/penrose/sounds.js +211 -0
  63. package/demos/js/penrose/voidparticle.js +55 -0
  64. package/demos/js/penrose/voidscene.js +258 -0
  65. package/demos/js/penrose/voidship.js +144 -0
  66. package/demos/js/penrose/wormhole.js +46 -0
  67. package/demos/js/pipeline.js +555 -0
  68. package/demos/js/scene.js +304 -0
  69. package/demos/js/scenes.js +320 -0
  70. package/demos/js/schrodinger.js +410 -0
  71. package/demos/js/schwarzschild.js +1023 -0
  72. package/demos/js/shapes.js +628 -0
  73. package/demos/js/space/alien.js +171 -0
  74. package/demos/js/space/boom.js +98 -0
  75. package/demos/js/space/boss.js +353 -0
  76. package/demos/js/space/buff.js +73 -0
  77. package/demos/js/space/bullet.js +102 -0
  78. package/demos/js/space/constants.js +85 -0
  79. package/demos/js/space/game.js +1884 -0
  80. package/demos/js/space/hud.js +112 -0
  81. package/demos/js/space/laserbeam.js +179 -0
  82. package/demos/js/space/lightning.js +277 -0
  83. package/demos/js/space/minion.js +192 -0
  84. package/demos/js/space/missile.js +212 -0
  85. package/demos/js/space/player.js +430 -0
  86. package/demos/js/space/powerup.js +90 -0
  87. package/demos/js/space/starfield.js +58 -0
  88. package/demos/js/space/starpower.js +90 -0
  89. package/demos/js/spacetime.js +559 -0
  90. package/demos/js/svgtween.js +204 -0
  91. package/demos/js/tde/accretiondisk.js +418 -0
  92. package/demos/js/tde/blackhole.js +219 -0
  93. package/demos/js/tde/blackholescene.js +209 -0
  94. package/demos/js/tde/config.js +59 -0
  95. package/demos/js/tde/index.js +695 -0
  96. package/demos/js/tde/jets.js +290 -0
  97. package/demos/js/tde/lensedstarfield.js +147 -0
  98. package/demos/js/tde/tdestar.js +317 -0
  99. package/demos/js/tde/tidalstream.js +356 -0
  100. package/demos/js/tde_old/blackhole.obj.js +354 -0
  101. package/demos/js/tde_old/debris.obj.js +791 -0
  102. package/demos/js/tde_old/flare.obj.js +239 -0
  103. package/demos/js/tde_old/index.js +448 -0
  104. package/demos/js/tde_old/star.obj.js +812 -0
  105. package/demos/js/tiles.js +312 -0
  106. package/demos/js/tweendemo.js +79 -0
  107. package/demos/js/visibility.js +102 -0
  108. package/demos/kerr.html +28 -0
  109. package/demos/lavalamp.html +27 -0
  110. package/demos/layouts.html +37 -0
  111. package/demos/logo.svg +4 -0
  112. package/demos/loop.html +84 -0
  113. package/demos/mondrian.html +32 -0
  114. package/demos/og_image.png +0 -0
  115. package/demos/opacity.html +36 -0
  116. package/demos/painter.html +39 -0
  117. package/demos/particles-showcase.html +28 -0
  118. package/demos/particles.html +24 -0
  119. package/demos/patterns.html +33 -0
  120. package/demos/penrose-game.html +31 -0
  121. package/demos/pipeline.html +737 -0
  122. package/demos/scene.html +33 -0
  123. package/demos/scenes.html +96 -0
  124. package/demos/schrodinger.html +27 -0
  125. package/demos/schwarzschild.html +27 -0
  126. package/demos/shapes.html +16 -0
  127. package/demos/space.html +85 -0
  128. package/demos/spacetime.html +27 -0
  129. package/demos/svgtween.html +29 -0
  130. package/demos/tde.html +28 -0
  131. package/demos/tiles.html +28 -0
  132. package/demos/transforms.html +400 -0
  133. package/demos/tween.html +45 -0
  134. package/demos/visibility.html +33 -0
  135. package/disk_example.png +0 -0
  136. package/docs/README.md +222 -0
  137. package/docs/concepts/architecture-overview.md +204 -0
  138. package/docs/concepts/lifecycle.md +255 -0
  139. package/docs/concepts/rendering-pipeline.md +279 -0
  140. package/docs/concepts/tde-zorder.md +106 -0
  141. package/docs/concepts/two-layer-architecture.md +229 -0
  142. package/docs/getting-started/first-game.md +354 -0
  143. package/docs/getting-started/hello-world.md +269 -0
  144. package/docs/getting-started/installation.md +157 -0
  145. package/docs/modules/collision/README.md +453 -0
  146. package/docs/modules/fluent/README.md +1075 -0
  147. package/docs/modules/game/README.md +303 -0
  148. package/docs/modules/isometric-camera.md +210 -0
  149. package/docs/modules/isometric.md +275 -0
  150. package/docs/modules/painter/README.md +328 -0
  151. package/docs/modules/particle/README.md +559 -0
  152. package/docs/modules/shapes/README.md +221 -0
  153. package/docs/modules/shapes/base/euclidian.md +123 -0
  154. package/docs/modules/shapes/base/geometry2d.md +204 -0
  155. package/docs/modules/shapes/base/renderable.md +215 -0
  156. package/docs/modules/shapes/base/shape.md +262 -0
  157. package/docs/modules/shapes/base/transformable.md +243 -0
  158. package/docs/modules/shapes/hierarchy.md +218 -0
  159. package/docs/modules/state/README.md +577 -0
  160. package/docs/modules/util/README.md +99 -0
  161. package/docs/modules/util/camera3d.md +412 -0
  162. package/docs/modules/util/scene3d.md +395 -0
  163. package/index.html +17 -0
  164. package/jsdoc.json +50 -0
  165. package/package.json +55 -0
  166. package/readme.md +599 -0
  167. package/scripts/build-demo.js +69 -0
  168. package/scripts/bundle4llm.js +276 -0
  169. package/scripts/clearconsole.js +48 -0
  170. package/src/collision/collision-system.js +332 -0
  171. package/src/collision/collision.js +303 -0
  172. package/src/collision/index.js +10 -0
  173. package/src/fluent/fluent-game.js +430 -0
  174. package/src/fluent/fluent-go.js +1060 -0
  175. package/src/fluent/fluent-layer.js +152 -0
  176. package/src/fluent/fluent-scene.js +291 -0
  177. package/src/fluent/index.js +98 -0
  178. package/src/fluent/sketch.js +380 -0
  179. package/src/game/game.js +467 -0
  180. package/src/game/index.js +49 -0
  181. package/src/game/objects/go.js +220 -0
  182. package/src/game/objects/imagego.js +30 -0
  183. package/src/game/objects/index.js +54 -0
  184. package/src/game/objects/isometric-scene.js +260 -0
  185. package/src/game/objects/layoutscene.js +549 -0
  186. package/src/game/objects/scene.js +175 -0
  187. package/src/game/objects/scene3d.js +118 -0
  188. package/src/game/objects/text.js +221 -0
  189. package/src/game/objects/wrapper.js +232 -0
  190. package/src/game/pipeline.js +243 -0
  191. package/src/game/ui/button.js +396 -0
  192. package/src/game/ui/cursor.js +93 -0
  193. package/src/game/ui/fps.js +91 -0
  194. package/src/game/ui/index.js +5 -0
  195. package/src/game/ui/togglebutton.js +93 -0
  196. package/src/game/ui/tooltip.js +249 -0
  197. package/src/index.js +25 -0
  198. package/src/io/events.js +20 -0
  199. package/src/io/index.js +86 -0
  200. package/src/io/input.js +70 -0
  201. package/src/io/keys.js +152 -0
  202. package/src/io/mouse.js +61 -0
  203. package/src/io/touch.js +39 -0
  204. package/src/logger/debugtab.js +138 -0
  205. package/src/logger/index.js +3 -0
  206. package/src/logger/loggable.js +47 -0
  207. package/src/logger/logger.js +113 -0
  208. package/src/math/complex.js +37 -0
  209. package/src/math/constants.js +1 -0
  210. package/src/math/fractal.js +1271 -0
  211. package/src/math/gr.js +201 -0
  212. package/src/math/heat.js +202 -0
  213. package/src/math/index.js +12 -0
  214. package/src/math/noise.js +433 -0
  215. package/src/math/orbital.js +191 -0
  216. package/src/math/patterns.js +1339 -0
  217. package/src/math/penrose.js +259 -0
  218. package/src/math/quantum.js +115 -0
  219. package/src/math/random.js +195 -0
  220. package/src/math/tensor.js +1009 -0
  221. package/src/mixins/anchor.js +131 -0
  222. package/src/mixins/draggable.js +72 -0
  223. package/src/mixins/index.js +2 -0
  224. package/src/motion/bezier.js +132 -0
  225. package/src/motion/bounce.js +58 -0
  226. package/src/motion/easing.js +349 -0
  227. package/src/motion/float.js +130 -0
  228. package/src/motion/follow.js +125 -0
  229. package/src/motion/hop.js +52 -0
  230. package/src/motion/index.js +82 -0
  231. package/src/motion/motion.js +1124 -0
  232. package/src/motion/orbit.js +49 -0
  233. package/src/motion/oscillate.js +39 -0
  234. package/src/motion/parabolic.js +141 -0
  235. package/src/motion/patrol.js +147 -0
  236. package/src/motion/pendulum.js +48 -0
  237. package/src/motion/pulse.js +88 -0
  238. package/src/motion/shake.js +83 -0
  239. package/src/motion/spiral.js +144 -0
  240. package/src/motion/spring.js +150 -0
  241. package/src/motion/swing.js +47 -0
  242. package/src/motion/tween.js +92 -0
  243. package/src/motion/tweenetik.js +139 -0
  244. package/src/motion/waypoint.js +210 -0
  245. package/src/painter/index.js +8 -0
  246. package/src/painter/painter.colors.js +331 -0
  247. package/src/painter/painter.effects.js +230 -0
  248. package/src/painter/painter.img.js +229 -0
  249. package/src/painter/painter.js +295 -0
  250. package/src/painter/painter.lines.js +189 -0
  251. package/src/painter/painter.opacity.js +41 -0
  252. package/src/painter/painter.shapes.js +277 -0
  253. package/src/painter/painter.text.js +273 -0
  254. package/src/particle/emitter.js +124 -0
  255. package/src/particle/index.js +11 -0
  256. package/src/particle/particle-system.js +322 -0
  257. package/src/particle/particle.js +71 -0
  258. package/src/particle/updaters.js +170 -0
  259. package/src/shapes/arc.js +43 -0
  260. package/src/shapes/arrow.js +33 -0
  261. package/src/shapes/bezier.js +42 -0
  262. package/src/shapes/circle.js +62 -0
  263. package/src/shapes/clouds.js +56 -0
  264. package/src/shapes/cone.js +219 -0
  265. package/src/shapes/cross.js +70 -0
  266. package/src/shapes/cube.js +244 -0
  267. package/src/shapes/cylinder.js +254 -0
  268. package/src/shapes/diamond.js +48 -0
  269. package/src/shapes/euclidian.js +111 -0
  270. package/src/shapes/figure.js +115 -0
  271. package/src/shapes/geometry.js +220 -0
  272. package/src/shapes/group.js +375 -0
  273. package/src/shapes/heart.js +42 -0
  274. package/src/shapes/hexagon.js +26 -0
  275. package/src/shapes/image.js +192 -0
  276. package/src/shapes/index.js +111 -0
  277. package/src/shapes/line.js +29 -0
  278. package/src/shapes/pattern.js +90 -0
  279. package/src/shapes/pin.js +44 -0
  280. package/src/shapes/poly.js +31 -0
  281. package/src/shapes/prism.js +226 -0
  282. package/src/shapes/rect.js +35 -0
  283. package/src/shapes/renderable.js +333 -0
  284. package/src/shapes/ring.js +26 -0
  285. package/src/shapes/roundrect.js +95 -0
  286. package/src/shapes/shape.js +117 -0
  287. package/src/shapes/slice.js +26 -0
  288. package/src/shapes/sphere.js +314 -0
  289. package/src/shapes/sphere3d.js +537 -0
  290. package/src/shapes/square.js +15 -0
  291. package/src/shapes/star.js +99 -0
  292. package/src/shapes/svg.js +408 -0
  293. package/src/shapes/text.js +553 -0
  294. package/src/shapes/traceable.js +83 -0
  295. package/src/shapes/transform.js +357 -0
  296. package/src/shapes/transformable.js +172 -0
  297. package/src/shapes/triangle.js +26 -0
  298. package/src/sound/index.js +17 -0
  299. package/src/sound/sound.js +473 -0
  300. package/src/sound/synth.analyzer.js +149 -0
  301. package/src/sound/synth.effects.js +207 -0
  302. package/src/sound/synth.envelope.js +59 -0
  303. package/src/sound/synth.js +229 -0
  304. package/src/sound/synth.musical.js +160 -0
  305. package/src/sound/synth.noise.js +85 -0
  306. package/src/sound/synth.oscillators.js +293 -0
  307. package/src/state/index.js +10 -0
  308. package/src/state/state-machine.js +371 -0
  309. package/src/util/camera3d.js +438 -0
  310. package/src/util/index.js +6 -0
  311. package/src/util/isometric-camera.js +235 -0
  312. package/src/util/layout.js +317 -0
  313. package/src/util/position.js +147 -0
  314. package/src/util/tasks.js +47 -0
  315. package/src/util/zindex.js +287 -0
  316. package/src/webgl/index.js +9 -0
  317. package/src/webgl/shaders/sphere-shaders.js +994 -0
  318. package/src/webgl/webgl-renderer.js +388 -0
  319. package/tde.png +0 -0
  320. package/test/math/orbital.test.js +61 -0
  321. package/test/math/tensor.test.js +114 -0
  322. package/test/particle/emitter.test.js +204 -0
  323. package/test/particle/particle-system.test.js +310 -0
  324. package/test/particle/particle.test.js +116 -0
  325. package/test/particle/updaters.test.js +386 -0
  326. package/test/setup.js +120 -0
  327. package/test/shapes/euclidian.test.js +44 -0
  328. package/test/shapes/geometry.test.js +86 -0
  329. package/test/shapes/group.test.js +86 -0
  330. package/test/shapes/rectangle.test.js +64 -0
  331. package/test/shapes/transform.test.js +379 -0
  332. package/test/util/camera3d.test.js +428 -0
  333. package/test/util/scene3d.test.js +352 -0
  334. package/types/collision.d.ts +249 -0
  335. package/types/common.d.ts +155 -0
  336. package/types/game.d.ts +497 -0
  337. package/types/index.d.ts +309 -0
  338. package/types/io.d.ts +188 -0
  339. package/types/logger.d.ts +127 -0
  340. package/types/math.d.ts +268 -0
  341. package/types/mixins.d.ts +92 -0
  342. package/types/motion.d.ts +678 -0
  343. package/types/painter.d.ts +378 -0
  344. package/types/shapes.d.ts +864 -0
  345. package/types/sound.d.ts +672 -0
  346. package/types/state.d.ts +251 -0
  347. package/types/util.d.ts +253 -0
  348. package/vite.config.js +50 -0
  349. package/vitest.config.js +13 -0
package/demos/index.html ADDED
@@ -0,0 +1,364 @@
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 name="title" content="GCanvas Demos - Interactive Examples & Documentation">
10
+ <meta name="description" 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.">
11
+ <meta name="keywords" content="gcanvas, canvas demos, 2d canvas examples, game framework demos, javascript canvas, html5 canvas examples, interactive demos, creative coding examples">
12
+ <meta name="author" content="GCanvas">
13
+ <meta name="robots" content="index, follow">
14
+ <link rel="canonical" href="https://gcanvas.guinetik.com/">
15
+
16
+ <!-- Open Graph / Facebook -->
17
+ <meta property="og:type" content="website">
18
+ <meta property="og:url" content="https://gcanvas.guinetik.com/">
19
+ <meta property="og:title" content="GCanvas Demos - Interactive Examples & Documentation">
20
+ <meta property="og:description" 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.">
21
+ <meta property="og:image" content="https://gcanvas.guinetik.com/og_image.png">
22
+ <meta property="og:image:width" content="1200">
23
+ <meta property="og:image:height" content="630">
24
+ <meta property="og:image:alt" content="GCanvas interactive demos and examples">
25
+ <meta property="og:site_name" content="GCanvas">
26
+ <meta property="og:locale" content="en_US">
27
+
28
+ <!-- Twitter -->
29
+ <meta name="twitter:card" content="summary_large_image">
30
+ <meta name="twitter:url" content="https://gcanvas.guinetik.com/">
31
+ <meta name="twitter:title" content="GCanvas Demos - Interactive Examples & Documentation">
32
+ <meta name="twitter:description" 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.">
33
+ <meta name="twitter:image" content="https://gcanvas.guinetik.com/og_image.png">
34
+ <meta name="twitter:image:alt" content="GCanvas interactive demos and examples">
35
+ <meta name="twitter:creator" content="@guinetik">
36
+
37
+ <!-- Favicon -->
38
+ <link rel="icon" type="image/svg+xml" href="./logo.svg">
39
+ <link rel="apple-touch-icon" href="./logo.svg">
40
+ <meta name="theme-color" content="#000000">
41
+
42
+ <!-- Structured Data (JSON-LD) -->
43
+ <script type="application/ld+json">
44
+ {
45
+ "@context": "https://schema.org",
46
+ "@type": "WebSite",
47
+ "name": "GCanvas Demos",
48
+ "url": "https://gcanvas.guinetik.com/",
49
+ "description": "Interactive demos and examples for GCanvas, a modular 2D canvas rendering and game framework",
50
+ "publisher": {
51
+ "@type": "Organization",
52
+ "name": "GCanvas",
53
+ "url": "https://github.com/guinetik/gcanvas"
54
+ },
55
+ "potentialAction": {
56
+ "@type": "SearchAction",
57
+ "target": "https://gcanvas.guinetik.com/?q={search_term_string}",
58
+ "query-input": "required name=search_term_string"
59
+ }
60
+ }
61
+ </script>
62
+
63
+ <link rel="stylesheet" href="demos.css" />
64
+
65
+ <!-- Google Analytics -->
66
+ <script
67
+ async
68
+ src="https://www.googletagmanager.com/gtag/js?id=G-1GHJD0LM4Z"
69
+ ></script>
70
+ <script>
71
+ window.dataLayer = window.dataLayer || [];
72
+ function gtag() {
73
+ dataLayer.push(arguments);
74
+ }
75
+ gtag("js", new Date());
76
+ gtag("config", "G-1GHJD0LM4Z", { send_page_view: false });
77
+
78
+ // Track virtual pageviews on hash changes
79
+ function trackPageView(route) {
80
+ gtag("event", "page_view", {
81
+ page_title: route + " - GCanvas Demos",
82
+ page_path: "/demos/" + route,
83
+ });
84
+ }
85
+ </script>
86
+ </head>
87
+
88
+ <body>
89
+ <!-- Mobile Header (hidden on desktop) -->
90
+ <header class="mobile-header">
91
+ <img src="./logo.svg" alt="GCanvas Logo" class="mobile-logo" />
92
+ <span class="mobile-title">GCANVAS</span>
93
+ <button
94
+ class="hamburger"
95
+ id="hamburger-btn"
96
+ aria-label="Toggle menu"
97
+ >
98
+ <span></span>
99
+ <span></span>
100
+ <span></span>
101
+ </button>
102
+ </header>
103
+
104
+ <!-- Overlay for closing menu when clicking outside -->
105
+ <div class="nav-overlay" id="nav-overlay"></div>
106
+
107
+ <nav id="main-nav">
108
+ <div class="nav-branding">
109
+ <div style="text-align: center; margin-bottom: 1em">
110
+ <img
111
+ src="./logo.svg"
112
+ alt="Logo"
113
+ width="90"
114
+ height="80"
115
+ style="display: inline-block; vertical-align: middle"
116
+ />
117
+ </div>
118
+ <div style="text-align: center; margin-bottom: 1em">
119
+ <h1
120
+ style="
121
+ letter-spacing: 2px;
122
+ margin-bottom: 0.3em;
123
+ margin-top: 0.25em;
124
+ font-family: monospace;
125
+ font-size: 2em;
126
+ color: #ccc;
127
+ "
128
+ >
129
+ GCANVAS
130
+ </h1>
131
+ <hr style="margin: 0.5em 1.6em" />
132
+ <a
133
+ href="https://github.com/guinetik/gcanvas"
134
+ target="_blank"
135
+ title="View on GitHub"
136
+ style="
137
+ display: inline-block;
138
+ background: white;
139
+ border-radius: 50%;
140
+ width: 36px;
141
+ height: 36px;
142
+ margin: 0.5em;
143
+ box-shadow: 0 2px 6px #0002;
144
+ "
145
+ >
146
+ <svg
147
+ viewBox="0 0 16 16"
148
+ width="22"
149
+ height="22"
150
+ aria-hidden="true"
151
+ fill="#fff"
152
+ style="margin: 7px 0 0 0"
153
+ >
154
+ <path
155
+ 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
156
+ 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
157
+ -.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
158
+ -3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
159
+ 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
160
+ 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
161
+ 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
162
+ 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
163
+ ></path>
164
+ </svg>
165
+ </a>
166
+ </div>
167
+ <hr />
168
+ </div>
169
+ <h2 style="margin-bottom: 0.3em">Home</h2>
170
+ <a href="home.html" target="demo-frame" class="active">Welcome</a>
171
+ <hr />
172
+ <h2 style="margin-bottom: 0.3em">Docs</h2>
173
+ <a href="pipeline.html" target="demo-frame">Rendering Pipeline</a>
174
+ <a href="fluent.html" target="demo-frame">Fluent API</a>
175
+ <hr />
176
+ <h2>Demos</h2>
177
+ <h3>Game</h3>
178
+ <a href="basic.html" target="demo-frame">Basic</a>
179
+ <a href="loop.html" target="demo-frame">Game Loop</a>
180
+ <a href="events.html" target="demo-frame">Event Handlers</a>
181
+ <h3>Shapes</h3>
182
+ <a href="shapes.html" target="demo-frame" class="active"
183
+ >Shape Gallery</a
184
+ >
185
+ <a href="visibility.html" target="demo-frame">Visibility</a>
186
+ <a href="opacity.html" target="demo-frame">Opacity</a>
187
+ <a href="transforms.html" target="demo-frame">Transforms</a>
188
+ <a href="group.html" target="demo-frame">Groups</a>
189
+ <a href="particles.html" target="demo-frame">Shape Particles</a>
190
+ <h3>Painter</h3>
191
+ <a href="painter.html" target="demo-frame">Painter</a>
192
+ <a href="bezier.html" target="demo-frame">Bezier Curves</a>
193
+ <a href="beziersignature.html" target="demo-frame"
194
+ >Bezier Signature</a
195
+ >
196
+ <a href="svgtween.html" target="demo-frame">SVG Motion</a>
197
+ <h3>Image</h3>
198
+ <a href="patterns.html" target="demo-frame">Image Patterns</a>
199
+ <a href="fractals.html" target="demo-frame">Fractals</a>
200
+ <h3>Motion</h3>
201
+ <a href="animations.html" target="demo-frame">Animations</a>
202
+ <a href="easing.html" target="demo-frame">Easing</a>
203
+ <a href="tween.html" target="demo-frame">Tween</a>
204
+ <a href="particles-showcase.html" target="demo-frame"
205
+ >Particle System</a
206
+ >
207
+ <h3>Scene</h3>
208
+ <a href="scene.html" target="demo-frame">Scene</a>
209
+ <a href="layouts.html" target="demo-frame">Scene Layouts</a>
210
+ <a href="tiles.html" target="demo-frame">Tile Layout</a>
211
+ <a href="isometric.html" target="demo-frame">Isometric</a>
212
+ <a href="scenes.html" target="demo-frame">Scene Transforms</a>
213
+ <hr />
214
+ <h2 style="margin-bottom: 0.3em">Generative Art</h2>
215
+ <a href="genart.html" target="demo-frame">Hypnotic Mandala</a>
216
+ <a href="mondrian.html" target="demo-frame">Mondrian</a>
217
+ <a href="gendream.html" target="demo-frame">Fractal Plasma</a>
218
+ <a href="lavalamp.html" target="demo-frame">Lava Lamp</a>
219
+ <a href="baskara.html" target="demo-frame">Root Dance</a>
220
+ <hr />
221
+ <h2 style="margin-bottom: 0.3em">Math & Physics</h2>
222
+ <a href="schrodinger.html" target="demo-frame">Schrodinger Wave</a>
223
+ <a href="spacetime.html" target="demo-frame">Spacetime Curvature</a>
224
+ <a href="schwarzschild.html" target="demo-frame"
225
+ >Schwarzschild Metric</a
226
+ >
227
+ <a href="kerr.html" target="demo-frame">Kerr Metric</a>
228
+ <a href="blackhole.html" target="demo-frame">Black Hole</a>
229
+ <a href="tde.html" target="demo-frame">Tidal Disruption</a>
230
+ <hr />
231
+ <h2 style="margin-bottom: 0.3em">Games</h2>
232
+ <a href="blob.html" target="demo-frame">Bezier Blob</a>
233
+ <a href="space.html" target="demo-frame">Space Invaders</a>
234
+ <a href="penrose-game.html" target="demo-frame"
235
+ >Penrose Spacetime</a
236
+ >
237
+ <hr />
238
+ </nav>
239
+ <iframe name="demo-frame" id="demo-frame" src="home.html"></iframe>
240
+
241
+ <!-- Simple script to highlight the active link -->
242
+ <script>
243
+ // Wait for the DOM to load
244
+ document.addEventListener("DOMContentLoaded", () => {
245
+ const links = document.querySelectorAll("nav a");
246
+
247
+ links.forEach((link) => {
248
+ link.addEventListener("click", () => {
249
+ // Remove .active from all links
250
+ links.forEach((l) => l.classList.remove("active"));
251
+ // Add .active to the clicked link
252
+ link.classList.add("active");
253
+ });
254
+ });
255
+ });
256
+ </script>
257
+
258
+ <script>
259
+ document.addEventListener("DOMContentLoaded", () => {
260
+ const links = document.querySelectorAll("nav a");
261
+ const iframe = document.getElementById("demo-frame");
262
+
263
+ /**
264
+ * Parse the hash in the form "#/shapes" => returns "shapes".
265
+ * Default to "shapes" if there's no valid hash.
266
+ */
267
+ function getRouteFromHash() {
268
+ if (location.hash.startsWith("#/")) {
269
+ return location.hash.slice(2); // remove "#/"
270
+ }
271
+ return "home"; // fallback route
272
+ }
273
+
274
+ /**
275
+ * Load the given route into the iframe, e.g. route="shapes" => "shapes.html"
276
+ * Also highlight the corresponding link and track pageview.
277
+ */
278
+ function loadRoute(route) {
279
+ // Set iframe src
280
+ iframe.src = route + ".html";
281
+
282
+ // Highlight the active link
283
+ links.forEach((link) => {
284
+ // link.href might be "shapes.html"
285
+ // remove ".html" => "shapes"
286
+ const linkRoute = link
287
+ .getAttribute("href")
288
+ .replace(".html", "");
289
+ link.classList.toggle("active", linkRoute === route);
290
+ });
291
+
292
+ // Track virtual pageview
293
+ if (typeof trackPageView === "function") {
294
+ trackPageView(route);
295
+ }
296
+ }
297
+
298
+ /**
299
+ * On initial load (and whenever the hash changes), parse the route and load it.
300
+ */
301
+ function handleHashChange() {
302
+ const route = getRouteFromHash();
303
+ loadRoute(route);
304
+ }
305
+
306
+ // 1) On page load, handle the existing hash (if any).
307
+ handleHashChange();
308
+
309
+ // 2) Listen for future hash changes
310
+ window.addEventListener("hashchange", handleHashChange);
311
+
312
+ // 3) Intercept clicks on nav links so we can
313
+ // set location.hash instead of letting them navigate directly.
314
+ links.forEach((link) => {
315
+ link.addEventListener("click", (e) => {
316
+ e.preventDefault(); // stop normal link navigation
317
+
318
+ // e.g. "shapes.html"
319
+ const href = link.getAttribute("href");
320
+ // remove ".html" => "shapes"
321
+ const routeName = href.replace(".html", "");
322
+
323
+ // set the hash: "#/shapes"
324
+ location.hash = "/" + routeName;
325
+ });
326
+ });
327
+ });
328
+ </script>
329
+
330
+ <!-- Hamburger Menu Toggle -->
331
+ <script>
332
+ document.addEventListener("DOMContentLoaded", () => {
333
+ const hamburgerBtn = document.getElementById("hamburger-btn");
334
+ const nav = document.getElementById("main-nav");
335
+ const overlay = document.getElementById("nav-overlay");
336
+
337
+ function toggleMenu() {
338
+ nav.classList.toggle("open");
339
+ overlay.classList.toggle("open");
340
+ hamburgerBtn.classList.toggle("active");
341
+ }
342
+
343
+ function closeMenu() {
344
+ nav.classList.remove("open");
345
+ overlay.classList.remove("open");
346
+ hamburgerBtn.classList.remove("active");
347
+ }
348
+
349
+ hamburgerBtn.addEventListener("click", toggleMenu);
350
+ overlay.addEventListener("click", closeMenu);
351
+
352
+ // Close menu when a link is clicked (on mobile)
353
+ const links = document.querySelectorAll("nav a");
354
+ links.forEach((link) => {
355
+ link.addEventListener("click", () => {
356
+ if (window.innerWidth <= 768) {
357
+ closeMenu();
358
+ }
359
+ });
360
+ });
361
+ });
362
+ </script>
363
+ </body>
364
+ </html>
package/demos/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>