@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/plane3d.html ADDED
@@ -0,0 +1,24 @@
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>Plane3D Showcase - GCanvas</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>Plane3D Showcase</strong> — 3D plane rendering modes<br/>
13
+ <span style="color:#CCC">
14
+ <li>Solid Color (Canvas 2D rendering)</li>
15
+ <li>Gradient (WebGL shader)</li>
16
+ <li>Grid (WebGL shader)</li>
17
+ <li>Drag to rotate camera</li>
18
+ <li>Double-click to reset view</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module" src="./js/plane3d.js"></script>
23
+ </body>
24
+ </html>
package/dist/platformer.html ADDED
@@ -0,0 +1,43 @@
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>Tron Platformer - GCanvas Demo</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ <style>
10
+ /* Override for full immersion */
11
+ body {
12
+ background: #000;
13
+ }
14
+
15
+ canvas#game {
16
+ width: 100vw;
17
+ height: 100vh;
18
+ }
19
+
20
+ #info {
21
+ background: rgba(0, 0, 0, 0.9);
22
+ border-bottom: 1px solid #00ff00;
23
+ }
24
+
25
+ #info strong {
26
+ color: #00ff00;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="info">
32
+ <strong>NETRUNNER.exe</strong> — platformer demo<br/>
33
+ <span style="color:#666">
34
+ <li>ARROWS / WASD: move left/right</li>
35
+ <li>SPACE / UP / W: jump</li>
36
+ <li>stomp enemies • collect data orbs</li>
37
+ <li>reach the portal to complete the level</li>
38
+ </span>
39
+ </div>
40
+ <canvas id="game"></canvas>
41
+ <script type="module" src="./js/platformer.js"></script>
42
+ </body>
43
+ </html>
package/dist/rossler.html ADDED
@@ -0,0 +1,27 @@
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>Rössler Attractor 3D</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>Rössler Attractor</strong> (1976)<br/>
13
+ <span style="color:#CCC">
14
+ <li>dx/dt = -y - z</li>
15
+ <li>dy/dt = x + ay</li>
16
+ <li>dz/dt = b + z(x - c)</li>
17
+ <li>a=0.2, b=0.2, c=5.7</li>
18
+ <li>Simple spiral with fold-back</li>
19
+ <li>Purple = slow, Orange = fast</li>
20
+ <li>Drag to rotate</li>
21
+ <li>Scroll/pinch to zoom</li>
22
+ </span>
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module" src="./js/rossler.js"></script>
26
+ </body>
27
+ </html>
package/dist/scene-interactivity-test.html ADDED
@@ -0,0 +1,220 @@
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>Scene Interactivity Test</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ </head>
10
+
11
+ <body>
12
+ <div id="info">
13
+ <strong>Scene Interactivity Test</strong> — Verifies that
14
+ GameObjects inside Scenes receive input events correctly.<br />
15
+ <span style="color: #ccc">
16
+ <li>Click on any colored box to see event fired</li>
17
+ <li>Hover over boxes to see hover state change</li>
18
+ <li>Nested scenes work too!</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+
23
+ <script type="module">
24
+ import {
25
+ Game,
26
+ Scene,
27
+ GameObject,
28
+ Rectangle,
29
+ TextShape,
30
+ Text,
31
+ FPSCounter,
32
+ } from "/gcanvas.es.min.js";
33
+
34
+ class ClickableBox extends GameObject {
35
+ constructor(game, color, label) {
36
+ super(game, { width: 150, height: 100 });
37
+
38
+ // Enable interactivity
39
+ this.interactive = true;
40
+
41
+ this.color = color;
42
+ this.defaultColor = color;
43
+ this.clickCount = 0;
44
+
45
+ // Create shapes
46
+ this.box = new Rectangle({
47
+ width: 150,
48
+ height: 100,
49
+ color: this.color,
50
+ strokeColor: "#fff",
51
+ lineWidth: 2,
52
+ });
53
+
54
+ this.label = new TextShape(label, {
55
+ font: "bold 14px monospace",
56
+ color: "#fff",
57
+ align: "center",
58
+ baseline: "top",
59
+ });
60
+
61
+ this.counter = new TextShape("Clicks: 0", {
62
+ font: "12px monospace",
63
+ color: "#fff",
64
+ align: "center",
65
+ baseline: "bottom",
66
+ });
67
+
68
+ // Setup events
69
+ this.on("inputdown", (e) => {
70
+ this.clickCount++;
71
+ this.counter.text = `Clicks: ${this.clickCount}`;
72
+ console.log(
73
+ `${label} clicked! Total: ${this.clickCount}`,
74
+ );
75
+
76
+ // Flash effect
77
+ this.box.color = "#fff";
78
+ setTimeout(() => {
79
+ this.box.color = this.hovered
80
+ ? this.brighten(this.defaultColor)
81
+ : this.defaultColor;
82
+ }, 100);
83
+ });
84
+
85
+ this.on("mouseover", () => {
86
+ this.hovered = true;
87
+ this.box.color = this.brighten(this.defaultColor);
88
+ this.box.lineWidth = 3;
89
+ });
90
+
91
+ this.on("mouseout", () => {
92
+ this.hovered = false;
93
+ this.box.color = this.defaultColor;
94
+ this.box.lineWidth = 2;
95
+ });
96
+ }
97
+
98
+ brighten(color) {
99
+ // Simple color brightening
100
+ const hex = color.replace("#", "");
101
+ const r = Math.min(
102
+ 255,
103
+ parseInt(hex.substr(0, 2), 16) + 40,
104
+ );
105
+ const g = Math.min(
106
+ 255,
107
+ parseInt(hex.substr(2, 2), 16) + 40,
108
+ );
109
+ const b = Math.min(
110
+ 255,
111
+ parseInt(hex.substr(4, 2), 16) + 40,
112
+ );
113
+ return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
114
+ }
115
+
116
+ draw() {
117
+ super.draw();
118
+
119
+ // Draw box
120
+ this.box.x = 0;
121
+ this.box.y = 0;
122
+ this.box.render();
123
+
124
+ // Draw label
125
+ this.label.x = 0;
126
+ this.label.y = -30;
127
+ this.label.render();
128
+
129
+ // Draw counter
130
+ this.counter.x = 0;
131
+ this.counter.y = 30;
132
+ this.counter.render();
133
+ }
134
+ }
135
+
136
+ class SceneInteractivityTest extends Game {
137
+ constructor(canvas) {
138
+ super(canvas);
139
+ this.backgroundColor = "#000";
140
+ this.enableFluidSize();
141
+ }
142
+
143
+ init() {
144
+ super.init();
145
+
146
+ // Create main scene
147
+ const mainScene = new Scene(this, { name: "MainScene" });
148
+ mainScene.x = this.width / 2;
149
+ mainScene.y = this.height / 2 - 100;
150
+
151
+ // Add boxes directly to main scene
152
+ const box1 = new ClickableBox(this, "#e74c3c", "Box 1");
153
+ box1.x = -200;
154
+ box1.y = -80;
155
+ mainScene.add(box1);
156
+
157
+ const box2 = new ClickableBox(this, "#3498db", "Box 2");
158
+ box2.x = 0;
159
+ box2.y = -80;
160
+ mainScene.add(box2);
161
+
162
+ const box3 = new ClickableBox(this, "#2ecc71", "Box 3");
163
+ box3.x = 200;
164
+ box3.y = -80;
165
+ mainScene.add(box3);
166
+
167
+ // Create nested scene
168
+ const nestedScene = new Scene(this, {
169
+ name: "NestedScene",
170
+ });
171
+ nestedScene.y = 120;
172
+
173
+ // Add boxes to nested scene
174
+ const nestedBox1 = new ClickableBox(
175
+ this,
176
+ "#9b59b6",
177
+ "Nested 1",
178
+ );
179
+ nestedBox1.x = -100;
180
+ nestedScene.add(nestedBox1);
181
+
182
+ const nestedBox2 = new ClickableBox(
183
+ this,
184
+ "#f39c12",
185
+ "Nested 2",
186
+ );
187
+ nestedBox2.x = 100;
188
+ nestedScene.add(nestedBox2);
189
+
190
+ // Add nested scene to main scene
191
+ mainScene.add(nestedScene);
192
+
193
+ // Add main scene to pipeline
194
+ this.pipeline.add(mainScene);
195
+
196
+ // Add FPS counter
197
+ this.pipeline.add(
198
+ new FPSCounter(this, { anchor: "bottom-right" }),
199
+ );
200
+
201
+ this.mainScene = mainScene;
202
+ }
203
+
204
+ update(dt) {
205
+ super.update(dt);
206
+
207
+ // Keep scene centered
208
+ this.mainScene.x = this.width / 2;
209
+ this.mainScene.y = this.height / 2 - 50;
210
+ }
211
+ }
212
+
213
+ window.addEventListener("load", () => {
214
+ const canvas = document.getElementById("game");
215
+ const demo = new SceneInteractivityTest(canvas);
216
+ demo.start();
217
+ });
218
+ </script>
219
+ </body>
220
+ </html>
package/dist/scene.html ADDED
@@ -0,0 +1,33 @@
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>gcanvas Scene System Demo</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>Scene Demo</strong><br>
15
+ <span>This demo shows how to layer game objects using <code>Scene</code>.<br />
16
+ It also features the <code>Draggable</code> mix-in to allow dragging of game objects.<br>
17
+ Click on a square to bring it to the front of the scene.<br>
18
+ Drag the squares around the canvas.<br>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module">
23
+ import { DemoGame } from "./js/scene.js";
24
+ // Initialize the game
25
+ window.addEventListener("load", () => {
26
+ const canvas = document.getElementById("game");
27
+ const game = new DemoGame(canvas);
28
+ game.start();
29
+ });
30
+ </script>
31
+ </body>
32
+
33
+ </html>
package/dist/scenes.html ADDED
@@ -0,0 +1,96 @@
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>Scenes Demo</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ <style>
11
+ #debug-toggle {
12
+ position: absolute;
13
+ bottom: 20px;
14
+ left: 20px;
15
+ z-index: 100;
16
+ padding: 10px 20px;
17
+ font-family: monospace;
18
+ font-size: 14px;
19
+ background: #333;
20
+ color: #ff00ff;
21
+ border: 2px solid #ff00ff;
22
+ cursor: pointer;
23
+ transition: all 0.2s ease;
24
+ }
25
+ #debug-toggle:hover {
26
+ background: #ff00ff;
27
+ color: #000;
28
+ }
29
+ #debug-toggle.active {
30
+ background: #ff00ff;
31
+ color: #000;
32
+ }
33
+ </style>
34
+ </head>
35
+
36
+ <body>
37
+ <div id="info" class="light">
38
+ <strong>Scenes Demo</strong> —
39
+ A <code>Scene</code> is a container for <code>GameObjects</code> that provides its own coordinate system and transforms.
40
+ Scenes can be nested inside other scenes, support z-ordering with <code>bringToFront()</code> and <code>sendToBack()</code>,
41
+ and inherit from <code>GameObject</code> so they have full transform support (position, rotation, scale).
42
+ Use scenes to organize game layers, UI panels, or any logical grouping of objects.
43
+ </div>
44
+ <button id="debug-toggle">Toggle Debug</button>
45
+ <canvas id="game"></canvas>
46
+ <script type="module">
47
+ import { MyGame } from './js/scenes.js';
48
+
49
+ window.addEventListener("load", () => {
50
+ const canvas = document.getElementById("game");
51
+ const game = new MyGame(canvas);
52
+ game.start();
53
+
54
+ // Debug toggle
55
+ let debugEnabled = false;
56
+ const debugBtn = document.getElementById("debug-toggle");
57
+
58
+ debugBtn.addEventListener("click", () => {
59
+ debugEnabled = !debugEnabled;
60
+ debugBtn.classList.toggle("active", debugEnabled);
61
+ debugBtn.textContent = debugEnabled ? "Debug: ON" : "Toggle Debug";
62
+
63
+ // Toggle debug on all scenes recursively
64
+ function toggleSceneDebug(scene) {
65
+ if (scene._debug !== undefined) {
66
+ scene._debug = debugEnabled;
67
+ }
68
+ if (scene.children) {
69
+ scene.children.forEach(child => {
70
+ if (child._debug !== undefined) {
71
+ child._debug = debugEnabled;
72
+ }
73
+ // Check for nested scenes
74
+ if (child.scene) toggleSceneDebug(child.scene);
75
+ if (child.outerScene) toggleSceneDebug(child.outerScene);
76
+ if (child.innerScene) toggleSceneDebug(child.innerScene);
77
+ });
78
+ }
79
+ }
80
+
81
+ // Toggle main scene and all nested scenes
82
+ if (game.mainScene) {
83
+ toggleSceneDebug(game.mainScene);
84
+ // Also toggle on demo objects that have scenes
85
+ game.mainScene.children.forEach(demo => {
86
+ if (demo.scene) toggleSceneDebug(demo.scene);
87
+ if (demo.outerScene) toggleSceneDebug(demo.outerScene);
88
+ if (demo.innerScene) toggleSceneDebug(demo.innerScene);
89
+ });
90
+ }
91
+ });
92
+ });
93
+ </script>
94
+ </body>
95
+
96
+ </html>
package/dist/schrodinger.html ADDED
@@ -0,0 +1,27 @@
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>Math & Physics - Schrodinger Wave</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">
14
+ <strong>Gaussian Wave Packet</strong> — Quantum wave function visualization.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>3D Helix</code> — Complex wave shown as spiral (Re + Im).</li>
17
+ <li><code>Envelope</code> — Gaussian bell curve (red) shows |Ψ|².</li>
18
+ <li><code>Projection</code> — Blue wave on grid shows Re(Ψ).</li>
19
+ <li><code>Drag</code> — Rotate the 3D view with mouse.</li>
20
+ <li><code>Double-click</code> — Reset view and animation.</li>
21
+ </span>
22
+ </div>
23
+ <canvas id="game"></canvas>
24
+ <script type="module" src="./js/schrodinger.js"></script>
25
+ </body>
26
+
27
+ </html>
package/dist/schwarzschild.html ADDED
@@ -0,0 +1,27 @@
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>Math & Physics - Schwarzschild Metric</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">
14
+ <strong>Schwarzschild Metric</strong> — General relativity with tensor math.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>Metric</code> — g<sub>μν</sub> tensor components shown live.</li>
17
+ <li><code>Geodesic</code> — Test particle follows curved spacetime.</li>
18
+ <li><code>Precession</code> — Orbit rotates (like Mercury).</li>
19
+ <li><code>Click</code> — Shuffle mass and orbital parameters.</li>
20
+ <li><code>Drag</code> — Rotate the 3D view.</li>
21
+ </span>
22
+ </div>
23
+ <canvas id="game"></canvas>
24
+ <script type="module" src="./js/schwarzschild.js"></script>
25
+ </body>
26
+
27
+ </html>
package/dist/shapes.html ADDED
@@ -0,0 +1,16 @@
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>Shapes Demo</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <canvas id="game"></canvas>
13
+ <script type="module" src="./js/shapes.js"></script>
14
+ </body>
15
+
16
+ </html>
package/dist/space.html ADDED
@@ -0,0 +1,85 @@
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>Space Invaders - GCanvas Demo</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ <style>
11
+ /* Fullscreen game layout */
12
+ html, body {
13
+ margin: 0;
14
+ padding: 0;
15
+ width: 100%;
16
+ height: 100%;
17
+ overflow: hidden;
18
+ background: #000011;
19
+ }
20
+ body {
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+ #info {
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ right: 0;
29
+ z-index: 10;
30
+ background: rgba(0, 0, 17, 0.85);
31
+ border-bottom: 1px solid #333;
32
+ }
33
+ canvas#game {
34
+ display: block;
35
+ width: 100%;
36
+ height: 100%;
37
+ }
38
+ </style>
39
+ </head>
40
+
41
+ <body>
42
+ <div id="info">
43
+ <strong>Space Invaders</strong> — A classic arcade game clone built with GCanvas.<br>
44
+ <strong>Controls:</strong> Arrow keys or A/D to move, Space to shoot.<br>
45
+ <strong>Objective:</strong> Destroy all aliens before they reach the bottom!
46
+ </div>
47
+ <canvas id="game"></canvas>
48
+
49
+ <script type="module">
50
+ import { SpaceGame } from "./js/space/game.js";
51
+
52
+ let game = null;
53
+
54
+ function startGame() {
55
+ // Clean up any existing game instance (fixes HMR duplication bug)
56
+ if (game) {
57
+ game.stop();
58
+ game = null;
59
+ }
60
+
61
+ const canvas = document.getElementById("game");
62
+ game = new SpaceGame(canvas);
63
+ game.enablePauseOnBlur(true);
64
+ game.setFPS(60);
65
+ game.start();
66
+
67
+ // Store reference for HMR cleanup
68
+ window.__spaceGame = game;
69
+ }
70
+
71
+ // Clean up on HMR
72
+ if (import.meta.hot) {
73
+ import.meta.hot.dispose(() => {
74
+ if (window.__spaceGame) {
75
+ window.__spaceGame.stop();
76
+ window.__spaceGame = null;
77
+ }
78
+ });
79
+ }
80
+
81
+ window.addEventListener("load", startGame);
82
+ </script>
83
+ </body>
84
+
85
+ </html>
package/dist/spacetime.html ADDED
@@ -0,0 +1,27 @@
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>Math & Physics - Spacetime Curvature</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">
14
+ <strong>Spacetime Curvature</strong> — General relativity visualization.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>Grid</code> — Flat spacetime distorted by mass.</li>
17
+ <li><code>Well</code> — Gravitational potential creates curvature.</li>
18
+ <li><code>Click</code> — Shuffle to a new stellar body.</li>
19
+ <li><code>Drag</code> — Rotate the 3D view.</li>
20
+ <li><code>Double-click</code> — Reset view.</li>
21
+ </span>
22
+ </div>
23
+ <canvas id="game"></canvas>
24
+ <script type="module" src="./js/spacetime.js"></script>
25
+ </body>
26
+
27
+ </html>
package/dist/sphere3d.html ADDED
@@ -0,0 +1,24 @@
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>Sphere3D Showcase - GCanvas</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>Sphere3D Showcase</strong> — 3D sphere rendering modes<br/>
13
+ <span style="color:#CCC">
14
+ <li>Solid Color (Canvas 2D rendering)</li>
15
+ <li>Gas Giant (WebGL shader with bands)</li>
16
+ <li>Star (WebGL shader with glow)</li>
17
+ <li>Drag to rotate camera</li>
18
+ <li>Double-click to reset view</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module" src="./js/sphere3d.js"></script>
23
+ </body>
24
+ </html>
package/dist/sprite.html ADDED
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <title>Sprite Timeline Demo</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ </head>
9
+
10
+ <body>
11
+ <div id="info">
12
+ <strong>Sprite Demo</strong> - Demonstrates the Sprite class, a MovieClip-style GameObject with frame-by-frame timeline animation. Each Sprite contains a collection of Shapes as frames, with timeline controls including play(), pause(), stop(), goto(), gotoAndStop(), gotoAndPlay(), and rewind(). This showcases how to create frame-by-frame animations similar to Adobe Flash MovieClips within the gcanvas engine's abstractions.
13
+ </div>
14
+ <canvas id="game"></canvas>
15
+ <script type="module" src="./js/sprite.js"></script>
16
+ </body>
17
+
18
+ </html>