@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/svgtween.html ADDED
@@ -0,0 +1,29 @@
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>Bezier Rider</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>SVG Motion</strong> — Interactive path drawing with animation.<br/>
15
+ This demo uses <code>SVGShape</code> and <code>GameObject</code> to animate SVG vector paths with easing, motion effects, and a glowing trail.
16
+ </div>
17
+ <canvas id="game"></canvas>
18
+ <script type="module">
19
+ import { MyGame } from './js/svgtween.js';
20
+
21
+ window.addEventListener("load", () => {
22
+ const canvas = document.getElementById("game");
23
+ const game = new MyGame(canvas);
24
+ game.start();
25
+ });
26
+ </script>
27
+ </body>
28
+
29
+ </html>
package/dist/tde.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>Tidal Disruption Event</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>Tidal Disruption Event</strong> — A star torn apart by a black hole.<br />
15
+ <span style="color:#CCC">
16
+ <li><code>Tidal Forces</code> — Star stretches and deforms.</li>
17
+ <li><code>Spaghettification</code> — Matter streams into debris.</li>
18
+ <li><code>Accretion</code> — Debris spirals into the black hole.</li>
19
+ <li><code>Flare</code> — Luminous burst at peak accretion.</li>
20
+ <li><code>Drag</code> — Orbit the camera around.</li>
21
+ <li><code>Click</code> — Restart the event.</li>
22
+ </span>
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module" src="./js/tde/index.js"></script>
26
+ </body>
27
+
28
+ </html>
package/dist/tetris3d.html ADDED
@@ -0,0 +1,25 @@
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>3D Tetris - GCanvas Demo</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>3D Tetris</strong> — A 3D falling block puzzle game.<br/>
13
+ <span style="color:#CCC">
14
+ <li>WASD / Arrow Keys: Move piece</li>
15
+ <li>Q/E: Rotate piece</li>
16
+ <li>SPACE: Hard drop (instant)</li>
17
+ <li>Mouse drag: Rotate camera view</li>
18
+ <li>View Button: Cycle preset camera angles</li>
19
+ <li>ENTER: Start/Restart | ESC: Pause</li>
20
+ </span>
21
+ </div>
22
+ <canvas id="game"></canvas>
23
+ <script type="module" src="./js/tetris/index.js"></script>
24
+ </body>
25
+ </html>
package/dist/tiles.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>Tiles</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>Tile Layout</strong> - This demo shows how to use the tile layout system to create a grid of tiles.
15
+ </div>
16
+ <canvas id="game"></canvas>
17
+ <script type="module">
18
+ import { MyGame } from './js/tiles.js';
19
+
20
+ window.addEventListener("load", () => {
21
+ const canvas = document.getElementById("game");
22
+ const game = new MyGame(canvas);
23
+ game.start();
24
+ });
25
+ </script>
26
+ </body>
27
+
28
+ </html>
package/dist/transforms.html ADDED
@@ -0,0 +1,400 @@
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>Transform API 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>Transform API Demo</strong> — The <code>Transform</code> API provides a consistent, chainable interface for modifying shape properties.
39
+ Use <code>shape.transform.x(100).y(200).rotation(45).scale(0.8)</code> for fluent chaining,
40
+ <code>shape.transform.set({ x: 100, rotation: 45 })</code> for batch updates, or
41
+ <code>shape.transform.translateBy(10, 20)</code> for relative transforms.
42
+ Click to randomize colors.
43
+ </div>
44
+ <button id="debug-toggle">Toggle Debug</button>
45
+ <canvas id="game"></canvas>
46
+
47
+ <script type="module">
48
+ import {
49
+ Game,
50
+ Scene,
51
+ GameObject,
52
+ FPSCounter,
53
+ Rectangle,
54
+ Circle,
55
+ Star,
56
+ Triangle,
57
+ TextShape,
58
+ Group,
59
+ Transform,
60
+ Painter,
61
+ Easing
62
+ } from "/gcanvas.es.min.js";
63
+
64
+ // Track all shapes for debug toggle
65
+ const allShapes = [];
66
+
67
+ /**
68
+ * TransformDemo Game
69
+ * Showcases the new Transform API with animated shapes
70
+ */
71
+ class TransformDemoGame extends Game {
72
+ constructor(canvas) {
73
+ super(canvas);
74
+ this.enableFluidSize();
75
+ this.backgroundColor = "black";
76
+ }
77
+
78
+ onResize() {
79
+ if (this.scene) {
80
+ this.scene.width = this.width - 20;
81
+ this.scene.height = this.height - 20;
82
+ }
83
+ }
84
+
85
+ init() {
86
+ super.init();
87
+ // Main scene
88
+ this.scene = new Scene(this, {
89
+ width: this.width - 20,
90
+ height: this.height - 20,
91
+ debug: false,
92
+ anchor: "center"
93
+ });
94
+
95
+ this.pipeline.add(this.scene);
96
+
97
+ // Add demos
98
+ this.scene.add(new FluentAPIDemo(this));
99
+ this.scene.add(new GroupTransformDemo(this));
100
+ this.scene.add(new BatchUpdateDemo(this));
101
+ this.scene.add(new RelativeTransformDemo(this));
102
+
103
+ // FPS counter
104
+ this.pipeline.add(new FPSCounter(this, { anchor: "bottom-right" }));
105
+ }
106
+ }
107
+
108
+ /**
109
+ * Demo 1: Fluent API Chaining
110
+ * Shows basic chained transform calls
111
+ */
112
+ class FluentAPIDemo extends GameObject {
113
+ constructor(game) {
114
+ super(game);
115
+
116
+ // Create a rectangle using the new Transform API
117
+ this.rect = new Rectangle({
118
+ width: 80,
119
+ height: 60,
120
+ color: "#e94560",
121
+ stroke: "#fff",
122
+ lineWidth: 2,
123
+ debug: false,
124
+ debugColor: "#ff00ff"
125
+ });
126
+ allShapes.push(this.rect);
127
+
128
+ // Use fluent API to set initial position
129
+ this.rect.transform
130
+ .x(-200)
131
+ .y(-120);
132
+
133
+ // Label
134
+ this.label = new TextShape("Fluent API", {
135
+ x: -200,
136
+ y: -170,
137
+ font: "bold 14px monospace",
138
+ color: "#fff",
139
+ align: "center"
140
+ });
141
+
142
+ this.elapsed = 0;
143
+ }
144
+
145
+ update(dt) {
146
+ super.update(dt);
147
+ this.elapsed += dt;
148
+
149
+ // Animate using the transform API
150
+ this.rect.transform
151
+ .rotation(this.elapsed * 45)
152
+ .scaleX(0.8 + Math.sin(this.elapsed * 2) * 0.3)
153
+ .scaleY(0.8 + Math.cos(this.elapsed * 2) * 0.3);
154
+ }
155
+
156
+ draw() {
157
+ super.draw();
158
+ this.rect.render();
159
+ this.label.render();
160
+ }
161
+ }
162
+
163
+ /**
164
+ * Demo 2: Group Transform Operations
165
+ * Shows group-wide transform operations
166
+ */
167
+ class GroupTransformDemo extends GameObject {
168
+ constructor(game) {
169
+ super(game);
170
+
171
+ // Create a group with multiple shapes
172
+ this.group = new Group({ debug: false, debugColor: "#ff00ff" });
173
+ allShapes.push(this.group);
174
+
175
+ // Add shapes to group using transform API
176
+ for (let i = 0; i < 3; i++) {
177
+ const circle = new Circle(15 + i * 5, {
178
+ color: Painter.colors.randomColorHSL(),
179
+ stroke: "#fff",
180
+ lineWidth: 1,
181
+ debug: false,
182
+ debugColor: "#ff00ff"
183
+ });
184
+ allShapes.push(circle);
185
+ // Position using transform
186
+ circle.transform.position(i * 40 - 40, 0);
187
+ this.group.add(circle);
188
+ }
189
+
190
+ // Position the group
191
+ this.group.transform.position(0, -120);
192
+
193
+ // Label
194
+ this.label = new TextShape("Group Transforms", {
195
+ x: 0,
196
+ y: -170,
197
+ font: "bold 14px monospace",
198
+ color: "#fff",
199
+ align: "center"
200
+ });
201
+
202
+ this.elapsed = 0;
203
+ }
204
+
205
+ update(dt) {
206
+ super.update(dt);
207
+ this.elapsed += dt;
208
+
209
+ // Animate group transform
210
+ this.group.transform
211
+ .rotation(this.elapsed * 30)
212
+ .scale(0.9 + Math.sin(this.elapsed * 1.5) * 0.2);
213
+
214
+ // Animate individual children using forEachTransform
215
+ this.group.forEachTransform((t, child, i) => {
216
+ // Each child rotates at different speed
217
+ t.rotation(-this.elapsed * (60 + i * 30));
218
+ });
219
+ }
220
+
221
+ draw() {
222
+ super.draw();
223
+ this.group.render();
224
+ this.label.render();
225
+ }
226
+ }
227
+
228
+ /**
229
+ * Demo 3: Batch Updates
230
+ * Shows using set() for multiple properties at once
231
+ */
232
+ class BatchUpdateDemo extends GameObject {
233
+ constructor(game) {
234
+ super(game);
235
+
236
+ this.star = new Star(30, 5, 0.5, {
237
+ color: "#ffc107",
238
+ stroke: "#fff",
239
+ lineWidth: 2,
240
+ debug: false,
241
+ debugColor: "#ff00ff"
242
+ });
243
+ allShapes.push(this.star);
244
+
245
+ // Use batch set for initial state
246
+ this.star.transform.set({
247
+ x: 200,
248
+ y: -120,
249
+ rotation: 0,
250
+ scaleX: 1,
251
+ scaleY: 1
252
+ });
253
+
254
+ // Label
255
+ this.label = new TextShape("Batch set()", {
256
+ x: 200,
257
+ y: -170,
258
+ font: "bold 14px monospace",
259
+ color: "#fff",
260
+ align: "center"
261
+ });
262
+
263
+ this.elapsed = 0;
264
+ }
265
+
266
+ update(dt) {
267
+ super.update(dt);
268
+ this.elapsed += dt;
269
+
270
+ // Use batch update for animation
271
+ const pulse = Math.sin(this.elapsed * 3);
272
+ const wobble = Math.sin(this.elapsed * 5) * 5;
273
+
274
+ this.star.transform.set({
275
+ rotation: this.elapsed * 60,
276
+ scaleX: 1 + pulse * 0.3,
277
+ scaleY: 1 - pulse * 0.3
278
+ });
279
+
280
+ // Also translate using relative method
281
+ this.star.transform.x(200 + wobble);
282
+ }
283
+
284
+ draw() {
285
+ super.draw();
286
+ this.star.render();
287
+ this.label.render();
288
+ }
289
+ }
290
+
291
+ /**
292
+ * Demo 4: Animated Transforms
293
+ * Shows position, rotation, and scale animations
294
+ */
295
+ class RelativeTransformDemo extends GameObject {
296
+ constructor(game) {
297
+ super(game);
298
+
299
+ // Create shapes for demonstrating animated transforms
300
+ this.shapes = [];
301
+ const positions = [
302
+ { x: -200, y: 80 },
303
+ { x: 0, y: 80 },
304
+ { x: 200, y: 80 }
305
+ ];
306
+
307
+ const types = [
308
+ { name: "position", shape: new Rectangle({ width: 50, height: 50, color: "#00d9ff", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) },
309
+ { name: "rotation", shape: new Triangle(40, { color: "#ff6b6b", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) },
310
+ { name: "scale", shape: new Circle(25, { color: "#7bed9f", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) }
311
+ ];
312
+
313
+ types.forEach((type, i) => {
314
+ allShapes.push(type.shape);
315
+ type.shape.transform.position(positions[i].x, positions[i].y);
316
+ type.label = new TextShape(type.name + "()", {
317
+ x: positions[i].x,
318
+ y: 30,
319
+ font: "bold 14px monospace",
320
+ color: "#fff",
321
+ align: "center"
322
+ });
323
+ type.baseX = positions[i].x;
324
+ type.baseY = positions[i].y;
325
+ this.shapes.push(type);
326
+ });
327
+
328
+ this.elapsed = 0;
329
+ this.lastUpdate = 0;
330
+ }
331
+
332
+ update(dt) {
333
+ super.update(dt);
334
+ this.elapsed += dt;
335
+
336
+ // position demo - oscillate position
337
+ const tx = Math.sin(this.elapsed * 2) * 30;
338
+ const ty = Math.cos(this.elapsed * 3) * 15;
339
+ this.shapes[0].shape.transform.position(this.shapes[0].baseX + tx, this.shapes[0].baseY + ty);
340
+
341
+ // rotation demo - continuous rotation
342
+ this.shapes[1].shape.transform.rotation(this.elapsed * 90);
343
+
344
+ // scale demo - pulsing scale
345
+ const scale = 0.7 + Math.abs(Math.sin(this.elapsed * 2)) * 0.6;
346
+ this.shapes[2].shape.transform.scale(scale);
347
+ }
348
+
349
+ draw() {
350
+ super.draw();
351
+ this.shapes.forEach(s => {
352
+ s.shape.render();
353
+ s.label.render();
354
+ });
355
+ }
356
+ }
357
+
358
+ // Start the game
359
+ window.addEventListener("load", () => {
360
+ const canvas = document.getElementById("game");
361
+ const game = new TransformDemoGame(canvas);
362
+ game.start();
363
+
364
+ // Debug toggle button
365
+ let debugEnabled = false;
366
+ const debugBtn = document.getElementById("debug-toggle");
367
+
368
+ debugBtn.addEventListener("click", () => {
369
+ debugEnabled = !debugEnabled;
370
+ debugBtn.classList.toggle("active", debugEnabled);
371
+ debugBtn.textContent = debugEnabled ? "Debug: ON" : "Toggle Debug";
372
+
373
+ // Toggle debug on all shapes
374
+ allShapes.forEach(shape => {
375
+ shape._debug = debugEnabled;
376
+ });
377
+ });
378
+
379
+ // Randomize colors on click
380
+ canvas.addEventListener("click", () => {
381
+ game.scene.children.forEach(child => {
382
+ if (child.rect) child.rect.color = Painter.colors.randomColorHSL();
383
+ if (child.star) child.star.color = Painter.colors.randomColorHSL();
384
+ if (child.group) {
385
+ child.group.children.forEach(c => {
386
+ c.color = Painter.colors.randomColorHSL();
387
+ });
388
+ }
389
+ if (child.shapes) {
390
+ child.shapes.forEach(s => {
391
+ s.shape.color = Painter.colors.randomColorHSL();
392
+ });
393
+ }
394
+ });
395
+ });
396
+ });
397
+ </script>
398
+ </body>
399
+
400
+ </html>
package/dist/tween.html ADDED
@@ -0,0 +1,45 @@
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>Tween</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>Tween Demo</strong> - A box animated over time. The library features two motion-related classes:
15
+ <span style="color:#CCC">
16
+ <li><code>Tween</code> - Contains motion primitives, lerps and easing functions.</li>
17
+ <li><code>Tweenetik</code> - A shorcut class that leverates Tween to interpolate object properties over time</li>
18
+ <pre>
19
+ Tweenetik.to(
20
+ mySprite, // an object or sprite
21
+ { scaleX: scale, scaleY: scale}, // the properties & end-values
22
+ 2.0, // duration in seconds
23
+ Easing.easeOutBounce, // easing function
24
+ {
25
+ delay: 0.5, // optional 0.5s delay
26
+ onStart: () => console.log("Tween started!"),
27
+ onComplete: () => console.log("Tween done!"),
28
+ onUpdate: () => console.log("Updated frame"),
29
+ }
30
+ );</pre>
31
+ </span>
32
+ </div>
33
+ <canvas id="game"></canvas>
34
+ <script type="module">
35
+ import { MyGame } from './js/tweendemo.js';
36
+
37
+ window.addEventListener("load", () => {
38
+ const canvas = document.getElementById("game");
39
+ const game = new MyGame(canvas);
40
+ game.start();
41
+ });
42
+ </script>
43
+ </body>
44
+
45
+ </html>
package/dist/visibility.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>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>Visibility Toggle Demo</strong> - Shows how game objects can be dynamically shown or hidden.
15
+ <span style="color:#CCC">
16
+ <li><code>Transformable</code> — The base class providing the <code>visible</code> property.</li>
17
+ <li><code>Pipeline Integration</code> — The pipeline skips invisible objects during rendering.</li>
18
+ <li><code>Dynamic Toggling</code> — Click the button to toggle visibility of a random square.</li>
19
+ </span>
20
+ </div>
21
+ <canvas id="game"></canvas>
22
+ <script type="module">
23
+ import { MyGame } from './js/visibility.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guinetik/gcanvas",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "A batteries-included 2D canvas framework for games and generative art",
5
5
  "main": "dist/gcanvas.es.js",
6
6
  "types": "types/index.d.ts",