@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/fluent.html DELETED
@@ -1,647 +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>GCanvas Fluent API Documentation</title>
8
- <!-- Prism.js - base theme then override -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.css">
10
- <style>
11
- /* Terminal-style Prism overrides */
12
- code[class*="language-"],
13
- pre[class*="language-"] {
14
- color: #ccc;
15
- background: #0a0a0a;
16
- text-shadow: none;
17
- }
18
- pre[class*="language-"] {
19
- background: #0a0a0a;
20
- border: 1px solid #1a1a1a;
21
- }
22
- .token.comment,
23
- .token.prolog,
24
- .token.doctype,
25
- .token.cdata { color: #555; }
26
- .token.punctuation { color: #888; }
27
- .token.property,
28
- .token.tag,
29
- .token.constant,
30
- .token.symbol,
31
- .token.deleted { color: #0f0; }
32
- .token.boolean,
33
- .token.number { color: #0ff; }
34
- .token.selector,
35
- .token.attr-name,
36
- .token.string,
37
- .token.char,
38
- .token.builtin,
39
- .token.inserted { color: #7fff7f; }
40
- .token.operator,
41
- .token.entity,
42
- .token.url,
43
- .language-css .token.string,
44
- .style .token.string,
45
- .token.variable { color: #ccc; }
46
- .token.atrule,
47
- .token.attr-value,
48
- .token.function,
49
- .token.class-name { color: #0f0; }
50
- .token.keyword { color: #0f0; font-weight: bold; }
51
- .token.regex,
52
- .token.important { color: #fd8; }
53
- </style>
54
- <style>
55
- *, *::before, *::after {
56
- box-sizing: border-box;
57
- }
58
-
59
- html, body {
60
- overflow-x: hidden;
61
- }
62
-
63
- body {
64
- font-family: 'Courier New', 'Consolas', monospace;
65
- line-height: 1.6;
66
- color: #333;
67
- max-width: 1200px;
68
- margin: 0 auto;
69
- padding: 20px;
70
- background-color: #000;
71
- }
72
-
73
- header {
74
- margin-bottom: 40px;
75
- padding: 20px;
76
- border-bottom: 2px solid #0f0;
77
- }
78
-
79
- h1 {
80
- font-size: 2.5em;
81
- margin-bottom: 10px;
82
- color: #0f0;
83
- font-family: 'Courier New', monospace;
84
- }
85
-
86
- h2 {
87
- font-size: 1.8em;
88
- margin-top: 40px;
89
- margin-bottom: 20px;
90
- padding-bottom: 10px;
91
- border-bottom: 2px solid #0f0;
92
- color: #0f0;
93
- font-family: 'Courier New', monospace;
94
- }
95
-
96
- h3 {
97
- font-size: 1.4em;
98
- margin-top: 30px;
99
- color: #0f0;
100
- font-family: 'Courier New', monospace;
101
- }
102
-
103
- h4 {
104
- font-size: 1.2em;
105
- margin-top: 20px;
106
- color: #0f0;
107
- font-family: 'Courier New', monospace;
108
- }
109
-
110
- p {
111
- margin-bottom: 15px;
112
- color: #aaa;
113
- font-family: 'Courier New', monospace;
114
- }
115
-
116
- pre {
117
- background-color: #0a0a0a;
118
- color: #ccc;
119
- padding: 15px;
120
- border: 1px solid #1a1a1a;
121
- overflow-x: auto;
122
- margin: 15px 0;
123
- font-family: 'Courier New', monospace;
124
- max-width: 100%;
125
- }
126
-
127
- code {
128
- font-family: 'Courier New', monospace;
129
- background-color: #111;
130
- color: #0f0;
131
- padding: 2px 6px;
132
- border: none;
133
- }
134
-
135
- pre code {
136
- background-color: transparent;
137
- color: #ccc;
138
- padding: 0;
139
- border: none;
140
- }
141
-
142
- .pipeline-container {
143
- display: flex;
144
- flex-direction: column;
145
- align-items: center;
146
- margin: 30px 0;
147
- }
148
-
149
- .pipeline-steps {
150
- display: flex;
151
- flex-wrap: wrap;
152
- justify-content: center;
153
- gap: 10px;
154
- margin-bottom: 20px;
155
- }
156
-
157
- .pipeline-step {
158
- background-color: #000;
159
- color: #0f0;
160
- padding: 10px 20px;
161
- border: 1px solid #0f0;
162
- position: relative;
163
- font-family: 'Courier New', monospace;
164
- }
165
-
166
- .pipeline-step:not(:last-child):after {
167
- content: "→";
168
- position: absolute;
169
- right: -15px;
170
- top: 50%;
171
- transform: translateY(-50%);
172
- font-size: 20px;
173
- color: #0f0;
174
- }
175
-
176
- .feature-list {
177
- list-style-type: none;
178
- padding-left: 0;
179
- }
180
-
181
- .feature-list li {
182
- position: relative;
183
- padding-left: 30px;
184
- margin-bottom: 10px;
185
- color: #aaa;
186
- font-family: 'Courier New', monospace;
187
- }
188
-
189
- .feature-list li:before {
190
- content: "> ";
191
- color: #0f0;
192
- position: absolute;
193
- left: 0;
194
- top: 0;
195
- font-weight: bold;
196
- }
197
-
198
- .note {
199
- background-color: #0a1a0a;
200
- padding: 15px;
201
- border-left: 2px solid #0f0;
202
- margin: 20px 0;
203
- color: #7fff7f;
204
- }
205
-
206
- .example {
207
- background-color: #0a0a0a;
208
- border: 1px solid #1a1a1a;
209
- margin: 20px 0;
210
- }
211
-
212
- .example-title {
213
- font-weight: bold;
214
- color: #0f0;
215
- background-color: #050505;
216
- padding: 10px 15px;
217
- margin: 0;
218
- border-bottom: 1px solid #1a1a1a;
219
- font-family: 'Courier New', monospace;
220
- }
221
-
222
- .example-code {
223
- padding: 15px;
224
- margin: 0;
225
- border-radius: 0;
226
- }
227
-
228
- .canvas-demo {
229
- width: 100%;
230
- min-height: 270px;
231
- background-color: #050505;
232
- border-top: 1px solid #1a1a1a;
233
- position: relative;
234
- display: flex;
235
- align-items: center;
236
- justify-content: center;
237
- padding: 10px;
238
- overflow: hidden;
239
- }
240
-
241
- .canvas-demo canvas {
242
- display: block;
243
- border: 1px solid #1a1a1a;
244
- }
245
-
246
- .canvas-label {
247
- position: absolute;
248
- bottom: 10px;
249
- right: 10px;
250
- background-color: rgba(0, 0, 0, 0.7);
251
- color: #0f0;
252
- padding: 4px 8px;
253
- font-size: 12px;
254
- font-family: 'Courier New', monospace;
255
- }
256
-
257
- .comparison-grid {
258
- display: grid;
259
- grid-template-columns: 1fr 1fr;
260
- gap: 20px;
261
- margin: 20px 0;
262
- }
263
-
264
- .comparison-item {
265
- background-color: #0a0a0a;
266
- border: 1px solid #1a1a1a;
267
- padding: 15px;
268
- }
269
-
270
- .comparison-item h4 {
271
- margin-top: 0;
272
- border-bottom: 1px solid #1a1a1a;
273
- padding-bottom: 10px;
274
- }
275
-
276
- .entry-points {
277
- display: grid;
278
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
279
- gap: 20px;
280
- margin: 20px 0;
281
- }
282
-
283
- .entry-point-item {
284
- background-color: #0a0a0a;
285
- border: 1px solid #1a1a1a;
286
- border-radius: 0;
287
- padding: 15px;
288
- text-align: center;
289
- font-family: 'Courier New', monospace;
290
- }
291
-
292
- .entry-point-item h4 {
293
- margin-top: 0;
294
- }
295
-
296
- .entry-point-item h5 {
297
- color: #0f0;
298
- margin: 0 0 10px 0;
299
- font-family: 'Courier New', monospace;
300
- }
301
-
302
- .entry-point-item p {
303
- margin: 0;
304
- font-size: 0.9em;
305
- color: #999;
306
- font-family: 'Courier New', monospace;
307
- }
308
-
309
- @media (max-width: 768px) {
310
- .pipeline-steps {
311
- flex-direction: column;
312
- }
313
-
314
- .pipeline-step:not(:last-child):after {
315
- content: "↓";
316
- position: absolute;
317
- bottom: -20px;
318
- left: 50%;
319
- transform: translateX(-50%);
320
- right: auto;
321
- top: auto;
322
- }
323
-
324
- .comparison-grid {
325
- grid-template-columns: 1fr;
326
- }
327
- }
328
- </style>
329
- </head>
330
-
331
- <body>
332
- <header>
333
- <h1>GCanvas Fluent API</h1>
334
- <p>A declarative, chainable API for rapid game development and creative coding</p>
335
- </header>
336
-
337
- <section>
338
- <h2>Overview</h2>
339
- <p>
340
- The Fluent API provides a builder-pattern layer on top of GCanvas's object-oriented architecture.
341
- Instead of manually instantiating classes and wiring them together, you chain method calls to
342
- declaratively build your game structure.
343
- </p>
344
-
345
- <h3>Builder Chain</h3>
346
- <p>
347
- The fluent API uses a chain of builder classes that wrap the underlying GCanvas classes:
348
- </p>
349
-
350
- <div class="pipeline-container">
351
- <div class="pipeline-steps">
352
- <div class="pipeline-step">gcanvas()</div>
353
- <div class="pipeline-step">FluentGame</div>
354
- <div class="pipeline-step">FluentScene</div>
355
- <div class="pipeline-step">FluentGO</div>
356
- <div class="pipeline-step">Shapes</div>
357
- </div>
358
- </div>
359
-
360
- <h4>Key Features:</h4>
361
- <ul class="feature-list">
362
- <li>Chainable method calls for declarative game building</li>
363
- <li>Two entry points: <code>gcanvas()</code> for games, <code>sketch()</code> for creative coding</li>
364
- <li>Named refs system for easy object access</li>
365
- <li>Built-in motion presets (pulse, orbit, oscillate, etc.)</li>
366
- <li>Shared state management across scenes</li>
367
- </ul>
368
- </section>
369
-
370
- <section>
371
- <h2>Entry Points</h2>
372
- <p>
373
- The Fluent API provides two entry points, each designed for different use cases:
374
- </p>
375
-
376
- <div class="entry-points">
377
- <div class="entry-point-item">
378
- <h5>gcanvas(options)</h5>
379
- <p>Full game development API with scenes, GameObjects, events, and state management</p>
380
- </div>
381
- <div class="entry-point-item">
382
- <h5>sketch(w, h, bg)</h5>
383
- <p>Minimal API for quick creative coding, generative art, and prototypes</p>
384
- </div>
385
- </div>
386
- </section>
387
-
388
- <section>
389
- <h2>Hello World with gcanvas()</h2>
390
- <p>
391
- The simplest way to get started is to create a scene with a single shape.
392
- The <code>gcanvas()</code> function creates a canvas, initializes the game engine,
393
- and returns a fluent builder you can chain methods on.
394
- </p>
395
-
396
- <div class="example">
397
- <div class="example-title">Example: Basic circle with gcanvas()</div>
398
- <pre><code class="language-javascript">import { gcanvas } from 'gcanvas';
399
-
400
- gcanvas({ bg: '#1a1a2e' })
401
- .scene('game')
402
- .go({ x: 200, y: 125 })
403
- .circle({ radius: 40, fill: '#00ff88' })
404
- .start();</code></pre>
405
- <div class="canvas-demo">
406
- <canvas id="hello-canvas" width="400" height="250"></canvas>
407
- <div class="canvas-label">Hello World</div>
408
- </div>
409
- </div>
410
-
411
- <h4>What's happening:</h4>
412
- <ul class="feature-list">
413
- <li><code>gcanvas({ bg: '#1a1a2e' })</code> creates a canvas with dark background</li>
414
- <li><code>.scene('game')</code> creates a scene named "game"</li>
415
- <li><code>.go({ x: 200, y: 125 })</code> creates a GameObject at position (200, 125)</li>
416
- <li><code>.circle({ radius: 40, fill: '#00ff88' })</code> adds a green circle to the GO</li>
417
- <li><code>.start()</code> starts the game loop</li>
418
- </ul>
419
- </section>
420
-
421
- <section>
422
- <h2>The Builder Chain</h2>
423
- <p>
424
- Each method in the chain returns a builder object that provides relevant methods.
425
- Use <code>.end()</code> to navigate back up the chain, or call sibling methods directly.
426
- </p>
427
-
428
- <div class="example">
429
- <div class="example-title">Example: Multiple shapes in a scene</div>
430
- <pre><code class="language-javascript">import { gcanvas } from 'gcanvas';
431
-
432
- gcanvas({ bg: '#1a1a2e' })
433
- .scene('game')
434
- .go({ x: 80, y: 125 })
435
- .circle({ radius: 30, fill: '#ff6b6b' })
436
- .end() // Back to scene
437
- .go({ x: 200, y: 125 })
438
- .star({ points: 5, radius: 35, fill: '#ffd93d' })
439
- .end()
440
- .go({ x: 320, y: 125 })
441
- .rect({ width: 50, height: 50, fill: '#6bcb77' })
442
- .start();</code></pre>
443
- <div class="canvas-demo">
444
- <canvas id="chain-canvas" width="400" height="250"></canvas>
445
- <div class="canvas-label">Builder chain navigation</div>
446
- </div>
447
- </div>
448
-
449
- <h4>Navigation methods:</h4>
450
- <ul class="feature-list">
451
- <li><code>.end()</code> - Go back to parent context</li>
452
- <li><code>.scene(name)</code> - Switch to or create a scene</li>
453
- <li><code>.go(options)</code> - Create a sibling GameObject</li>
454
- </ul>
455
- </section>
456
-
457
- <section>
458
- <h2>Adding Shapes</h2>
459
- <p>
460
- The FluentGO builder provides shortcut methods for all GCanvas shapes.
461
- Each method accepts an options object for customization.
462
- </p>
463
-
464
- <div class="example">
465
- <div class="example-title">Example: Shape variety</div>
466
- <pre><code class="language-javascript">import { gcanvas } from 'gcanvas';
467
-
468
- gcanvas({ bg: '#111' })
469
- .scene('shapes')
470
- .go({ x: 40, y: 125 }).triangle({ size: 30, fill: '#ff6b6b' }).end()
471
- .go({ x: 105, y: 125 }).hexagon({ radius: 18, fill: '#c44dff' }).end()
472
- .go({ x: 170, y: 125 }).diamond({ width: 28, height: 36, fill: '#4ecdc4' }).end()
473
- .go({ x: 235, y: 125 }).heart({ size: 26, fill: '#ff6b9d' }).end()
474
- .go({ x: 300, y: 125 }).cross({ size: 26, thickness: 6, fill: '#ffd93d' }).end()
475
- .go({ x: 365, y: 125 }).ring({ innerRadius: 10, outerRadius: 18, fill: '#a8e6cf' }).end()
476
- .go({ x: 430, y: 125 }).star({ points: 6, radius: 18, fill: '#ff8c42' }).end()
477
- .go({ x: 470, y: 125 }).cloud({ size: 22, fill: '#dfe6e9' })
478
- .start();</code></pre>
479
- <div class="canvas-demo">
480
- <canvas id="shapes-canvas" width="550" height="250"></canvas>
481
- <div class="canvas-label">Available shapes</div>
482
- </div>
483
- </div>
484
-
485
- <h4>Available shape methods:</h4>
486
- <ul class="feature-list">
487
- <li>Basic: <code>.circle()</code>, <code>.rect()</code>, <code>.square()</code>, <code>.triangle()</code>, <code>.line()</code></li>
488
- <li>Complex: <code>.star()</code>, <code>.hexagon()</code>, <code>.diamond()</code>, <code>.heart()</code>, <code>.ring()</code></li>
489
- <li>Decorative: <code>.arrow()</code>, <code>.cross()</code>, <code>.pin()</code>, <code>.cloud()</code></li>
490
- <li>Special: <code>.text()</code>, <code>.image()</code>, <code>.svg()</code></li>
491
- </ul>
492
- </section>
493
-
494
- <section>
495
- <h2>Motion & Animation</h2>
496
- <p>
497
- FluentGO provides built-in motion presets that animate GameObjects with a single method call.
498
- Each motion runs automatically in the game loop.
499
- </p>
500
-
501
- <div class="example">
502
- <div class="example-title">Example: Built-in motion presets</div>
503
- <pre><code class="language-javascript">import { gcanvas } from 'gcanvas';
504
-
505
- gcanvas({ bg: '#1a1a2e' })
506
- .scene('motion')
507
- // Pulsing circle
508
- .go({ x: 100, y: 125 })
509
- .circle({ radius: 30, fill: '#ff6b6b' })
510
- .pulse({ min: 0.7, max: 1.3, duration: 1 })
511
- .end()
512
- // Oscillating star
513
- .go({ x: 200, y: 125 })
514
- .star({ points: 5, radius: 25, fill: '#ffd93d' })
515
- .oscillate({ prop: 'y', min: -30, max: 30, duration: 2 })
516
- .end()
517
- // Orbiting shape
518
- .go({ x: 300, y: 125 })
519
- .hexagon({ radius: 20, fill: '#4ecdc4' })
520
- .orbit({ radiusX: 40, radiusY: 40, duration: 3 })
521
- .start();</code></pre>
522
- <div class="canvas-demo">
523
- <canvas id="motion-canvas" width="400" height="250"></canvas>
524
- <div class="canvas-label">Motion presets in action</div>
525
- </div>
526
- </div>
527
-
528
- <h4>Available motion methods:</h4>
529
- <ul class="feature-list">
530
- <li><code>.pulse()</code> - Scale up and down</li>
531
- <li><code>.oscillate()</code> - Move back and forth on an axis</li>
532
- <li><code>.orbit()</code> - Circular/elliptical orbit</li>
533
- <li><code>.float()</code> - Random wandering</li>
534
- <li><code>.shake()</code> - Shake effect with decay</li>
535
- <li><code>.bounce()</code> - Bouncing motion</li>
536
- <li><code>.spiral()</code> - Spiral outward/inward</li>
537
- <li><code>.pendulum()</code> - Swinging rotation</li>
538
- </ul>
539
- </section>
540
-
541
- <section>
542
- <h2>Sketch Mode</h2>
543
- <p>
544
- For quick creative coding experiments, <code>sketch()</code> provides an ultra-minimal API.
545
- It's perfect for generative art, Genuary sketches, or rapid prototyping.
546
- </p>
547
-
548
- <div class="example">
549
- <div class="example-title">Example: Radial pattern with sketch()</div>
550
- <pre><code class="language-javascript">import { sketch } from 'gcanvas';
551
-
552
- sketch(400, 250, '#1a1a2e')
553
- .radial(200, 125, 80, 12, (api, x, y, angle, i) =&gt; {
554
- api.circle(x, y, 15, `hsl(${i * 30}, 70%, 60%)`);
555
- })
556
- .update((dt, ctx) =&gt; {
557
- ctx.shapes.forEach((shape, i) =&gt; {
558
- shape.rotation += dt * (i % 2 === 0 ? 1 : -1);
559
- });
560
- })
561
- .start();</code></pre>
562
- <div class="canvas-demo">
563
- <canvas id="sketch-canvas" width="400" height="250"></canvas>
564
- <div class="canvas-label">Sketch mode radial pattern</div>
565
- </div>
566
- </div>
567
-
568
- <h4>Sketch mode features:</h4>
569
- <ul class="feature-list">
570
- <li>Direct shape creation: <code>.circle(x, y, r, fill)</code></li>
571
- <li>Bulk creation: <code>.grid()</code>, <code>.repeat()</code>, <code>.radial()</code></li>
572
- <li>Simple update loop with <code>.update(fn)</code></li>
573
- <li>Access to shapes array for animation</li>
574
- </ul>
575
- </section>
576
-
577
- <section>
578
- <h2>Events & Interactivity</h2>
579
- <p>
580
- Register event handlers with <code>.on()</code> to respond to user input and game events.
581
- Keyboard events can be filtered by key using the <code>keydown:key</code> syntax.
582
- </p>
583
-
584
- <div class="example">
585
- <div class="example-title">Example: Interactive scene</div>
586
- <pre><code class="language-javascript">import { gcanvas } from 'gcanvas';
587
-
588
- const game = gcanvas({ bg: '#111' });
589
-
590
- game.scene('interactive')
591
- .go({ x: 200, y: 100, name: 'clickTarget' })
592
- .circle({ radius: 40, fill: '#ff6b6b' })
593
- .on('click', (ctx) =&gt; {
594
- // ctx.go is the clicked GameObject
595
- ctx.go.scaleX = 1.2;
596
- ctx.go.scaleY = 1.2;
597
- setTimeout(() =&gt; {
598
- ctx.go.scaleX = 1;
599
- ctx.go.scaleY = 1;
600
- }, 100);
601
- })
602
- .end()
603
- .go({ x: 200, y: 200 })
604
- .text('Click the circle!', { fill: '#aaa' });
605
-
606
- game.start();</code></pre>
607
- <div class="canvas-demo">
608
- <canvas id="events-canvas" width="400" height="250"></canvas>
609
- <div class="canvas-label">Click the circle!</div>
610
- </div>
611
- </div>
612
-
613
- <h4>Event handling features:</h4>
614
- <ul class="feature-list">
615
- <li><code>.on('update', fn)</code> - Called every frame</li>
616
- <li><code>.on('click', fn)</code> - Mouse click events</li>
617
- <li><code>.on('keydown:space', fn)</code> - Filtered key events</li>
618
- <li><code>.state({})</code> - Shared state object</li>
619
- <li><code>ctx.refs</code> - Access named objects</li>
620
- </ul>
621
- </section>
622
-
623
- <section>
624
- <h2>Learn More</h2>
625
- <p>
626
- For complete API documentation, see the
627
- <a href="../docs/modules/fluent/README.md" style="color: #0f0;">Fluent Module Reference</a>.
628
- </p>
629
- <p>
630
- For a full game example using the Fluent API, check out the
631
- <a href="space.html" style="color: #0f0;">Space Invaders</a> demo.
632
- </p>
633
- <p>
634
- For all 30 easing functions with interactive visualizations, see the
635
- <a href="easing.html" style="color: #0f0;">Easing Functions</a> demo.
636
- </p>
637
- </section>
638
-
639
- <!-- Prism.js scripts -->
640
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
641
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
642
-
643
- <!-- Demo scripts -->
644
- <script type="module" src="./js/fluent.js"></script>
645
- </body>
646
-
647
- </html>
package/demos/fluid-simple.html DELETED
@@ -1,22 +0,0 @@
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>Fluid System Demo (Simplified)</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>FluidSystem Demo</strong> — Simplified fluid simulation.<br/>
13
- <span style="color:#CCC">
14
- <li>Click to push particles, hover to attract</li>
15
- <li>Switch between Liquid and Gas physics</li>
16
- </span>
17
- </div>
18
- <canvas id="game"></canvas>
19
- <script type="module" src="./js/fluid-simple.js"></script>
20
- </body>
21
- </html>
22
-
package/demos/fluid.html DELETED
@@ -1,37 +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>Fluid & Gas Playground</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>Fluid & Gas Playground</strong> — SPH-like liquid + lightweight gas using math-only helpers.<br />
15
- <span style="color:#9ef">
16
- <li>Move mouse to stir, hold click to push.</li>
17
- <li>Press 1 for Liquid, 2 for Gas, Space toggles.</li>
18
- <li>Gas mode: blue=cold (top), red=hot (bottom).</li>
19
- <li>Drag the browser window to shake the bottle!</li>
20
- </span>
21
- </div>
22
- <canvas id="game"></canvas>
23
-
24
- <script type="module">
25
- import { FluidGasGame } from "./js/fluid.js";
26
- window.addEventListener("load", () => {
27
- const canvas = document.getElementById("game");
28
- const game = new FluidGasGame(canvas);
29
- game.setFPS(60);
30
- game.start();
31
- });
32
- </script>
33
- </body>
34
-
35
- </html>
36
-
37
-