@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/gendream.html DELETED
@@ -1,26 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Generative Art - 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 DELETED
@@ -1,36 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>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 DELETED
@@ -1,587 +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
-
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
-