@guinetik/gcanvas 1.0.4 → 1.0.5

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 (193) hide show
  1. package/dist/CNAME +1 -0
  2. package/dist/animations.html +31 -0
  3. package/dist/basic.html +38 -0
  4. package/dist/baskara.html +31 -0
  5. package/dist/bezier.html +35 -0
  6. package/dist/beziersignature.html +29 -0
  7. package/dist/blackhole.html +28 -0
  8. package/dist/blob.html +35 -0
  9. package/dist/coordinates.html +698 -0
  10. package/dist/cube3d.html +23 -0
  11. package/dist/demos.css +303 -0
  12. package/dist/dino.html +42 -0
  13. package/dist/easing.html +28 -0
  14. package/dist/events.html +195 -0
  15. package/dist/fluent.html +647 -0
  16. package/dist/fluid-simple.html +22 -0
  17. package/dist/fluid.html +37 -0
  18. package/dist/fractals.html +36 -0
  19. package/dist/gameobjects.html +626 -0
  20. package/dist/gcanvas.es.js +517 -0
  21. package/dist/gcanvas.es.min.js +1 -1
  22. package/dist/gcanvas.umd.js +1 -1
  23. package/dist/gcanvas.umd.min.js +1 -1
  24. package/dist/genart.html +26 -0
  25. package/dist/gendream.html +26 -0
  26. package/dist/group.html +36 -0
  27. package/dist/home.html +587 -0
  28. package/dist/hyperbolic001.html +23 -0
  29. package/dist/hyperbolic002.html +23 -0
  30. package/dist/hyperbolic003.html +23 -0
  31. package/dist/hyperbolic004.html +23 -0
  32. package/dist/hyperbolic005.html +22 -0
  33. package/dist/index.html +398 -0
  34. package/dist/isometric.html +34 -0
  35. package/dist/js/animations.js +452 -0
  36. package/dist/js/basic.js +204 -0
  37. package/dist/js/baskara.js +751 -0
  38. package/dist/js/bezier.js +692 -0
  39. package/dist/js/beziersignature.js +241 -0
  40. package/dist/js/blackhole/accretiondisk.obj.js +379 -0
  41. package/dist/js/blackhole/blackhole.obj.js +318 -0
  42. package/dist/js/blackhole/index.js +409 -0
  43. package/dist/js/blackhole/particle.js +56 -0
  44. package/dist/js/blackhole/starfield.obj.js +218 -0
  45. package/dist/js/blob.js +2276 -0
  46. package/dist/js/coordinates.js +840 -0
  47. package/dist/js/cube3d.js +789 -0
  48. package/dist/js/dino.js +1420 -0
  49. package/dist/js/easing.js +477 -0
  50. package/dist/js/fluent.js +183 -0
  51. package/dist/js/fluid-simple.js +253 -0
  52. package/dist/js/fluid.js +527 -0
  53. package/dist/js/fractals.js +932 -0
  54. package/dist/js/fractalworker.js +93 -0
  55. package/dist/js/gameobjects.js +176 -0
  56. package/dist/js/genart.js +268 -0
  57. package/dist/js/gendream.js +209 -0
  58. package/dist/js/group.js +140 -0
  59. package/dist/js/hyperbolic001.js +310 -0
  60. package/dist/js/hyperbolic002.js +388 -0
  61. package/dist/js/hyperbolic003.js +319 -0
  62. package/dist/js/hyperbolic004.js +345 -0
  63. package/dist/js/hyperbolic005.js +340 -0
  64. package/dist/js/info-toggle.js +25 -0
  65. package/dist/js/isometric.js +863 -0
  66. package/dist/js/kerr.js +1547 -0
  67. package/dist/js/lavalamp.js +590 -0
  68. package/dist/js/layout.js +354 -0
  69. package/dist/js/mondrian.js +285 -0
  70. package/dist/js/opacity.js +275 -0
  71. package/dist/js/painter.js +484 -0
  72. package/dist/js/particles-showcase.js +514 -0
  73. package/dist/js/particles.js +299 -0
  74. package/dist/js/patterns.js +397 -0
  75. package/dist/js/penrose/artifact.js +69 -0
  76. package/dist/js/penrose/blackhole.js +121 -0
  77. package/dist/js/penrose/constants.js +73 -0
  78. package/dist/js/penrose/game.js +943 -0
  79. package/dist/js/penrose/lore.js +278 -0
  80. package/dist/js/penrose/penrosescene.js +892 -0
  81. package/dist/js/penrose/ship.js +216 -0
  82. package/dist/js/penrose/sounds.js +211 -0
  83. package/dist/js/penrose/voidparticle.js +55 -0
  84. package/dist/js/penrose/voidscene.js +258 -0
  85. package/dist/js/penrose/voidship.js +144 -0
  86. package/dist/js/penrose/wormhole.js +46 -0
  87. package/dist/js/pipeline.js +555 -0
  88. package/dist/js/plane3d.js +256 -0
  89. package/dist/js/platformer.js +1579 -0
  90. package/dist/js/scene.js +304 -0
  91. package/dist/js/scenes.js +320 -0
  92. package/dist/js/schrodinger.js +410 -0
  93. package/dist/js/schwarzschild.js +1015 -0
  94. package/dist/js/shapes.js +628 -0
  95. package/dist/js/space/alien.js +171 -0
  96. package/dist/js/space/boom.js +98 -0
  97. package/dist/js/space/boss.js +353 -0
  98. package/dist/js/space/buff.js +73 -0
  99. package/dist/js/space/bullet.js +102 -0
  100. package/dist/js/space/constants.js +85 -0
  101. package/dist/js/space/game.js +1884 -0
  102. package/dist/js/space/hud.js +112 -0
  103. package/dist/js/space/laserbeam.js +179 -0
  104. package/dist/js/space/lightning.js +277 -0
  105. package/dist/js/space/minion.js +192 -0
  106. package/dist/js/space/missile.js +212 -0
  107. package/dist/js/space/player.js +430 -0
  108. package/dist/js/space/powerup.js +90 -0
  109. package/dist/js/space/starfield.js +58 -0
  110. package/dist/js/space/starpower.js +90 -0
  111. package/dist/js/spacetime.js +559 -0
  112. package/dist/js/sphere3d.js +229 -0
  113. package/dist/js/sprite.js +473 -0
  114. package/dist/js/starfaux/config.js +118 -0
  115. package/dist/js/starfaux/enemy.js +353 -0
  116. package/dist/js/starfaux/hud.js +78 -0
  117. package/dist/js/starfaux/index.js +482 -0
  118. package/dist/js/starfaux/laser.js +182 -0
  119. package/dist/js/starfaux/player.js +468 -0
  120. package/dist/js/starfaux/terrain.js +560 -0
  121. package/dist/js/study001.js +275 -0
  122. package/dist/js/study002.js +366 -0
  123. package/dist/js/study003.js +331 -0
  124. package/dist/js/study004.js +389 -0
  125. package/dist/js/study005.js +209 -0
  126. package/dist/js/study006.js +194 -0
  127. package/dist/js/study007.js +192 -0
  128. package/dist/js/study008.js +413 -0
  129. package/dist/js/svgtween.js +204 -0
  130. package/dist/js/tde/accretiondisk.js +471 -0
  131. package/dist/js/tde/blackhole.js +219 -0
  132. package/dist/js/tde/blackholescene.js +209 -0
  133. package/dist/js/tde/config.js +59 -0
  134. package/dist/js/tde/index.js +820 -0
  135. package/dist/js/tde/jets.js +290 -0
  136. package/dist/js/tde/lensedstarfield.js +154 -0
  137. package/dist/js/tde/tdestar.js +297 -0
  138. package/dist/js/tde/tidalstream.js +372 -0
  139. package/dist/js/tde_old/blackhole.obj.js +354 -0
  140. package/dist/js/tde_old/debris.obj.js +791 -0
  141. package/dist/js/tde_old/flare.obj.js +239 -0
  142. package/dist/js/tde_old/index.js +448 -0
  143. package/dist/js/tde_old/star.obj.js +812 -0
  144. package/dist/js/tetris/config.js +157 -0
  145. package/dist/js/tetris/grid.js +286 -0
  146. package/dist/js/tetris/index.js +1195 -0
  147. package/dist/js/tetris/renderer.js +634 -0
  148. package/dist/js/tetris/tetrominos.js +280 -0
  149. package/dist/js/tiles.js +312 -0
  150. package/dist/js/tweendemo.js +79 -0
  151. package/dist/js/visibility.js +102 -0
  152. package/dist/kerr.html +28 -0
  153. package/dist/lavalamp.html +27 -0
  154. package/dist/layouts.html +37 -0
  155. package/dist/logo.svg +4 -0
  156. package/dist/loop.html +84 -0
  157. package/dist/mondrian.html +32 -0
  158. package/dist/og_image.png +0 -0
  159. package/dist/opacity.html +36 -0
  160. package/dist/painter.html +39 -0
  161. package/dist/particles-showcase.html +28 -0
  162. package/dist/particles.html +24 -0
  163. package/dist/patterns.html +33 -0
  164. package/dist/penrose-game.html +31 -0
  165. package/dist/pipeline.html +737 -0
  166. package/dist/plane3d.html +24 -0
  167. package/dist/platformer.html +43 -0
  168. package/dist/scene.html +33 -0
  169. package/dist/scenes.html +96 -0
  170. package/dist/schrodinger.html +27 -0
  171. package/dist/schwarzschild.html +27 -0
  172. package/dist/shapes.html +16 -0
  173. package/dist/space.html +85 -0
  174. package/dist/spacetime.html +27 -0
  175. package/dist/sphere3d.html +24 -0
  176. package/dist/sprite.html +18 -0
  177. package/dist/starfaux.html +22 -0
  178. package/dist/study001.html +23 -0
  179. package/dist/study002.html +23 -0
  180. package/dist/study003.html +23 -0
  181. package/dist/study004.html +23 -0
  182. package/dist/study005.html +22 -0
  183. package/dist/study006.html +24 -0
  184. package/dist/study007.html +24 -0
  185. package/dist/study008.html +22 -0
  186. package/dist/svgtween.html +29 -0
  187. package/dist/tde.html +28 -0
  188. package/dist/tetris3d.html +25 -0
  189. package/dist/tiles.html +28 -0
  190. package/dist/transforms.html +400 -0
  191. package/dist/tween.html +45 -0
  192. package/dist/visibility.html +33 -0
  193. package/package.json +1 -1
package/dist/js/visibility.js ADDED
@@ -0,0 +1,102 @@
1
+ import {
2
+ Game,
3
+ Scene,
4
+ HorizontalLayout,
5
+ Rectangle,
6
+ ShapeGOFactory,
7
+ Button,
8
+ FPSCounter,
9
+ Square,
10
+ Position,
11
+ } from "/gcanvas.es.min.js";
12
+
13
+ export class VisibilityDemo extends Scene {
14
+ constructor(game, options = {}) {
15
+ super(game, options);
16
+ this.MARGIN = 20;
17
+ // 1) A horizontal layout of squares at screen center
18
+ this.squaresLayout = new HorizontalLayout(game, {
19
+ spacing: 1,
20
+ padding: 4,
21
+ });
22
+ this.add(this.squaresLayout);
23
+ // Create a few colored squares and add them to the layout
24
+ const colors = ["#0f0", "#0f0", "#0f0"];
25
+ for (let i = 0; i < colors.length; i++) {
26
+ const rect = new Square(100, {
27
+ color: colors[i],
28
+ });
29
+ const squareGO = ShapeGOFactory.create(game, rect);
30
+ this.squaresLayout.add(squareGO);
31
+ }
32
+ // 2) A UI scene that holds the buttons
33
+ this.uiScene = new Scene(game, {
34
+ name: "UI Scene",
35
+ width: 120,
36
+ height: 40,
37
+ anchor: Position.BOTTOM_CENTER,
38
+ anchorMargin: 20,
39
+ });
40
+ this.uiScene.width = 150;
41
+ this.uiScene.height = 50;
42
+ this.add(this.uiScene);
43
+ // A button that toggles visibility of a random square
44
+ let currentSquare = null;
45
+ const pickOne = () => {
46
+ if (currentSquare) {
47
+ currentSquare.visible = !currentSquare.visible;
48
+ }
49
+ const index = Math.floor(
50
+ Math.random() * this.squaresLayout.children.length
51
+ );
52
+ const square = this.squaresLayout.children[index];
53
+ if (currentSquare == square) {
54
+ currentSquare = null;
55
+ return pickOne();
56
+ }
57
+ currentSquare = square;
58
+ currentSquare.visible = !currentSquare.visible;
59
+ };
60
+ const toggleBtn = new Button(game, {
61
+ text: "Toggle Random",
62
+ width: 120,
63
+ onClick: () => {
64
+ pickOne();
65
+ },
66
+ });
67
+ this.uiScene.add(toggleBtn);
68
+ }
69
+
70
+ update(dt) {
71
+ // Update scene dimensions based on margin
72
+ this.width = this.game.width - this.MARGIN * 2;
73
+ this.height = this.game.height - this.MARGIN * 2;
74
+ // Center the scene in the game
75
+ this.x = this.game.width / 2;
76
+ this.y = this.game.height / 2;
77
+ super.update(dt);
78
+ }
79
+ }
80
+
81
+ //
82
+ export class MyGame extends Game {
83
+ constructor(canvas) {
84
+ super(canvas);
85
+ this.backgroundColor = "black";
86
+ this.enableFluidSize();
87
+ }
88
+
89
+ init() {
90
+ super.init();
91
+ this.scene = new VisibilityDemo(this, {
92
+ width: this.width,
93
+ height: this.height,
94
+ });
95
+ this.pipeline.add(this.scene);
96
+ this.pipeline.add(
97
+ new FPSCounter(this, {
98
+ anchor: Position.BOTTOM_RIGHT,
99
+ })
100
+ );
101
+ }
102
+ }
package/dist/kerr.html ADDED
@@ -0,0 +1,28 @@
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 - Kerr Metric (Rotating Black Hole)</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>Kerr Metric</strong> — Rotating black hole with frame dragging.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>Spin</code> — Parameter a controls rotation (0 to M).</li>
17
+ <li><code>g_t&phi;</code> — Off-diagonal term = frame dragging!</li>
18
+ <li><code>Ergosphere</code> — Orange region where nothing stays still.</li>
19
+ <li><code>Two ISCOs</code> — Prograde vs retrograde orbits differ.</li>
20
+ <li><code>Click</code> — Shuffle mass and spin parameters.</li>
21
+ <li><code>Drag</code> — Rotate the 3D view.</li>
22
+ </span>
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module" src="./js/kerr.js"></script>
26
+ </body>
27
+
28
+ </html>
package/dist/lavalamp.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>Generative Art - Lava Lamp</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>Lava Lamp</strong> — Metaball lava lamp with heat dynamics.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>ON/OFF</code> — Toggle power. Watch the wax cool and rise!</li>
17
+ <li><code>Heat zones</code> — Smooth thermal transitions between hot/cold.</li>
18
+ <li><code>Buoyancy</code> — Hot blobs rise, cold blobs sink.</li>
19
+ <li><code>Heat transfer</code> — Nearby blobs exchange temperature.</li>
20
+ <li><code>Metaballs</code> — Blobs merge and split organically.</li>
21
+ </span>
22
+ </div>
23
+ <canvas id="game"></canvas>
24
+ <script type="module" src="./js/lavalamp.js"></script>
25
+ </body>
26
+
27
+ </html>
package/dist/layouts.html ADDED
@@ -0,0 +1,37 @@
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>Layout 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>Layout Demo</strong><br>
15
+ <span>Demonstrates dynamic switching between <code>HorizontalLayout</code> and
16
+ <code>VerticalLayout</code>.<br>
17
+ Use the right side buttons to switch layout direction.<br>
18
+ Use the bottom buttons to add or remove random rectangles from the layout group.<br>
19
+ Layout auto-sizes and aligns children with spacing and padding.
20
+ </span>
21
+ </div>
22
+ <canvas id="game"></canvas>
23
+
24
+ <script type="module">
25
+ import { LayoutDemo } from "./js/layout.js";
26
+ window.addEventListener("load", () => {
27
+ const canvas = document.getElementById("game");
28
+ const game = new LayoutDemo(canvas);
29
+ //game.setFPS(1)
30
+ //game.enableLogging(true);
31
+ game.start();
32
+ //setTimeout(game.stop.bind(game), 3000);
33
+ });
34
+ </script>
35
+ </body>
36
+
37
+ </html>
package/dist/logo.svg ADDED
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="32.9 174.743 71.888 63.576" width="71.888px" height="63.576px">
3
+ <path d="M 57.971 224.292 L 57.971 203.374 L 57.971 194.861 L 75.109 194.861 L 75.109 188.769 L 63.16 188.769 L 63.16 174.743 L 57.971 174.743 L 57.971 189.041 L 57.971 194.861 L 32.9 194.861 L 32.9 203.773 L 50.377 203.773 L 50.377 224.292 L 57.971 224.292 Z M 79.717 238.319 L 79.717 224.02 L 79.717 218.2 L 104.788 218.2 L 104.788 209.287 L 87.31 209.287 L 87.31 188.769 L 79.717 188.769 L 79.717 209.686 L 79.717 218.2 L 62.579 218.2 L 62.579 224.293 L 74.526 224.293 L 74.526 238.319 L 79.717 238.319 Z" style="fill: rgb(255, 255, 255); fill-rule: evenodd; stroke-width: 1;" id="path8" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/>
4
+ </svg>
package/dist/loop.html ADDED
@@ -0,0 +1,84 @@
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>Game Loop 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">
14
+ <strong>Game Loop Demo</strong> — Demonstrates the <code>update → render</code> cycle using a bouncing ball.
15
+ <br>
16
+ A <strong>Game</strong> runs the loop and delegates updates and rendering to its <strong>Pipeline</strong>. <br>
17
+ A <strong>GameObject</strong> implements <code>update(dt)</code> and <code>render()</code> to animate and draw
18
+ itself. <br>
19
+ This demo shows a ball that moves and bounces off canvas edges on each frame.
20
+ </div>
21
+
22
+ <canvas id="game"></canvas>
23
+
24
+ <script type="module">
25
+ import { Game, Scene, GameObject, FPSCounter, Painter, Circle } from "/gcanvas.es.min.js";
26
+ class BouncingBall extends GameObject {
27
+ constructor(game) {
28
+ super(game);
29
+ this.radius = 20;
30
+ this.circle = new Circle(this.radius, {
31
+ color: "#0f0",
32
+ debug: false
33
+ });
34
+ this.x = game.width / 2;
35
+ this.y = game.height / 2;
36
+ this.vx = 150;
37
+ this.vy = 100;
38
+ }
39
+
40
+ update(dt) {
41
+ this.x += this.vx * dt;
42
+ this.y += this.vy * dt;
43
+ const w = this.game.width;
44
+ const h = this.game.height;
45
+ if (this.x - this.radius < 0 || this.x + this.radius > w) this.vx *= -1;
46
+ if (this.y - this.radius < 0 || this.y + this.radius > h) this.vy *= -1;
47
+ // Clamp and update shape position
48
+ this.x = Math.max(this.radius, Math.min(w - this.radius, this.x));
49
+ this.y = Math.max(this.radius, Math.min(h - this.radius, this.y));
50
+ super.update(dt);
51
+ }
52
+
53
+ draw() {
54
+ super.draw();
55
+ this.circle.render();
56
+ }
57
+ }
58
+
59
+ class LoopGame extends Game {
60
+ constructor(canvas) {
61
+ super(canvas);
62
+ this.enableFluidSize();
63
+ this.backgroundColor = "black";
64
+ }
65
+
66
+ init() {
67
+ super.init();
68
+ this.pipeline.add(new BouncingBall(this));
69
+ this.pipeline.add(new FPSCounter(this, { anchor: "bottom-left" }));
70
+ }
71
+ }
72
+
73
+ window.addEventListener("load", () => {
74
+ const canvas = document.getElementById("game");
75
+ const game = new LoopGame(canvas);
76
+ //game.enableLogging();
77
+ game.enablePauseOnBlur(true);
78
+ game.setFPS(60);
79
+ game.start();
80
+ });
81
+ </script>
82
+ </body>
83
+
84
+ </html>
package/dist/mondrian.html ADDED
@@ -0,0 +1,32 @@
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>Basic Game Template</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>Mondrian</strong> — Demonstrates how scenes can be layouted and animated. <br>
15
+ </div>
16
+ <canvas id="game"></canvas>
17
+
18
+ <script type="module">
19
+ import { MondrianDemo } from "./js/mondrian.js";
20
+ window.addEventListener("load", () => {
21
+ const canvas = document.getElementById("game");
22
+ const game = new MondrianDemo(canvas);
23
+ //game.enableLogging();
24
+ //game.enablePauseOnBlur(true);
25
+ //game.setFPS(1);
26
+ game.start();
27
+ //setTimeout(game.stop.bind(game), 4000);
28
+ });
29
+ </script>
30
+ </body>
31
+
32
+ </html>
package/dist/og_image.png ADDED
Binary file
package/dist/opacity.html ADDED
@@ -0,0 +1,36 @@
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>Opacity</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>Scene Opacity Demo</strong> — Animating opacity on a container affects all children.
15
+ <span style="color:#CCC">
16
+ <li><code>Scene Opacity</code> — Setting <code>scene.opacity</code> multiplies the alpha of all children.</li>
17
+ <li><code>Motion.pulse</code> — Uses the Motion system to animate the scene's fade effect.</li>
18
+ <li><code>GameObject</code> — Custom <code>BouncingSquare</code> entities with their own individual opacity.</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module">
23
+ import { MyGame } from './js/opacity.js';
24
+
25
+ window.addEventListener("load", () => {
26
+ const canvas = document.getElementById("game");
27
+ const game = new MyGame(canvas);
28
+ //game.enableLogging();
29
+ //game.setFPS(60);
30
+ game.start();
31
+ //setTimeout(()=>game.stop(), 3000);
32
+ });
33
+ </script>
34
+ </body>
35
+
36
+ </html>
package/dist/painter.html ADDED
@@ -0,0 +1,39 @@
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>Paint Game Demo (No Shapes)</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+
14
+ <div id="info" style="visibility: hidden;">
15
+ <strong>Paint Game</strong> — Demonstrate the <code>Painter</code> class.<br>
16
+ A <code>Painter</code> is an abstraction of the Canvas' Drawing API.<br />
17
+ The goal is to produce shapes faster and with an streamlined API.<br />
18
+ The Painter API is used to creates the shape primitives but it can also be used to draw directly on the
19
+ canvas.<br />
20
+ 1) <strong>Line</strong>: first click sets start, second click sets end.<br>
21
+ 2) <strong>Pencil</strong>: hold mouse/touch and drag to draw.<br>
22
+ 3) <strong>Eraser</strong>: hold mouse/touch and drag to erase pixels.<br>
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module">
26
+ import { DemoGame } from "./js/painter.js";
27
+ // Boot it up
28
+ window.addEventListener("load", () => {
29
+ const canvas = document.getElementById("game");
30
+ const game = new DemoGame(canvas);
31
+ game.setFPS(60);
32
+ //game.enableLogging(true);
33
+ //setTimeout(game.stop.bind(game), 3000);
34
+ game.start();
35
+ });
36
+ </script>
37
+ </body>
38
+
39
+ </html>
package/dist/particles-showcase.html ADDED
@@ -0,0 +1,28 @@
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>Particle System Showcase</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>Particle System</strong> — High-performance particle engine showcase.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>Fountain</code> — Upward spray with gravity (circles).</li>
17
+ <li><code>Fire</code> — Rising flames with color gradient (squares).</li>
18
+ <li><code>Snow</code> — Gentle falling snowflakes (circles).</li>
19
+ <li><code>Click</code> — Burst confetti at its station (triangles).</li>
20
+ <li><code>Drag</code> — Orbit Camera3D around the scene.</li>
21
+ <li><code>Space</code> — Toggle emitters on/off.</li>
22
+ </span>
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module" src="./js/particles-showcase.js"></script>
26
+ </body>
27
+
28
+ </html>
package/dist/particles.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>Particles Demo</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>Particles Demo</strong> — A particle system built with <code>GameObject</code>.
14
+ <span style="color:#CCC">
15
+ <li><code>Particle extends GameObject</code> — Inherits transform & lifecycle methods.</li>
16
+ <li><code>Physics</code> — Custom <code>update(dt)</code> logic for velocity, friction, and boundary collision.</li>
17
+ <li><code>Interaction</code> — Mouse repulsion logic using vector math.</li>
18
+ <li><code>Shapes</code> — Randomly assigned primitives (Circle, Square, Triangle, Star).</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module" src="./js/particles.js"></script>
23
+ </body>
24
+ </html>
package/dist/patterns.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>Patterns</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>Image Patterns</strong> - Generating and using seamless textures.
15
+ <span style="color:#CCC">
16
+ <li><code>Patterns</code> — Utility class for generating seamless textures (Dots, Stripes, Noise, etc.).</li>
17
+ <li><code>PatternRectangle</code> — Shape that repeats a bitmap pattern.</li>
18
+ <li><code>Painter.img</code> — Helpers to convert raw pixels to ImageBitmaps.</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module">
23
+ import { MyGame } from './js/patterns.js';
24
+
25
+ window.addEventListener("load", () => {
26
+ const canvas = document.getElementById("game");
27
+ const game = new MyGame(canvas);
28
+ game.start();
29
+ });
30
+ </script>
31
+ </body>
32
+
33
+ </html>
package/dist/penrose-game.html ADDED
@@ -0,0 +1,31 @@
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>Penrose Diagram Game - Navigate Spacetime</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>Penrose Diagram</strong> — Navigate spacetime, avoid
14
+ singularities.<br />
15
+ <span style="color: #ccc">
16
+ <li><code>A/D or Arrows</code> — Steer through space.</li>
17
+ <li><code>W or SHIFT</code> — Boost (uses Kerr energy).</li>
18
+ <li>
19
+ <code>Ergosphere</code> — Harvest Kerr energy with light
20
+ cone.
21
+ </li>
22
+ <li><code>Black Holes</code> — Cross the horizon = death.</li>
23
+ <li><code>Wormhole</code> — Teleport to start, keep score!</li>
24
+ <li><code>Artifact</code> — Survive singularity! (after wormhole)</li>
25
+ <li><code>SPACE</code> — Start / Restart.</li>
26
+ </span>
27
+ </div>
28
+ <canvas id="game"></canvas>
29
+ <script type="module" src="./js/penrose/game.js"></script>
30
+ </body>
31
+ </html>