@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/genart.html ADDED
@@ -0,0 +1,26 @@
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>
package/demos/gendream.html ADDED
@@ -0,0 +1,26 @@
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 - Fractal Dreamscape</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>Fractal Plasma</strong> — Animated plasma with trippy color schemes.<br/>
15
+ <span style="color:#CCC">
16
+ <li><code>Plasma waves</code> — 6 overlapping sine waves create interference patterns.</li>
17
+ <li><code>Color schemes</code> — Electric, rainbow, historic, psychedelic, neon every 5s.</li>
18
+ <li><code>Color cycling</code> — Hue shifts continuously for animated effects.</li>
19
+ <li><code>512x512</code> — Moderate-res render scaled up for quality + performance.</li>
20
+ </span>
21
+ </div>
22
+ <canvas id="game"></canvas>
23
+ <script type="module" src="./js/gendream.js"></script>
24
+ </body>
25
+
26
+ </html>
package/demos/group.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>Groups</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="info" class="light">
14
+ <strong>Group Demo</strong> —
15
+ A <code>Group</code> is a specialized shape that can contain other shapes. It
16
+ inherits from <code>Shape</code>, which in turn extends our <code>Transformable</code> base.
17
+ This means a <code>Group</code> has the same properties as any shape—<em>x</em>,
18
+ <em>y</em>, <em>rotation</em>, <em>scaleX</em>, <em>scaleY</em>, <em>opacity</em>,
19
+ and <em>visible</em>—and applying transformations (rotation, scaling, etc.)
20
+ to the group will affect all child shapes as a single unit.<br><br>
21
+ This approach lets you manage and animate collections of shapes as a single entity,
22
+ similar to how grouping worked in Flash.
23
+ </div>
24
+ <canvas id="game"></canvas>
25
+ <script type="module">
26
+ import { MyGame } from './js/group.js';
27
+
28
+ window.addEventListener("load", () => {
29
+ const canvas = document.getElementById("game");
30
+ const game = new MyGame(canvas);
31
+ game.start();
32
+ });
33
+ </script>
34
+ </body>
35
+
36
+ </html>
package/demos/home.html ADDED
@@ -0,0 +1,587 @@
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
+
7
+ <!-- Primary Meta Tags -->
8
+ <title>GCanvas - 2D Canvas Rendering & Game Framework</title>
9
+ <meta name="title" content="GCanvas - 2D Canvas Rendering & Game Framework">
10
+ <meta name="description" content="A modular 2D canvas rendering and game framework for JavaScript. Build games, visualizations, and creative coding projects with a clean API, 40+ shapes, physics simulations, and more.">
11
+ <meta name="keywords" content="canvas, 2d, game framework, javascript, html5 canvas, game development, creative coding, particle system, animation, physics, 3d shapes, isometric">
12
+ <meta name="author" content="GCanvas">
13
+ <meta name="robots" content="index, follow">
14
+ <link rel="canonical" href="https://gcanvas.guinetik.com/#/home">
15
+
16
+ <!-- Open Graph / Facebook -->
17
+ <meta property="og:type" content="website">
18
+ <meta property="og:url" content="https://gcanvas.guinetik.com/#/home">
19
+ <meta property="og:title" content="GCanvas - 2D Canvas Rendering & Game Framework">
20
+ <meta property="og:description" content="A modular 2D canvas rendering and game framework for JavaScript. Build games, visualizations, and creative coding projects with a clean API, 40+ shapes, physics simulations, and more.">
21
+ <meta property="og:image" content="https://gcanvas.guinetik.com/og_image.png">
22
+ <meta property="og:image:width" content="1200">
23
+ <meta property="og:image:height" content="630">
24
+ <meta property="og:image:alt" content="GCanvas demo screenshot showing various shapes and visualizations">
25
+ <meta property="og:site_name" content="GCanvas">
26
+ <meta property="og:locale" content="en_US">
27
+
28
+ <!-- Twitter -->
29
+ <meta name="twitter:card" content="summary_large_image">
30
+ <meta name="twitter:url" content="https://gcanvas.guinetik.com/#/home">
31
+ <meta name="twitter:title" content="GCanvas - 2D Canvas Rendering & Game Framework">
32
+ <meta name="twitter:description" content="A modular 2D canvas rendering and game framework for JavaScript. Build games, visualizations, and creative coding projects with a clean API, 40+ shapes, physics simulations, and more.">
33
+ <meta name="twitter:image" content="https://gcanvas.guinetik.com/og_image.png">
34
+ <meta name="twitter:image:alt" content="GCanvas demo screenshot showing various shapes and visualizations">
35
+ <meta name="twitter:creator" content="@guinetik">
36
+
37
+ <!-- Favicon -->
38
+ <link rel="icon" type="image/svg+xml" href="./logo.svg">
39
+ <link rel="apple-touch-icon" href="./logo.svg">
40
+ <meta name="theme-color" content="#000000">
41
+
42
+ <!-- Structured Data (JSON-LD) -->
43
+ <script type="application/ld+json">
44
+ {
45
+ "@context": "https://schema.org",
46
+ "@type": "SoftwareApplication",
47
+ "name": "GCanvas",
48
+ "applicationCategory": "GameFramework",
49
+ "operatingSystem": "Web",
50
+ "offers": {
51
+ "@type": "Offer",
52
+ "price": "0",
53
+ "priceCurrency": "USD"
54
+ },
55
+ "description": "A modular 2D canvas rendering and game framework for JavaScript. Build games, visualizations, and creative coding projects with a clean API, 40+ shapes, physics simulations, and more.",
56
+ "url": "https://gcanvas.guinetik.com",
57
+ "author": {
58
+ "@type": "Organization",
59
+ "name": "GCanvas",
60
+ "url": "https://github.com/guinetik/gcanvas"
61
+ },
62
+ "codeRepository": "https://github.com/guinetik/gcanvas",
63
+ "programmingLanguage": "JavaScript",
64
+ "license": "https://github.com/guinetik/gcanvas/blob/main/LICENSE"
65
+ }
66
+ </script>
67
+
68
+ <!-- Prism.js for code highlighting -->
69
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.css">
70
+ <style>
71
+ /* Terminal-style Prism overrides */
72
+ code[class*="language-"],
73
+ pre[class*="language-"] {
74
+ color: #ccc;
75
+ background: #0a0a0a;
76
+ text-shadow: none;
77
+ }
78
+ pre[class*="language-"] {
79
+ background: #0a0a0a;
80
+ border: 1px solid #1a1a1a;
81
+ }
82
+ .token.comment,
83
+ .token.prolog,
84
+ .token.doctype,
85
+ .token.cdata { color: #555; }
86
+ .token.punctuation { color: #888; }
87
+ .token.property,
88
+ .token.tag,
89
+ .token.constant,
90
+ .token.symbol,
91
+ .token.deleted { color: #0f0; }
92
+ .token.boolean,
93
+ .token.number { color: #0ff; }
94
+ .token.selector,
95
+ .token.attr-name,
96
+ .token.string,
97
+ .token.char,
98
+ .token.builtin,
99
+ .token.inserted { color: #7fff7f; }
100
+ .token.operator,
101
+ .token.entity,
102
+ .token.url,
103
+ .language-css .token.string,
104
+ .style .token.string,
105
+ .token.variable { color: #ccc; }
106
+ .token.atrule,
107
+ .token.attr-value,
108
+ .token.function,
109
+ .token.class-name { color: #0f0; }
110
+ .token.keyword { color: #0f0; font-weight: bold; }
111
+ .token.regex,
112
+ .token.important { color: #fd8; }
113
+ </style>
114
+ <style>
115
+ *, *::before, *::after {
116
+ box-sizing: border-box;
117
+ }
118
+
119
+ html, body {
120
+ overflow-x: hidden;
121
+ margin: 0;
122
+ padding: 0;
123
+ }
124
+
125
+ body {
126
+ font-family: 'Courier New', 'Consolas', monospace;
127
+ line-height: 1.6;
128
+ color: #ccc;
129
+ background-color: #000;
130
+ padding: 40px 20px;
131
+ }
132
+
133
+ .container {
134
+ max-width: 1200px;
135
+ margin: 0 auto;
136
+ }
137
+
138
+ header {
139
+ text-align: center;
140
+ margin-bottom: 60px;
141
+ padding-bottom: 40px;
142
+ border-bottom: 1px solid #1a1a1a;
143
+ }
144
+
145
+ h1 {
146
+ font-size: 3em;
147
+ margin-bottom: 10px;
148
+ color: #0f0;
149
+ font-family: 'Courier New', monospace;
150
+ letter-spacing: 4px;
151
+ }
152
+
153
+ .tagline {
154
+ font-size: 1.2em;
155
+ color: #888;
156
+ margin-bottom: 20px;
157
+ }
158
+
159
+ .github-link {
160
+ display: inline-block;
161
+ color: #0f0;
162
+ text-decoration: none;
163
+ border: 1px solid #0f0;
164
+ padding: 8px 16px;
165
+ transition: all 0.2s;
166
+ }
167
+
168
+ .github-link:hover {
169
+ background-color: #0f0;
170
+ color: #000;
171
+ }
172
+
173
+ h2 {
174
+ font-size: 2em;
175
+ margin-top: 60px;
176
+ margin-bottom: 20px;
177
+ padding-bottom: 10px;
178
+ border-bottom: 1px solid #1a1a1a;
179
+ color: #0f0;
180
+ font-family: 'Courier New', monospace;
181
+ }
182
+
183
+ h3 {
184
+ font-size: 1.4em;
185
+ margin-top: 40px;
186
+ color: #0f0;
187
+ font-family: 'Courier New', monospace;
188
+ }
189
+
190
+ p {
191
+ margin-bottom: 20px;
192
+ color: #aaa;
193
+ font-family: 'Courier New', monospace;
194
+ }
195
+
196
+ pre {
197
+ background-color: #0a0a0a;
198
+ color: #ccc;
199
+ padding: 20px;
200
+ border: 1px solid #1a1a1a;
201
+ overflow-x: auto;
202
+ margin: 20px 0;
203
+ font-family: 'Courier New', monospace;
204
+ }
205
+
206
+ code {
207
+ font-family: 'Courier New', monospace;
208
+ background-color: #111;
209
+ color: #0f0;
210
+ padding: 2px 6px;
211
+ }
212
+
213
+ pre code {
214
+ background-color: transparent;
215
+ color: #ccc;
216
+ padding: 0;
217
+ }
218
+
219
+ .feature-grid {
220
+ display: grid;
221
+ grid-template-columns: repeat(3, 1fr);
222
+ gap: 20px;
223
+ margin: 30px 0;
224
+ }
225
+
226
+ .feature-card {
227
+ background-color: #0a0a0a;
228
+ border: 1px solid #1a1a1a;
229
+ padding: 20px;
230
+ transition: all 0.2s;
231
+ color: #aaa;
232
+ cursor: pointer;
233
+ text-decoration: none;
234
+ display: block;
235
+ }
236
+
237
+ .feature-card:hover {
238
+ border-color: #0f0;
239
+ background-color: #0f0;
240
+ }
241
+
242
+ .feature-card h4 {
243
+ color: #0f0;
244
+ margin-top: 0;
245
+ font-size: 1.2em;
246
+ transition: color 0.2s;
247
+ text-decoration: none;
248
+ }
249
+
250
+ .feature-card:hover h4 {
251
+ color: #fff;
252
+ }
253
+
254
+ .feature-card p {
255
+ color: #aaa;
256
+ transition: color 0.2s;
257
+ }
258
+
259
+ .feature-card:hover p {
260
+ color: #000;
261
+ }
262
+
263
+ .feature-card code {
264
+ background-color: #111;
265
+ color: #0f0;
266
+ transition: all 0.2s;
267
+ }
268
+
269
+ .feature-card:hover code {
270
+ background-color: #000;
271
+ color: #fff;
272
+ }
273
+
274
+ .demo-links {
275
+ display: grid;
276
+ grid-template-columns: repeat(3, 1fr);
277
+ gap: 15px;
278
+ margin: 30px 0;
279
+ }
280
+
281
+ .demo-link {
282
+ display: block;
283
+ background-color: #0a0a0a;
284
+ border: 1px solid #1a1a1a;
285
+ padding: 15px;
286
+ color: #ccc;
287
+ text-decoration: none;
288
+ transition: all 0.2s;
289
+ font-family: 'Courier New', monospace;
290
+ }
291
+
292
+ .demo-link:hover {
293
+ border-color: #0f0;
294
+ color: #0f0;
295
+ background-color: #0f0;
296
+ color: #000;
297
+ }
298
+
299
+ .demo-link strong {
300
+ display: block;
301
+ color: #0f0;
302
+ margin-bottom: 5px;
303
+ }
304
+
305
+ .demo-link:hover strong {
306
+ color: #000;
307
+ }
308
+
309
+ .highlight {
310
+ color: #0f0;
311
+ font-weight: bold;
312
+ }
313
+
314
+ .section {
315
+ margin-bottom: 60px;
316
+ }
317
+
318
+ @media (max-width: 768px) {
319
+ h1 {
320
+ font-size: 2em;
321
+ }
322
+
323
+ .feature-grid,
324
+ .demo-links {
325
+ grid-template-columns: 1fr;
326
+ }
327
+ }
328
+ </style>
329
+ </head>
330
+
331
+ <body>
332
+ <div class="container">
333
+ <header>
334
+ <h1>GCANVAS</h1>
335
+ <p class="tagline">A modular 2D canvas rendering and game framework</p>
336
+ <a href="https://github.com/guinetik/gcanvas" target="_blank" class="github-link">
337
+ View on GitHub →
338
+ </a>
339
+ </header>
340
+
341
+ <section class="section">
342
+ <h2>Quick Start</h2>
343
+ <p>
344
+ GCanvas provides a clean, object-oriented API for building canvas-based games and visualizations.
345
+ Get started in minutes with a simple example:
346
+ </p>
347
+
348
+ <pre><code class="language-javascript">import { Game, Rectangle, Circle } from '@guinetik/gcanvas';
349
+
350
+ const canvas = document.getElementById('my-canvas');
351
+ const game = new Game(canvas);
352
+ game.backgroundColor = '#000';
353
+ game.enableFluidSize();
354
+
355
+ game.init();
356
+
357
+ // Create shapes
358
+ const rect = new Rectangle({
359
+ x: 200,
360
+ y: 150,
361
+ width: 100,
362
+ height: 50,
363
+ color: '#1a1a1a',
364
+ stroke: '#0f0',
365
+ lineWidth: 1
366
+ });
367
+
368
+ const circle = new Circle(30, {
369
+ x: 300,
370
+ y: 150,
371
+ color: '#2a2a2a',
372
+ stroke: '#0f0',
373
+ lineWidth: 1
374
+ });
375
+
376
+ // Add to pipeline
377
+ game.pipeline.add(rect);
378
+ game.pipeline.add(circle);
379
+
380
+ game.start();</code></pre>
381
+ </section>
382
+
383
+ <section class="section">
384
+ <h2>Key Features</h2>
385
+ <div class="feature-grid">
386
+ <a href="shapes.html" target="demo-frame" class="feature-card">
387
+ <h4>🎨 Shape Library</h4>
388
+ <p>Rich collection of shapes: circles, rectangles, stars, polygons, 3D primitives, and more. All with consistent styling and transformation APIs.</p>
389
+ </a>
390
+
391
+ <a href="pipeline.html" target="demo-frame" class="feature-card">
392
+ <h4>🔄 Rendering Pipeline</h4>
393
+ <p>Layered architecture from basic positioning (Euclidian) to full rendering (Shape) with transformations, opacity, and shadows.</p>
394
+ </a>
395
+
396
+ <a href="fluent.html" target="demo-frame" class="feature-card">
397
+ <h4>⚡ Fluent API</h4>
398
+ <p>Chainable builder pattern for rapid prototyping. Create games declaratively with <code>gcanvas()</code> or creative sketches with <code>sketch()</code>.</p>
399
+ </a>
400
+
401
+ <a href="basic.html" target="demo-frame" class="feature-card">
402
+ <h4>🎮 Game Objects</h4>
403
+ <p>Full game loop with update/render cycles, event handling, collision detection, and scene management.</p>
404
+ </a>
405
+
406
+ <a href="animations.html" target="demo-frame" class="feature-card">
407
+ <h4>🎭 Motion & Animation</h4>
408
+ <p>Built-in motion presets (pulse, orbit, oscillate) plus powerful tweening system with 30+ easing functions.</p>
409
+ </a>
410
+
411
+ <a href="easing.html" target="demo-frame" class="feature-card">
412
+ <h4>📈 Easing Functions</h4>
413
+ <p>30+ easing functions for smooth animations. From linear to elastic, bounce to back - all with interactive visualizations.</p>
414
+ </a>
415
+
416
+ <a href="lavalamp.html" target="demo-frame" class="feature-card">
417
+ <h4>🔥 Heat Dynamics</h4>
418
+ <p>Particle-based heat physics: thermal zones, buoyancy forces, and heat transfer. Perfect for fluid simulations and lava lamps.</p>
419
+ </a>
420
+
421
+ <a href="tde.html" target="demo-frame" class="feature-card">
422
+ <h4>🎲 3D & Physics</h4>
423
+ <p>3D shapes, particle systems, and physics simulations. Tidal disruption events, black holes, and advanced visualizations.</p>
424
+ </a>
425
+
426
+ <a href="layouts.html" target="demo-frame" class="feature-card">
427
+ <h4>📐 Layout Management</h4>
428
+ <p>Automatic layout systems for organizing game objects. Horizontal, vertical, and tile layouts with spacing and alignment.</p>
429
+ </a>
430
+ </div>
431
+ </section>
432
+
433
+ <section class="section">
434
+ <h2>Two Ways to Use</h2>
435
+
436
+ <h3>1. Object-Oriented API</h3>
437
+ <p>
438
+ Full control with classes and explicit game loop management. Perfect for complex games and applications.
439
+ </p>
440
+ <pre><code class="language-javascript">import { Game, Scene, GameObject } from '@guinetik/gcanvas';
441
+
442
+ class MyGame extends Game {
443
+ init() {
444
+ const scene = new Scene(this);
445
+ // Add your game objects
446
+ this.pipeline.add(scene);
447
+ }
448
+ }</code></pre>
449
+
450
+ <h3>2. Fluent API</h3>
451
+ <p>
452
+ Declarative, chainable API for rapid development. Great for prototypes, creative coding, and simple games.
453
+ </p>
454
+ <pre><code class="language-javascript">import { gcanvas } from '@guinetik/gcanvas';
455
+
456
+ gcanvas({ bg: '#000' })
457
+ .scene('game')
458
+ .go({ x: 200, y: 150 })
459
+ .circle({ radius: 30, fill: '#1a1a1a', stroke: '#0f0' })
460
+ .pulse({ min: 0.8, max: 1.2, duration: 1 })
461
+ .start();</code></pre>
462
+ </section>
463
+
464
+ <section class="section">
465
+ <h2>Explore the Demos</h2>
466
+ <p>
467
+ Check out these examples to see GCanvas in action. Each demo showcases different aspects of the framework.
468
+ </p>
469
+
470
+ <div class="demo-links">
471
+ <!-- Row 1: Canvas Abstractions -->
472
+ <a href="shapes.html" class="demo-link">
473
+ <strong>Shape Gallery</strong>
474
+ Browse all available shapes including 3D primitives
475
+ </a>
476
+
477
+ <a href="painter.html" class="demo-link">
478
+ <strong>Painter API</strong>
479
+ Low-level canvas drawing abstraction
480
+ </a>
481
+
482
+ <a href="scene.html" class="demo-link">
483
+ <strong>Scene System</strong>
484
+ Layer and organize game objects with scenes
485
+ </a>
486
+
487
+ <!-- Row 2: Motion Elements -->
488
+ <a href="easing.html" class="demo-link">
489
+ <strong>Easing Functions</strong>
490
+ Interactive visualization of 30+ easing curves
491
+ </a>
492
+
493
+ <a href="animations.html" class="demo-link">
494
+ <strong>Animations</strong>
495
+ Motion presets and tweening
496
+ </a>
497
+
498
+ <a href="particles.html" class="demo-link">
499
+ <strong>Particle System</strong>
500
+ GameObject-based particle physics
501
+ </a>
502
+
503
+ <!-- Row 3: Physics and Math -->
504
+ <a href="spacetime.html" class="demo-link">
505
+ <strong>Spacetime Curvature</strong>
506
+ General relativity visualization
507
+ </a>
508
+
509
+ <a href="blackhole.html" class="demo-link">
510
+ <strong>Black Hole</strong>
511
+ Cinematic accretion disk with lensing
512
+ </a>
513
+
514
+ <a href="lavalamp.html" class="demo-link">
515
+ <strong>Lava Lamp</strong>
516
+ Heat dynamics and fluid simulation
517
+ </a>
518
+
519
+ <!-- Row 4: Games -->
520
+ <a href="space.html" class="demo-link">
521
+ <strong>Space Invaders</strong>
522
+ Classic arcade game clone
523
+ </a>
524
+
525
+ <a href="blob.html" class="demo-link">
526
+ <strong>Blob Feeder</strong>
527
+ Tamagotchi-style micro-game
528
+ </a>
529
+
530
+ <a href="penrose-game.html" class="demo-link">
531
+ <strong>Penrose Diagram</strong>
532
+ Navigate spacetime game
533
+ </a>
534
+ </div>
535
+ </section>
536
+
537
+ <section class="section">
538
+ <h2>Installation</h2>
539
+ <pre><code class="language-bash">npm install @guinetik/gcanvas</code></pre>
540
+
541
+ <h3>ES Modules</h3>
542
+ <pre><code class="language-javascript">import { Game, Circle, Rectangle } from '@guinetik/gcanvas';</code></pre>
543
+
544
+ <h3>CDN</h3>
545
+ <pre><code class="language-html">&lt;script type="module"&gt;
546
+ import { Game } from 'https://cdn.jsdelivr.net/npm/gcanvas/dist/gcanvas.es.min.js';
547
+ &lt;/script&gt;</code></pre>
548
+ </section>
549
+
550
+ <section class="section">
551
+ <h2>Documentation</h2>
552
+ <p>
553
+ For complete API documentation, visit the documentation pages in the navigation menu. Each demo includes
554
+ source code and explanations.
555
+ </p>
556
+ </section>
557
+ </div>
558
+
559
+ <!-- Prism.js scripts -->
560
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
561
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
562
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
563
+
564
+ <!-- Navigation script for iframe links -->
565
+ <script>
566
+ document.addEventListener('DOMContentLoaded', () => {
567
+ // Handle links that should navigate the parent window
568
+ const links = document.querySelectorAll('a[target="demo-frame"]');
569
+ links.forEach(link => {
570
+ link.addEventListener('click', (e) => {
571
+ e.preventDefault();
572
+ const href = link.getAttribute('href');
573
+ const routeName = href.replace('.html', '');
574
+
575
+ // Navigate parent window if in iframe, otherwise navigate normally
576
+ if (window.parent !== window) {
577
+ window.parent.location.hash = '/' + routeName;
578
+ } else {
579
+ window.location.hash = '/' + routeName;
580
+ }
581
+ });
582
+ });
583
+ });
584
+ </script>
585
+ </body>
586
+ </html>
587
+