@guinetik/gcanvas 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (349) hide show
  1. package/.github/workflows/release.yaml +70 -0
  2. package/.jshintrc +4 -0
  3. package/.vscode/settings.json +22 -0
  4. package/CLAUDE.md +310 -0
  5. package/blackhole.jpg +0 -0
  6. package/demo.png +0 -0
  7. package/demos/CNAME +1 -0
  8. package/demos/animations.html +31 -0
  9. package/demos/basic.html +38 -0
  10. package/demos/baskara.html +31 -0
  11. package/demos/bezier.html +35 -0
  12. package/demos/beziersignature.html +29 -0
  13. package/demos/blackhole.html +28 -0
  14. package/demos/blob.html +35 -0
  15. package/demos/demos.css +289 -0
  16. package/demos/easing.html +28 -0
  17. package/demos/events.html +195 -0
  18. package/demos/fluent.html +647 -0
  19. package/demos/fractals.html +36 -0
  20. package/demos/genart.html +26 -0
  21. package/demos/gendream.html +26 -0
  22. package/demos/group.html +36 -0
  23. package/demos/home.html +587 -0
  24. package/demos/index.html +364 -0
  25. package/demos/isometric.html +34 -0
  26. package/demos/js/animations.js +452 -0
  27. package/demos/js/basic.js +204 -0
  28. package/demos/js/baskara.js +751 -0
  29. package/demos/js/bezier.js +692 -0
  30. package/demos/js/beziersignature.js +241 -0
  31. package/demos/js/blackhole/accretiondisk.obj.js +379 -0
  32. package/demos/js/blackhole/blackhole.obj.js +318 -0
  33. package/demos/js/blackhole/index.js +409 -0
  34. package/demos/js/blackhole/particle.js +56 -0
  35. package/demos/js/blackhole/starfield.obj.js +218 -0
  36. package/demos/js/blob.js +2263 -0
  37. package/demos/js/easing.js +477 -0
  38. package/demos/js/fluent.js +183 -0
  39. package/demos/js/fractals.js +931 -0
  40. package/demos/js/fractalworker.js +93 -0
  41. package/demos/js/genart.js +268 -0
  42. package/demos/js/gendream.js +209 -0
  43. package/demos/js/group.js +140 -0
  44. package/demos/js/info-toggle.js +25 -0
  45. package/demos/js/isometric.js +863 -0
  46. package/demos/js/kerr.js +1556 -0
  47. package/demos/js/lavalamp.js +590 -0
  48. package/demos/js/layout.js +354 -0
  49. package/demos/js/mondrian.js +285 -0
  50. package/demos/js/opacity.js +275 -0
  51. package/demos/js/painter.js +484 -0
  52. package/demos/js/particles-showcase.js +514 -0
  53. package/demos/js/particles.js +299 -0
  54. package/demos/js/patterns.js +397 -0
  55. package/demos/js/penrose/artifact.js +69 -0
  56. package/demos/js/penrose/blackhole.js +121 -0
  57. package/demos/js/penrose/constants.js +73 -0
  58. package/demos/js/penrose/game.js +943 -0
  59. package/demos/js/penrose/lore.js +278 -0
  60. package/demos/js/penrose/penrosescene.js +892 -0
  61. package/demos/js/penrose/ship.js +216 -0
  62. package/demos/js/penrose/sounds.js +211 -0
  63. package/demos/js/penrose/voidparticle.js +55 -0
  64. package/demos/js/penrose/voidscene.js +258 -0
  65. package/demos/js/penrose/voidship.js +144 -0
  66. package/demos/js/penrose/wormhole.js +46 -0
  67. package/demos/js/pipeline.js +555 -0
  68. package/demos/js/scene.js +304 -0
  69. package/demos/js/scenes.js +320 -0
  70. package/demos/js/schrodinger.js +410 -0
  71. package/demos/js/schwarzschild.js +1023 -0
  72. package/demos/js/shapes.js +628 -0
  73. package/demos/js/space/alien.js +171 -0
  74. package/demos/js/space/boom.js +98 -0
  75. package/demos/js/space/boss.js +353 -0
  76. package/demos/js/space/buff.js +73 -0
  77. package/demos/js/space/bullet.js +102 -0
  78. package/demos/js/space/constants.js +85 -0
  79. package/demos/js/space/game.js +1884 -0
  80. package/demos/js/space/hud.js +112 -0
  81. package/demos/js/space/laserbeam.js +179 -0
  82. package/demos/js/space/lightning.js +277 -0
  83. package/demos/js/space/minion.js +192 -0
  84. package/demos/js/space/missile.js +212 -0
  85. package/demos/js/space/player.js +430 -0
  86. package/demos/js/space/powerup.js +90 -0
  87. package/demos/js/space/starfield.js +58 -0
  88. package/demos/js/space/starpower.js +90 -0
  89. package/demos/js/spacetime.js +559 -0
  90. package/demos/js/svgtween.js +204 -0
  91. package/demos/js/tde/accretiondisk.js +418 -0
  92. package/demos/js/tde/blackhole.js +219 -0
  93. package/demos/js/tde/blackholescene.js +209 -0
  94. package/demos/js/tde/config.js +59 -0
  95. package/demos/js/tde/index.js +695 -0
  96. package/demos/js/tde/jets.js +290 -0
  97. package/demos/js/tde/lensedstarfield.js +147 -0
  98. package/demos/js/tde/tdestar.js +317 -0
  99. package/demos/js/tde/tidalstream.js +356 -0
  100. package/demos/js/tde_old/blackhole.obj.js +354 -0
  101. package/demos/js/tde_old/debris.obj.js +791 -0
  102. package/demos/js/tde_old/flare.obj.js +239 -0
  103. package/demos/js/tde_old/index.js +448 -0
  104. package/demos/js/tde_old/star.obj.js +812 -0
  105. package/demos/js/tiles.js +312 -0
  106. package/demos/js/tweendemo.js +79 -0
  107. package/demos/js/visibility.js +102 -0
  108. package/demos/kerr.html +28 -0
  109. package/demos/lavalamp.html +27 -0
  110. package/demos/layouts.html +37 -0
  111. package/demos/logo.svg +4 -0
  112. package/demos/loop.html +84 -0
  113. package/demos/mondrian.html +32 -0
  114. package/demos/og_image.png +0 -0
  115. package/demos/opacity.html +36 -0
  116. package/demos/painter.html +39 -0
  117. package/demos/particles-showcase.html +28 -0
  118. package/demos/particles.html +24 -0
  119. package/demos/patterns.html +33 -0
  120. package/demos/penrose-game.html +31 -0
  121. package/demos/pipeline.html +737 -0
  122. package/demos/scene.html +33 -0
  123. package/demos/scenes.html +96 -0
  124. package/demos/schrodinger.html +27 -0
  125. package/demos/schwarzschild.html +27 -0
  126. package/demos/shapes.html +16 -0
  127. package/demos/space.html +85 -0
  128. package/demos/spacetime.html +27 -0
  129. package/demos/svgtween.html +29 -0
  130. package/demos/tde.html +28 -0
  131. package/demos/tiles.html +28 -0
  132. package/demos/transforms.html +400 -0
  133. package/demos/tween.html +45 -0
  134. package/demos/visibility.html +33 -0
  135. package/disk_example.png +0 -0
  136. package/docs/README.md +222 -0
  137. package/docs/concepts/architecture-overview.md +204 -0
  138. package/docs/concepts/lifecycle.md +255 -0
  139. package/docs/concepts/rendering-pipeline.md +279 -0
  140. package/docs/concepts/tde-zorder.md +106 -0
  141. package/docs/concepts/two-layer-architecture.md +229 -0
  142. package/docs/getting-started/first-game.md +354 -0
  143. package/docs/getting-started/hello-world.md +269 -0
  144. package/docs/getting-started/installation.md +157 -0
  145. package/docs/modules/collision/README.md +453 -0
  146. package/docs/modules/fluent/README.md +1075 -0
  147. package/docs/modules/game/README.md +303 -0
  148. package/docs/modules/isometric-camera.md +210 -0
  149. package/docs/modules/isometric.md +275 -0
  150. package/docs/modules/painter/README.md +328 -0
  151. package/docs/modules/particle/README.md +559 -0
  152. package/docs/modules/shapes/README.md +221 -0
  153. package/docs/modules/shapes/base/euclidian.md +123 -0
  154. package/docs/modules/shapes/base/geometry2d.md +204 -0
  155. package/docs/modules/shapes/base/renderable.md +215 -0
  156. package/docs/modules/shapes/base/shape.md +262 -0
  157. package/docs/modules/shapes/base/transformable.md +243 -0
  158. package/docs/modules/shapes/hierarchy.md +218 -0
  159. package/docs/modules/state/README.md +577 -0
  160. package/docs/modules/util/README.md +99 -0
  161. package/docs/modules/util/camera3d.md +412 -0
  162. package/docs/modules/util/scene3d.md +395 -0
  163. package/index.html +17 -0
  164. package/jsdoc.json +50 -0
  165. package/package.json +55 -0
  166. package/readme.md +599 -0
  167. package/scripts/build-demo.js +69 -0
  168. package/scripts/bundle4llm.js +276 -0
  169. package/scripts/clearconsole.js +48 -0
  170. package/src/collision/collision-system.js +332 -0
  171. package/src/collision/collision.js +303 -0
  172. package/src/collision/index.js +10 -0
  173. package/src/fluent/fluent-game.js +430 -0
  174. package/src/fluent/fluent-go.js +1060 -0
  175. package/src/fluent/fluent-layer.js +152 -0
  176. package/src/fluent/fluent-scene.js +291 -0
  177. package/src/fluent/index.js +98 -0
  178. package/src/fluent/sketch.js +380 -0
  179. package/src/game/game.js +467 -0
  180. package/src/game/index.js +49 -0
  181. package/src/game/objects/go.js +220 -0
  182. package/src/game/objects/imagego.js +30 -0
  183. package/src/game/objects/index.js +54 -0
  184. package/src/game/objects/isometric-scene.js +260 -0
  185. package/src/game/objects/layoutscene.js +549 -0
  186. package/src/game/objects/scene.js +175 -0
  187. package/src/game/objects/scene3d.js +118 -0
  188. package/src/game/objects/text.js +221 -0
  189. package/src/game/objects/wrapper.js +232 -0
  190. package/src/game/pipeline.js +243 -0
  191. package/src/game/ui/button.js +396 -0
  192. package/src/game/ui/cursor.js +93 -0
  193. package/src/game/ui/fps.js +91 -0
  194. package/src/game/ui/index.js +5 -0
  195. package/src/game/ui/togglebutton.js +93 -0
  196. package/src/game/ui/tooltip.js +249 -0
  197. package/src/index.js +25 -0
  198. package/src/io/events.js +20 -0
  199. package/src/io/index.js +86 -0
  200. package/src/io/input.js +70 -0
  201. package/src/io/keys.js +152 -0
  202. package/src/io/mouse.js +61 -0
  203. package/src/io/touch.js +39 -0
  204. package/src/logger/debugtab.js +138 -0
  205. package/src/logger/index.js +3 -0
  206. package/src/logger/loggable.js +47 -0
  207. package/src/logger/logger.js +113 -0
  208. package/src/math/complex.js +37 -0
  209. package/src/math/constants.js +1 -0
  210. package/src/math/fractal.js +1271 -0
  211. package/src/math/gr.js +201 -0
  212. package/src/math/heat.js +202 -0
  213. package/src/math/index.js +12 -0
  214. package/src/math/noise.js +433 -0
  215. package/src/math/orbital.js +191 -0
  216. package/src/math/patterns.js +1339 -0
  217. package/src/math/penrose.js +259 -0
  218. package/src/math/quantum.js +115 -0
  219. package/src/math/random.js +195 -0
  220. package/src/math/tensor.js +1009 -0
  221. package/src/mixins/anchor.js +131 -0
  222. package/src/mixins/draggable.js +72 -0
  223. package/src/mixins/index.js +2 -0
  224. package/src/motion/bezier.js +132 -0
  225. package/src/motion/bounce.js +58 -0
  226. package/src/motion/easing.js +349 -0
  227. package/src/motion/float.js +130 -0
  228. package/src/motion/follow.js +125 -0
  229. package/src/motion/hop.js +52 -0
  230. package/src/motion/index.js +82 -0
  231. package/src/motion/motion.js +1124 -0
  232. package/src/motion/orbit.js +49 -0
  233. package/src/motion/oscillate.js +39 -0
  234. package/src/motion/parabolic.js +141 -0
  235. package/src/motion/patrol.js +147 -0
  236. package/src/motion/pendulum.js +48 -0
  237. package/src/motion/pulse.js +88 -0
  238. package/src/motion/shake.js +83 -0
  239. package/src/motion/spiral.js +144 -0
  240. package/src/motion/spring.js +150 -0
  241. package/src/motion/swing.js +47 -0
  242. package/src/motion/tween.js +92 -0
  243. package/src/motion/tweenetik.js +139 -0
  244. package/src/motion/waypoint.js +210 -0
  245. package/src/painter/index.js +8 -0
  246. package/src/painter/painter.colors.js +331 -0
  247. package/src/painter/painter.effects.js +230 -0
  248. package/src/painter/painter.img.js +229 -0
  249. package/src/painter/painter.js +295 -0
  250. package/src/painter/painter.lines.js +189 -0
  251. package/src/painter/painter.opacity.js +41 -0
  252. package/src/painter/painter.shapes.js +277 -0
  253. package/src/painter/painter.text.js +273 -0
  254. package/src/particle/emitter.js +124 -0
  255. package/src/particle/index.js +11 -0
  256. package/src/particle/particle-system.js +322 -0
  257. package/src/particle/particle.js +71 -0
  258. package/src/particle/updaters.js +170 -0
  259. package/src/shapes/arc.js +43 -0
  260. package/src/shapes/arrow.js +33 -0
  261. package/src/shapes/bezier.js +42 -0
  262. package/src/shapes/circle.js +62 -0
  263. package/src/shapes/clouds.js +56 -0
  264. package/src/shapes/cone.js +219 -0
  265. package/src/shapes/cross.js +70 -0
  266. package/src/shapes/cube.js +244 -0
  267. package/src/shapes/cylinder.js +254 -0
  268. package/src/shapes/diamond.js +48 -0
  269. package/src/shapes/euclidian.js +111 -0
  270. package/src/shapes/figure.js +115 -0
  271. package/src/shapes/geometry.js +220 -0
  272. package/src/shapes/group.js +375 -0
  273. package/src/shapes/heart.js +42 -0
  274. package/src/shapes/hexagon.js +26 -0
  275. package/src/shapes/image.js +192 -0
  276. package/src/shapes/index.js +111 -0
  277. package/src/shapes/line.js +29 -0
  278. package/src/shapes/pattern.js +90 -0
  279. package/src/shapes/pin.js +44 -0
  280. package/src/shapes/poly.js +31 -0
  281. package/src/shapes/prism.js +226 -0
  282. package/src/shapes/rect.js +35 -0
  283. package/src/shapes/renderable.js +333 -0
  284. package/src/shapes/ring.js +26 -0
  285. package/src/shapes/roundrect.js +95 -0
  286. package/src/shapes/shape.js +117 -0
  287. package/src/shapes/slice.js +26 -0
  288. package/src/shapes/sphere.js +314 -0
  289. package/src/shapes/sphere3d.js +537 -0
  290. package/src/shapes/square.js +15 -0
  291. package/src/shapes/star.js +99 -0
  292. package/src/shapes/svg.js +408 -0
  293. package/src/shapes/text.js +553 -0
  294. package/src/shapes/traceable.js +83 -0
  295. package/src/shapes/transform.js +357 -0
  296. package/src/shapes/transformable.js +172 -0
  297. package/src/shapes/triangle.js +26 -0
  298. package/src/sound/index.js +17 -0
  299. package/src/sound/sound.js +473 -0
  300. package/src/sound/synth.analyzer.js +149 -0
  301. package/src/sound/synth.effects.js +207 -0
  302. package/src/sound/synth.envelope.js +59 -0
  303. package/src/sound/synth.js +229 -0
  304. package/src/sound/synth.musical.js +160 -0
  305. package/src/sound/synth.noise.js +85 -0
  306. package/src/sound/synth.oscillators.js +293 -0
  307. package/src/state/index.js +10 -0
  308. package/src/state/state-machine.js +371 -0
  309. package/src/util/camera3d.js +438 -0
  310. package/src/util/index.js +6 -0
  311. package/src/util/isometric-camera.js +235 -0
  312. package/src/util/layout.js +317 -0
  313. package/src/util/position.js +147 -0
  314. package/src/util/tasks.js +47 -0
  315. package/src/util/zindex.js +287 -0
  316. package/src/webgl/index.js +9 -0
  317. package/src/webgl/shaders/sphere-shaders.js +994 -0
  318. package/src/webgl/webgl-renderer.js +388 -0
  319. package/tde.png +0 -0
  320. package/test/math/orbital.test.js +61 -0
  321. package/test/math/tensor.test.js +114 -0
  322. package/test/particle/emitter.test.js +204 -0
  323. package/test/particle/particle-system.test.js +310 -0
  324. package/test/particle/particle.test.js +116 -0
  325. package/test/particle/updaters.test.js +386 -0
  326. package/test/setup.js +120 -0
  327. package/test/shapes/euclidian.test.js +44 -0
  328. package/test/shapes/geometry.test.js +86 -0
  329. package/test/shapes/group.test.js +86 -0
  330. package/test/shapes/rectangle.test.js +64 -0
  331. package/test/shapes/transform.test.js +379 -0
  332. package/test/util/camera3d.test.js +428 -0
  333. package/test/util/scene3d.test.js +352 -0
  334. package/types/collision.d.ts +249 -0
  335. package/types/common.d.ts +155 -0
  336. package/types/game.d.ts +497 -0
  337. package/types/index.d.ts +309 -0
  338. package/types/io.d.ts +188 -0
  339. package/types/logger.d.ts +127 -0
  340. package/types/math.d.ts +268 -0
  341. package/types/mixins.d.ts +92 -0
  342. package/types/motion.d.ts +678 -0
  343. package/types/painter.d.ts +378 -0
  344. package/types/shapes.d.ts +864 -0
  345. package/types/sound.d.ts +672 -0
  346. package/types/state.d.ts +251 -0
  347. package/types/util.d.ts +253 -0
  348. package/vite.config.js +50 -0
  349. package/vitest.config.js +13 -0
package/demos/fluent.html ADDED
@@ -0,0 +1,647 @@
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/fractals.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>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>