@guinetik/gcanvas 1.0.2 → 1.0.4

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 (217) hide show
  1. package/dist/gcanvas.es.js +25656 -0
  2. package/dist/gcanvas.es.min.js +1 -0
  3. package/dist/gcanvas.umd.js +1 -0
  4. package/dist/gcanvas.umd.min.js +1 -0
  5. package/package.json +23 -6
  6. package/src/game/objects/index.js +1 -0
  7. package/src/game/objects/spritesheet.js +260 -0
  8. package/src/game/ui/theme.js +6 -0
  9. package/src/io/keys.js +9 -1
  10. package/src/math/boolean.js +481 -0
  11. package/src/math/index.js +1 -0
  12. package/.github/workflows/release.yaml +0 -70
  13. package/.jshintrc +0 -4
  14. package/.vscode/settings.json +0 -22
  15. package/CLAUDE.md +0 -310
  16. package/blackhole.jpg +0 -0
  17. package/demo.png +0 -0
  18. package/demos/CNAME +0 -1
  19. package/demos/animations.html +0 -31
  20. package/demos/basic.html +0 -38
  21. package/demos/baskara.html +0 -31
  22. package/demos/bezier.html +0 -35
  23. package/demos/beziersignature.html +0 -29
  24. package/demos/blackhole.html +0 -28
  25. package/demos/blob.html +0 -35
  26. package/demos/coordinates.html +0 -698
  27. package/demos/cube3d.html +0 -23
  28. package/demos/demos.css +0 -303
  29. package/demos/dino.html +0 -42
  30. package/demos/easing.html +0 -28
  31. package/demos/events.html +0 -195
  32. package/demos/fluent.html +0 -647
  33. package/demos/fluid-simple.html +0 -22
  34. package/demos/fluid.html +0 -37
  35. package/demos/fractals.html +0 -36
  36. package/demos/gameobjects.html +0 -626
  37. package/demos/genart.html +0 -26
  38. package/demos/gendream.html +0 -26
  39. package/demos/group.html +0 -36
  40. package/demos/home.html +0 -587
  41. package/demos/index.html +0 -376
  42. package/demos/isometric.html +0 -34
  43. package/demos/js/animations.js +0 -452
  44. package/demos/js/basic.js +0 -204
  45. package/demos/js/baskara.js +0 -751
  46. package/demos/js/bezier.js +0 -692
  47. package/demos/js/beziersignature.js +0 -241
  48. package/demos/js/blackhole/accretiondisk.obj.js +0 -379
  49. package/demos/js/blackhole/blackhole.obj.js +0 -318
  50. package/demos/js/blackhole/index.js +0 -409
  51. package/demos/js/blackhole/particle.js +0 -56
  52. package/demos/js/blackhole/starfield.obj.js +0 -218
  53. package/demos/js/blob.js +0 -2276
  54. package/demos/js/coordinates.js +0 -840
  55. package/demos/js/cube3d.js +0 -789
  56. package/demos/js/dino.js +0 -1420
  57. package/demos/js/easing.js +0 -477
  58. package/demos/js/fluent.js +0 -183
  59. package/demos/js/fluid-simple.js +0 -253
  60. package/demos/js/fluid.js +0 -527
  61. package/demos/js/fractals.js +0 -931
  62. package/demos/js/fractalworker.js +0 -93
  63. package/demos/js/gameobjects.js +0 -176
  64. package/demos/js/genart.js +0 -268
  65. package/demos/js/gendream.js +0 -209
  66. package/demos/js/group.js +0 -140
  67. package/demos/js/info-toggle.js +0 -25
  68. package/demos/js/isometric.js +0 -863
  69. package/demos/js/kerr.js +0 -1556
  70. package/demos/js/lavalamp.js +0 -590
  71. package/demos/js/layout.js +0 -354
  72. package/demos/js/mondrian.js +0 -285
  73. package/demos/js/opacity.js +0 -275
  74. package/demos/js/painter.js +0 -484
  75. package/demos/js/particles-showcase.js +0 -514
  76. package/demos/js/particles.js +0 -299
  77. package/demos/js/patterns.js +0 -397
  78. package/demos/js/penrose/artifact.js +0 -69
  79. package/demos/js/penrose/blackhole.js +0 -121
  80. package/demos/js/penrose/constants.js +0 -73
  81. package/demos/js/penrose/game.js +0 -943
  82. package/demos/js/penrose/lore.js +0 -278
  83. package/demos/js/penrose/penrosescene.js +0 -892
  84. package/demos/js/penrose/ship.js +0 -216
  85. package/demos/js/penrose/sounds.js +0 -211
  86. package/demos/js/penrose/voidparticle.js +0 -55
  87. package/demos/js/penrose/voidscene.js +0 -258
  88. package/demos/js/penrose/voidship.js +0 -144
  89. package/demos/js/penrose/wormhole.js +0 -46
  90. package/demos/js/pipeline.js +0 -555
  91. package/demos/js/plane3d.js +0 -256
  92. package/demos/js/platformer.js +0 -1579
  93. package/demos/js/scene.js +0 -304
  94. package/demos/js/scenes.js +0 -320
  95. package/demos/js/schrodinger.js +0 -410
  96. package/demos/js/schwarzschild.js +0 -1023
  97. package/demos/js/shapes.js +0 -628
  98. package/demos/js/space/alien.js +0 -171
  99. package/demos/js/space/boom.js +0 -98
  100. package/demos/js/space/boss.js +0 -353
  101. package/demos/js/space/buff.js +0 -73
  102. package/demos/js/space/bullet.js +0 -102
  103. package/demos/js/space/constants.js +0 -85
  104. package/demos/js/space/game.js +0 -1884
  105. package/demos/js/space/hud.js +0 -112
  106. package/demos/js/space/laserbeam.js +0 -179
  107. package/demos/js/space/lightning.js +0 -277
  108. package/demos/js/space/minion.js +0 -192
  109. package/demos/js/space/missile.js +0 -212
  110. package/demos/js/space/player.js +0 -430
  111. package/demos/js/space/powerup.js +0 -90
  112. package/demos/js/space/starfield.js +0 -58
  113. package/demos/js/space/starpower.js +0 -90
  114. package/demos/js/spacetime.js +0 -559
  115. package/demos/js/sphere3d.js +0 -229
  116. package/demos/js/sprite.js +0 -473
  117. package/demos/js/svgtween.js +0 -204
  118. package/demos/js/tde/accretiondisk.js +0 -471
  119. package/demos/js/tde/blackhole.js +0 -219
  120. package/demos/js/tde/blackholescene.js +0 -209
  121. package/demos/js/tde/config.js +0 -59
  122. package/demos/js/tde/index.js +0 -820
  123. package/demos/js/tde/jets.js +0 -290
  124. package/demos/js/tde/lensedstarfield.js +0 -154
  125. package/demos/js/tde/tdestar.js +0 -297
  126. package/demos/js/tde/tidalstream.js +0 -372
  127. package/demos/js/tde_old/blackhole.obj.js +0 -354
  128. package/demos/js/tde_old/debris.obj.js +0 -791
  129. package/demos/js/tde_old/flare.obj.js +0 -239
  130. package/demos/js/tde_old/index.js +0 -448
  131. package/demos/js/tde_old/star.obj.js +0 -812
  132. package/demos/js/tiles.js +0 -312
  133. package/demos/js/tweendemo.js +0 -79
  134. package/demos/js/visibility.js +0 -102
  135. package/demos/kerr.html +0 -28
  136. package/demos/lavalamp.html +0 -27
  137. package/demos/layouts.html +0 -37
  138. package/demos/logo.svg +0 -4
  139. package/demos/loop.html +0 -84
  140. package/demos/mondrian.html +0 -32
  141. package/demos/og_image.png +0 -0
  142. package/demos/opacity.html +0 -36
  143. package/demos/painter.html +0 -39
  144. package/demos/particles-showcase.html +0 -28
  145. package/demos/particles.html +0 -24
  146. package/demos/patterns.html +0 -33
  147. package/demos/penrose-game.html +0 -31
  148. package/demos/pipeline.html +0 -737
  149. package/demos/plane3d.html +0 -24
  150. package/demos/platformer.html +0 -43
  151. package/demos/scene.html +0 -33
  152. package/demos/scenes.html +0 -96
  153. package/demos/schrodinger.html +0 -27
  154. package/demos/schwarzschild.html +0 -27
  155. package/demos/shapes.html +0 -16
  156. package/demos/space.html +0 -85
  157. package/demos/spacetime.html +0 -27
  158. package/demos/sphere3d.html +0 -24
  159. package/demos/sprite.html +0 -18
  160. package/demos/svgtween.html +0 -29
  161. package/demos/tde.html +0 -28
  162. package/demos/tiles.html +0 -28
  163. package/demos/transforms.html +0 -400
  164. package/demos/tween.html +0 -45
  165. package/demos/visibility.html +0 -33
  166. package/docs/README.md +0 -230
  167. package/docs/api/FluidSystem.md +0 -173
  168. package/docs/concepts/architecture-overview.md +0 -204
  169. package/docs/concepts/coordinate-system.md +0 -384
  170. package/docs/concepts/lifecycle.md +0 -255
  171. package/docs/concepts/rendering-pipeline.md +0 -279
  172. package/docs/concepts/shapes-vs-gameobjects.md +0 -187
  173. package/docs/concepts/tde-zorder.md +0 -106
  174. package/docs/concepts/two-layer-architecture.md +0 -229
  175. package/docs/fluid-dynamics.md +0 -99
  176. package/docs/getting-started/first-game.md +0 -354
  177. package/docs/getting-started/hello-world.md +0 -269
  178. package/docs/getting-started/installation.md +0 -175
  179. package/docs/modules/collision/README.md +0 -453
  180. package/docs/modules/fluent/README.md +0 -1075
  181. package/docs/modules/game/README.md +0 -303
  182. package/docs/modules/isometric-camera.md +0 -210
  183. package/docs/modules/isometric.md +0 -275
  184. package/docs/modules/painter/README.md +0 -328
  185. package/docs/modules/particle/README.md +0 -559
  186. package/docs/modules/shapes/README.md +0 -221
  187. package/docs/modules/shapes/base/euclidian.md +0 -123
  188. package/docs/modules/shapes/base/geometry2d.md +0 -204
  189. package/docs/modules/shapes/base/renderable.md +0 -215
  190. package/docs/modules/shapes/base/shape.md +0 -262
  191. package/docs/modules/shapes/base/transformable.md +0 -243
  192. package/docs/modules/shapes/hierarchy.md +0 -218
  193. package/docs/modules/state/README.md +0 -577
  194. package/docs/modules/util/README.md +0 -99
  195. package/docs/modules/util/camera3d.md +0 -412
  196. package/docs/modules/util/scene3d.md +0 -395
  197. package/index.html +0 -17
  198. package/jsdoc.json +0 -50
  199. package/scripts/build-demo.js +0 -69
  200. package/scripts/bundle4llm.js +0 -276
  201. package/scripts/clearconsole.js +0 -48
  202. package/test/math/orbital.test.js +0 -61
  203. package/test/math/tensor.test.js +0 -114
  204. package/test/particle/emitter.test.js +0 -204
  205. package/test/particle/particle-system.test.js +0 -310
  206. package/test/particle/particle.test.js +0 -116
  207. package/test/particle/updaters.test.js +0 -386
  208. package/test/setup.js +0 -120
  209. package/test/shapes/euclidian.test.js +0 -44
  210. package/test/shapes/geometry.test.js +0 -86
  211. package/test/shapes/group.test.js +0 -86
  212. package/test/shapes/rectangle.test.js +0 -64
  213. package/test/shapes/transform.test.js +0 -379
  214. package/test/util/camera3d.test.js +0 -428
  215. package/test/util/scene3d.test.js +0 -352
  216. package/vite.config.js +0 -50
  217. package/vitest.config.js +0 -13
package/demos/fractals.html DELETED
@@ -1,36 +0,0 @@
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>Fractals</strong> — This demo showcases multiple features of the engine.<br/>
15
- The engine contains a <code>Fractals</code> class that provides pure JavaScript implementations of many popular fractals. <br/>
16
- It features a custom <code>FractalRenderer</code> that inherits from <code>ImageGO</code>, the default way to display images in the engine.<br/>
17
- Then we use the <code>Painter.img</code> module to render bitmap based on the fractal data.<br/>
18
- Also featured is the <code>TaskManager</code> class; a simple implementation of a task queue that allows the main thread to send tasks to the worker thread and receive the results asynchronously.<br/>
19
- </div>
20
- <canvas id="game"></canvas>
21
-
22
- <script type="module">
23
- import { FractalDemo } from "./js/fractals.js";
24
- window.addEventListener("load", () => {
25
- const canvas = document.getElementById("game");
26
- const game = new FractalDemo(canvas);
27
- //game.enableLogging();
28
- game.enablePauseOnBlur(true);
29
- //game.setFPS(1);
30
- game.start();
31
- //setTimeout(game.stop.bind(game), 4000);
32
- });
33
- </script>
34
- </body>
35
-
36
- </html>
package/demos/gameobjects.html DELETED
@@ -1,626 +0,0 @@
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 vs GameObjects - GCanvas Guide</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.css">
9
- <style>
10
- /* Terminal-style Prism overrides */
11
- code[class*="language-"],
12
- pre[class*="language-"] {
13
- color: #ccc;
14
- background: #0a0a0a;
15
- text-shadow: none;
16
- }
17
- pre[class*="language-"] {
18
- background: #0a0a0a;
19
- border: 1px solid #1a1a1a;
20
- }
21
- .token.comment,
22
- .token.prolog,
23
- .token.doctype,
24
- .token.cdata { color: #555; }
25
- .token.punctuation { color: #888; }
26
- .token.property,
27
- .token.tag,
28
- .token.constant,
29
- .token.symbol,
30
- .token.deleted { color: #0f0; }
31
- .token.boolean,
32
- .token.number { color: #0ff; }
33
- .token.selector,
34
- .token.attr-name,
35
- .token.string,
36
- .token.char,
37
- .token.builtin,
38
- .token.inserted { color: #7fff7f; }
39
- .token.operator,
40
- .token.entity,
41
- .token.url,
42
- .language-css .token.string,
43
- .style .token.string,
44
- .token.variable { color: #ccc; }
45
- .token.atrule,
46
- .token.attr-value,
47
- .token.function,
48
- .token.class-name { color: #0f0; }
49
- .token.keyword { color: #0f0; font-weight: bold; }
50
- .token.regex,
51
- .token.important { color: #fd8; }
52
- </style>
53
- <style>
54
- *, *::before, *::after {
55
- box-sizing: border-box;
56
- }
57
-
58
- html, body {
59
- overflow-x: hidden;
60
- }
61
-
62
- body {
63
- font-family: 'Courier New', 'Consolas', monospace;
64
- line-height: 1.6;
65
- color: #aaa;
66
- max-width: 1000px;
67
- margin: 0 auto;
68
- padding: 20px;
69
- background-color: #000;
70
- }
71
-
72
- header {
73
- margin-bottom: 40px;
74
- padding: 20px;
75
- border-bottom: 2px solid #0f0;
76
- }
77
-
78
- h1 {
79
- font-size: 2.5em;
80
- margin-bottom: 10px;
81
- color: #0f0;
82
- }
83
-
84
- h2 {
85
- font-size: 1.8em;
86
- margin-top: 40px;
87
- margin-bottom: 20px;
88
- padding-bottom: 10px;
89
- border-bottom: 2px solid #0f0;
90
- color: #0f0;
91
- }
92
-
93
- h3 {
94
- font-size: 1.4em;
95
- margin-top: 30px;
96
- color: #0f0;
97
- }
98
-
99
- p {
100
- margin-bottom: 15px;
101
- color: #aaa;
102
- }
103
-
104
- pre {
105
- background-color: #0a0a0a;
106
- color: #ccc;
107
- padding: 15px;
108
- border: 1px solid #1a1a1a;
109
- overflow-x: auto;
110
- margin: 15px 0;
111
- max-width: 100%;
112
- }
113
-
114
- code {
115
- font-family: 'Courier New', monospace;
116
- background-color: #111;
117
- color: #0f0;
118
- padding: 2px 6px;
119
- border: none;
120
- }
121
-
122
- pre code {
123
- background-color: transparent;
124
- color: #ccc;
125
- padding: 0;
126
- border: none;
127
- }
128
-
129
- .comparison {
130
- display: grid;
131
- grid-template-columns: 1fr 1fr;
132
- gap: 20px;
133
- margin: 30px 0;
134
- }
135
-
136
- @media (max-width: 768px) {
137
- .comparison {
138
- grid-template-columns: 1fr;
139
- }
140
- }
141
-
142
- .comparison-box {
143
- background-color: #0a0a0a;
144
- border: 1px solid #0f0;
145
- padding: 20px;
146
- }
147
-
148
- .comparison-box h4 {
149
- color: #0f0;
150
- margin-top: 0;
151
- margin-bottom: 15px;
152
- font-size: 1.2em;
153
- border-bottom: 1px solid #1a1a1a;
154
- padding-bottom: 10px;
155
- }
156
-
157
- .comparison-box ul {
158
- list-style: none;
159
- padding: 0;
160
- margin: 0;
161
- }
162
-
163
- .comparison-box li {
164
- padding: 5px 0;
165
- padding-left: 20px;
166
- position: relative;
167
- }
168
-
169
- .comparison-box li:before {
170
- content: ">";
171
- color: #0f0;
172
- position: absolute;
173
- left: 0;
174
- }
175
-
176
- .pipeline-diagram {
177
- display: flex;
178
- flex-direction: column;
179
- gap: 10px;
180
- margin: 30px 0;
181
- padding: 20px;
182
- background-color: #0a0a0a;
183
- border: 1px solid #1a1a1a;
184
- }
185
-
186
- .pipeline-row {
187
- display: flex;
188
- align-items: center;
189
- gap: 10px;
190
- flex-wrap: wrap;
191
- }
192
-
193
- .pipeline-box {
194
- background-color: #000;
195
- border: 1px solid #0f0;
196
- color: #0f0;
197
- padding: 8px 16px;
198
- font-size: 0.9em;
199
- }
200
-
201
- .pipeline-arrow {
202
- color: #0f0;
203
- font-size: 1.2em;
204
- }
205
-
206
- .pipeline-label {
207
- color: #666;
208
- font-size: 0.85em;
209
- min-width: 120px;
210
- }
211
-
212
- .note {
213
- background-color: #0a1a0a;
214
- padding: 15px;
215
- border-left: 3px solid #0f0;
216
- margin: 20px 0;
217
- color: #7fff7f;
218
- }
219
-
220
- .warning {
221
- background-color: #1a1a0a;
222
- padding: 15px;
223
- border-left: 3px solid #ff0;
224
- margin: 20px 0;
225
- color: #ffa;
226
- }
227
-
228
- table {
229
- width: 100%;
230
- border-collapse: collapse;
231
- margin: 20px 0;
232
- }
233
-
234
- th, td {
235
- border: 1px solid #1a1a1a;
236
- padding: 12px;
237
- text-align: left;
238
- }
239
-
240
- th {
241
- background-color: #0a0a0a;
242
- color: #0f0;
243
- }
244
-
245
- td {
246
- background-color: #050505;
247
- }
248
-
249
- a {
250
- color: #0f0;
251
- }
252
-
253
- .back-link {
254
- display: inline-block;
255
- margin-bottom: 20px;
256
- color: #0f0;
257
- text-decoration: none;
258
- }
259
-
260
- .back-link:hover {
261
- text-decoration: underline;
262
- }
263
-
264
- .canvas-demo {
265
- width: 100%;
266
- height: 200px;
267
- background-color: #050505;
268
- border: 1px solid #1a1a1a;
269
- position: relative;
270
- overflow: hidden;
271
- margin: 15px 0;
272
- }
273
-
274
- .canvas-demo canvas {
275
- display: block;
276
- width: 100%;
277
- height: 100%;
278
- }
279
-
280
- .canvas-label {
281
- position: absolute;
282
- bottom: 10px;
283
- right: 10px;
284
- background-color: rgba(0, 0, 0, 0.8);
285
- color: #0f0;
286
- padding: 4px 8px;
287
- font-size: 12px;
288
- }
289
- </style>
290
- </head>
291
-
292
- <body>
293
- <a href="pipeline.html" class="back-link">&lt; Back to Rendering Pipeline</a>
294
-
295
- <header>
296
- <h1>Shapes vs GameObjects</h1>
297
- <p>Understanding when to use each abstraction in GCanvas</p>
298
- </header>
299
-
300
- <section>
301
- <h2>Two Sides of GCanvas</h2>
302
- <p>
303
- GCanvas serves two distinct use cases with different abstractions. Understanding when to use each is key to working effectively with the library.
304
- </p>
305
-
306
- <div class="comparison">
307
- <div class="comparison-box">
308
- <h4>Shapes (Drawing)</h4>
309
- <ul>
310
- <li>Direct canvas rendering</li>
311
- <li>No game loop required</li>
312
- <li>Call <code>render()</code> manually</li>
313
- <li>Stateless between frames</li>
314
- <li>Great for: generative art, static visuals, creative coding</li>
315
- </ul>
316
- </div>
317
- <div class="comparison-box">
318
- <h4>GameObjects (Pipeline)</h4>
319
- <ul>
320
- <li>Managed by Game pipeline</li>
321
- <li>Automatic update/render cycle</li>
322
- <li>Has <code>update(dt)</code> lifecycle</li>
323
- <li>Maintains state between frames</li>
324
- <li>Great for: games, animations, interactive apps</li>
325
- </ul>
326
- </div>
327
- </div>
328
- </section>
329
-
330
- <section>
331
- <h2>The Two Hierarchies</h2>
332
-
333
- <div class="pipeline-diagram">
334
- <div class="pipeline-row">
335
- <span class="pipeline-label">Shapes:</span>
336
- <div class="pipeline-box">Euclidian</div>
337
- <span class="pipeline-arrow">→</span>
338
- <div class="pipeline-box">Geometry2d</div>
339
- <span class="pipeline-arrow">→</span>
340
- <div class="pipeline-box">Renderable</div>
341
- <span class="pipeline-arrow">→</span>
342
- <div class="pipeline-box">Transformable</div>
343
- <span class="pipeline-arrow">→</span>
344
- <div class="pipeline-box">Shape</div>
345
- </div>
346
- <div class="pipeline-row">
347
- <span class="pipeline-label">GameObjects:</span>
348
- <div class="pipeline-box">GameObject</div>
349
- <span class="pipeline-arrow">→</span>
350
- <div class="pipeline-box">Scene</div>
351
- <span class="pipeline-arrow">/</span>
352
- <div class="pipeline-box">Sprite</div>
353
- <span class="pipeline-arrow">/</span>
354
- <div class="pipeline-box">Text</div>
355
- </div>
356
- <div class="pipeline-row">
357
- <span class="pipeline-label">Containers:</span>
358
- <div class="pipeline-box">Group</div>
359
- <span class="pipeline-arrow">→</span>
360
- <span style="color: #666;">holds Shapes</span>
361
- </div>
362
- <div class="pipeline-row">
363
- <span class="pipeline-label"></span>
364
- <div class="pipeline-box">Scene</div>
365
- <span class="pipeline-arrow">→</span>
366
- <span style="color: #666;">holds GameObjects</span>
367
- </div>
368
- </div>
369
- </section>
370
-
371
- <section>
372
- <h2>When to Use What</h2>
373
-
374
- <table>
375
- <thead>
376
- <tr>
377
- <th>Use Case</th>
378
- <th>Use This</th>
379
- <th>Why</th>
380
- </tr>
381
- </thead>
382
- <tbody>
383
- <tr>
384
- <td>Static visualization</td>
385
- <td><code>Shape</code> + <code>render()</code></td>
386
- <td>No update loop needed</td>
387
- </tr>
388
- <tr>
389
- <td>Generative art</td>
390
- <td><code>Shape</code>, <code>Group</code></td>
391
- <td>Direct control, no overhead</td>
392
- </tr>
393
- <tr>
394
- <td>Game character</td>
395
- <td><code>Sprite</code> (GameObject)</td>
396
- <td>Needs update cycle for animation</td>
397
- </tr>
398
- <tr>
399
- <td>UI elements</td>
400
- <td><code>Text</code>, <code>Scene</code></td>
401
- <td>Pipeline handles positioning</td>
402
- </tr>
403
- <tr>
404
- <td>Complex scene</td>
405
- <td><code>Scene</code> with children</td>
406
- <td>Hierarchical transforms, lifecycle</td>
407
- </tr>
408
- <tr>
409
- <td>Composite shape</td>
410
- <td><code>Group</code></td>
411
- <td>Transform multiple shapes together</td>
412
- </tr>
413
- </tbody>
414
- </table>
415
- </section>
416
-
417
- <section>
418
- <h2>Example: Shapes Only (No Game Loop)</h2>
419
- <p>
420
- You can use GCanvas purely for drawing without any game infrastructure:
421
- </p>
422
-
423
- <pre><code class="language-javascript">import { Circle, Rectangle, Group, Painter } from "gcanvas";
424
-
425
- // Get canvas context
426
- const canvas = document.getElementById("canvas");
427
- const ctx = canvas.getContext("2d");
428
- Painter.ctx = ctx;
429
-
430
- // Create shapes
431
- const circle = new Circle(50, { x: 100, y: 100, color: "#0f0" });
432
- const rect = new Rectangle({ x: 200, y: 100, width: 80, height: 60, color: "#0ff" });
433
-
434
- // Render directly - no game loop needed
435
- circle.render();
436
- rect.render();
437
-
438
- // Group multiple shapes
439
- const group = new Group({ x: 300, y: 100, rotation: Math.PI / 4 });
440
- group.add(new Circle(20, { color: "#f0f" }));
441
- group.add(new Rectangle({ y: 30, width: 40, height: 20, color: "#ff0" }));
442
- group.render();</code></pre>
443
-
444
- <div class="canvas-demo">
445
- <canvas id="shapes-canvas"></canvas>
446
- <div class="canvas-label">Shapes rendered directly</div>
447
- </div>
448
-
449
- <div class="note">
450
- This is perfect for one-off drawings, generative art, or when you want full control over the render loop.
451
- </div>
452
- </section>
453
-
454
- <section>
455
- <h2>Example: GameObjects with Pipeline</h2>
456
- <p>
457
- When you need animation, input handling, and managed lifecycles:
458
- </p>
459
-
460
- <pre><code class="language-javascript">import { Game, Scene, Sprite, Text, Circle, Keys } from "gcanvas";
461
-
462
- class MyGame extends Game {
463
- init() {
464
- super.init();
465
-
466
- // Create a scene (GameObject container)
467
- this.scene = new Scene(this, { anchor: "center" });
468
-
469
- // Create a sprite with animation (GameObject)
470
- this.player = new Sprite(this, { x: 0, y: 0, frameRate: 10 });
471
- this.player.addFrame(new Circle(20, { color: "#0f0" }));
472
- this.player.addFrame(new Circle(25, { color: "#0ff" }));
473
- this.player.play();
474
-
475
- // Add to scene
476
- this.scene.add(this.player);
477
-
478
- // Add scene to pipeline - now it's managed
479
- this.pipeline.add(this.scene);
480
-
481
- // Input handling
482
- this.events.on(Keys.SPACE, () => this.player.pause());
483
- }
484
-
485
- update(dt) {
486
- super.update(dt);
487
- // Player sprite automatically updates via pipeline
488
- }
489
- }</code></pre>
490
-
491
- <div class="canvas-demo">
492
- <canvas id="gameobjects-canvas"></canvas>
493
- <div class="canvas-label">Sprite animating via pipeline</div>
494
- </div>
495
-
496
- <div class="note">
497
- GameObjects get their <code>update(dt)</code> called automatically by the pipeline each frame.
498
- </div>
499
- </section>
500
-
501
- <section>
502
- <h2>Bridging: Shape to GameObject</h2>
503
- <p>
504
- Sometimes you have a Shape (or Group of shapes) that you want to add to the pipeline. Use <code>ShapeGOFactory</code>:
505
- </p>
506
-
507
- <pre><code class="language-javascript">import { Game, Group, Circle, Rectangle, ShapeGOFactory } from "gcanvas";
508
-
509
- class MyGame extends Game {
510
- init() {
511
- super.init();
512
-
513
- // Create a Group of shapes
514
- const avatar = new Group();
515
- avatar.add(new Circle(30, { color: "#0f0" })); // head
516
- avatar.add(new Rectangle({ y: 50, width: 40, height: 60, color: "#0f0" })); // body
517
-
518
- // Wrap it as a GameObject so it can join the pipeline
519
- const avatarGO = ShapeGOFactory.create(this, avatar, {
520
- x: 100,
521
- y: 100,
522
- interactive: true // enables click/hover events
523
- });
524
-
525
- // Now it's a proper GameObject
526
- this.pipeline.add(avatarGO);
527
- }
528
- }</code></pre>
529
-
530
- <div class="canvas-demo">
531
- <canvas id="bridging-canvas"></canvas>
532
- <div class="canvas-label">Shape Group wrapped as GameObject</div>
533
- </div>
534
-
535
- <div class="warning">
536
- <strong>Important:</strong> Never put GameObjects inside Groups. Group is a Shape container - it won't call <code>update()</code> on its children. Always use Scene for GameObjects.
537
- </div>
538
- </section>
539
-
540
- <section>
541
- <h2>Quick Reference</h2>
542
-
543
- <table>
544
- <thead>
545
- <tr>
546
- <th>Class</th>
547
- <th>Type</th>
548
- <th>Container</th>
549
- <th>Has update()?</th>
550
- </tr>
551
- </thead>
552
- <tbody>
553
- <tr>
554
- <td><code>Circle</code>, <code>Rectangle</code>, etc.</td>
555
- <td>Shape</td>
556
- <td>Group</td>
557
- <td>No</td>
558
- </tr>
559
- <tr>
560
- <td><code>Group</code></td>
561
- <td>Shape container</td>
562
- <td>Group</td>
563
- <td>No</td>
564
- </tr>
565
- <tr>
566
- <td><code>TextShape</code></td>
567
- <td>Shape</td>
568
- <td>Group</td>
569
- <td>No</td>
570
- </tr>
571
- <tr>
572
- <td><code>GameObject</code></td>
573
- <td>Base GO</td>
574
- <td>Scene / Pipeline</td>
575
- <td>Yes</td>
576
- </tr>
577
- <tr>
578
- <td><code>Scene</code></td>
579
- <td>GO container</td>
580
- <td>Scene / Pipeline</td>
581
- <td>Yes</td>
582
- </tr>
583
- <tr>
584
- <td><code>Sprite</code></td>
585
- <td>Animated GO</td>
586
- <td>Scene / Pipeline</td>
587
- <td>Yes</td>
588
- </tr>
589
- <tr>
590
- <td><code>Text</code></td>
591
- <td>Text GO</td>
592
- <td>Scene / Pipeline</td>
593
- <td>Yes</td>
594
- </tr>
595
- </tbody>
596
- </table>
597
- </section>
598
-
599
- <section>
600
- <h2>TL;DR</h2>
601
- <div class="comparison">
602
- <div class="comparison-box">
603
- <h4>Just Drawing?</h4>
604
- <ul>
605
- <li>Use <code>Shape</code>, <code>Group</code></li>
606
- <li>Call <code>.render()</code> yourself</li>
607
- <li>No Game class needed</li>
608
- </ul>
609
- </div>
610
- <div class="comparison-box">
611
- <h4>Building a Game?</h4>
612
- <ul>
613
- <li>Use <code>GameObject</code>, <code>Scene</code>, <code>Sprite</code></li>
614
- <li>Add to <code>pipeline</code></li>
615
- <li>Extend <code>Game</code> class</li>
616
- </ul>
617
- </div>
618
- </div>
619
- </section>
620
-
621
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
622
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
623
- <script type="module" src="./js/gameobjects.js"></script>
624
- </body>
625
-
626
- </html>
package/demos/genart.html DELETED
@@ -1,26 +0,0 @@
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 - Hypnotic Mandala</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>Hypnotic Mandala</strong> — Generative art using the <code>gcanvas</code> fluent API.<br/>
15
- <span style="color:#CCC">
16
- <li><strong>Drag to rotate</strong> — 3D rotation with inertia (double-click to reset)</li>
17
- <li><code>Radial patterns</code> — Shapes in concentric rings at different depths</li>
18
- <li><code>HSL color cycling</code> — Colors shift based on time and position</li>
19
- <li><code>Trail effect</code> — Semi-transparent clear creates motion blur</li>
20
- </span>
21
- </div>
22
- <canvas id="game"></canvas>
23
- <script type="module" src="./js/genart.js"></script>
24
- </body>
25
-
26
- </html>