@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/pipeline.html DELETED
@@ -1,737 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>GCanvas Rendering Pipeline 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
- height: 250px;
231
- background-color: #050505;
232
- border-top: 1px solid #1a1a1a;
233
- position: relative;
234
- overflow: hidden;
235
- }
236
-
237
- .canvas-demo canvas {
238
- display: block;
239
- width: 100%;
240
- height: 100%;
241
- border: 1px solid #1a1a1a;
242
- }
243
-
244
- .canvas-label {
245
- position: absolute;
246
- bottom: 10px;
247
- right: 10px;
248
- background-color: rgba(0, 0, 0, 0.8);
249
- color: #0f0;
250
- padding: 4px 8px;
251
- font-size: 12px;
252
- font-family: 'Courier New', monospace;
253
- }
254
-
255
- .shape-grid {
256
- display: grid;
257
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
258
- gap: 20px;
259
- margin: 20px 0;
260
- }
261
-
262
- .shape-item {
263
- background-color: #0a0a0a;
264
- border: 1px solid #1a1a1a;
265
- padding: 15px;
266
- text-align: center;
267
- font-family: 'Courier New', monospace;
268
- }
269
-
270
- .shape-item h4 {
271
- margin-top: 0;
272
- }
273
-
274
- .shape-item h5 {
275
- color: #0f0;
276
- margin: 0 0 10px 0;
277
- font-family: 'Courier New', monospace;
278
- }
279
-
280
- .shape-item p {
281
- margin: 0;
282
- font-size: 0.9em;
283
- color: #999;
284
- font-family: 'Courier New', monospace;
285
- }
286
-
287
- @media (max-width: 768px) {
288
- .pipeline-steps {
289
- flex-direction: column;
290
- }
291
-
292
- .pipeline-step:not(:last-child):after {
293
- content: "↓";
294
- position: absolute;
295
- bottom: -20px;
296
- left: 50%;
297
- transform: translateX(-50%);
298
- right: auto;
299
- top: auto;
300
- }
301
- }
302
- </style>
303
- </head>
304
-
305
- <body>
306
- <header>
307
- <h1>GCanvas Rendering Pipeline</h1>
308
- <p>A comprehensive guide to understanding the shape rendering architecture</p>
309
- </header>
310
-
311
- <section>
312
- <h2>Overview</h2>
313
- <p>
314
- GCanvas is a modular 2D rendering and game framework built on top of the HTML5 Canvas API. At its core, it uses a
315
- layered approach to rendering that provides a clean, declarative way to draw and manipulate shapes on the canvas.
316
- </p>
317
- <p>
318
- The rendering pipeline in GCanvas follows a hierarchical structure that builds from basic positioning to complex
319
- visual elements. This hierarchy provides a consistent interface and allows for sophisticated compositions and
320
- transformations.
321
- </p>
322
-
323
- <div class="pipeline-container">
324
- <div class="pipeline-steps">
325
- <div class="pipeline-step">Euclidian</div>
326
- <div class="pipeline-step">Geometry2d</div>
327
- <div class="pipeline-step">Renderable</div>
328
- <div class="pipeline-step">Transformable</div>
329
- <div class="pipeline-step">Shape</div>
330
- </div>
331
- </div>
332
- </section>
333
-
334
- <section>
335
- <h2>The Rendering Pipeline</h2>
336
- <p>
337
- The rendering pipeline consists of a chain of classes that inherit from each other, with each layer adding more
338
- functionality. Let's explore each layer in detail:
339
- </p>
340
-
341
- <h3 id="euclidian">1. Euclidian</h3>
342
- <p>
343
- The <code>Euclidian</code> class is the foundation of all visual elements in GCanvas. It provides the most basic
344
- properties needed for positioning and sizing objects.
345
- </p>
346
-
347
- <h4>Key Features:</h4>
348
- <ul class="feature-list">
349
- <li>Basic positioning (x, y coordinates)</li>
350
- <li>Basic dimensions (width, height)</li>
351
- <li>Debug rendering capabilities</li>
352
- <li>Property validation to prevent errors</li>
353
- </ul>
354
-
355
- <div class="example">
356
- <div class="example-title">Example: Creating a basic Euclidian object</div>
357
- <pre><code class="language-javascript">// Create a basic Euclidian object
358
- const basicShape = new Euclidian({
359
- x: 100,
360
- y: 100,
361
- width: 50,
362
- height: 30
363
- });
364
-
365
- // Position and size can be accessed and modified
366
- console.log(basicShape.x, basicShape.y); // 100, 100
367
- console.log(basicShape.width, basicShape.height); // 50, 30
368
-
369
- // The object validates properties to prevent errors
370
- basicShape.width = 80; // Valid
371
- // basicShape.width = "invalid"; // Error: Invalid property value: width invalid</code></pre>
372
- <div class="canvas-demo">
373
- <canvas id="euclidian-canvas"></canvas>
374
- <div class="canvas-label">Euclidian visualization</div>
375
- </div>
376
- </div>
377
-
378
- <h3 id="geometry2d">2. Geometry2d</h3>
379
- <p>
380
- The <code>Geometry2d</code> class extends <code>Euclidian</code> by adding spatial constraints and bounding box
381
- calculations. This allows for controlled positioning and more advanced spatial operations.
382
- </p>
383
-
384
- <h4>Key Features:</h4>
385
- <ul class="feature-list">
386
- <li>Bounds constraints (minX, maxX, minY, maxY)</li>
387
- <li>Bounds calculation and caching</li>
388
- <li>Local position calculation</li>
389
- <li>Crisp rendering option for pixel-perfect alignment</li>
390
- </ul>
391
-
392
- <div class="example">
393
- <div class="example-title">Example: Using Geometry2d with constraints</div>
394
- <pre><code class="language-javascript">// Create a Geometry2d object with constraints
395
- const constrainedShape = new Geometry2d({
396
- x: 100,
397
- y: 100,
398
- width: 50,
399
- height: 30,
400
- minX: 50,
401
- maxX: 150,
402
- minY: 50,
403
- maxY: 150,
404
- crisp: true // Ensures positions and dimensions are whole numbers
405
- });
406
-
407
- // Constraints are applied when updating
408
- constrainedShape.x = 40; // Will be constrained to minX (50)
409
- constrainedShape.update();
410
- console.log(constrainedShape.x); // 50
411
-
412
- // Get bounding box information
413
- const bounds = constrainedShape.getBounds();
414
- console.log(bounds); // { x: 50, y: 100, width: 50, height: 30 }
415
-
416
- // Get local (top-left) position relative to center
417
- const local = constrainedShape.getLocalPosition();
418
- console.log(local); // { x: 25, y: 85 }</code></pre>
419
- <div class="canvas-demo">
420
- <canvas id="geometry2d-canvas"></canvas>
421
- <div class="canvas-label">Geometry2d constraints</div>
422
- </div>
423
- </div>
424
-
425
- <h3 id="renderable">3. Renderable</h3>
426
- <p>
427
- The <code>Renderable</code> class extends <code>Geometry2d</code> by adding visual properties and rendering
428
- capabilities. It handles the visibility, opacity, and shadows of visual elements.
429
- </p>
430
-
431
- <h4>Key Features:</h4>
432
- <ul class="feature-list">
433
- <li>Visibility control</li>
434
- <li>Opacity management</li>
435
- <li>Shadow effects</li>
436
- <li>Activity state tracking</li>
437
- <li>Tick counter for animations</li>
438
- </ul>
439
-
440
- <div class="example">
441
- <div class="example-title">Example: Creating a Renderable object with visual properties</div>
442
- <pre><code class="language-javascript">// Create a Renderable object
443
- const renderableShape = new Renderable({
444
- x: 100,
445
- y: 100,
446
- width: 50,
447
- height: 30,
448
- visible: true,
449
- opacity: 0.7,
450
- shadowColor: "rgba(0,0,0,0.5)",
451
- shadowBlur: 5,
452
- shadowOffsetX: 3,
453
- shadowOffsetY: 3
454
- });
455
-
456
- // Control visibility
457
- renderableShape.visible = false; // Hide the object
458
- renderableShape.visible = true; // Show the object
459
-
460
- // Control opacity (0-1)
461
- renderableShape.opacity = 0.5; // 50% opacity
462
-
463
- // The render() method will apply these properties
464
- // and then call draw() to render the actual shape</code></pre>
465
- <div class="canvas-demo">
466
- <canvas id="renderable-canvas"></canvas>
467
- <div class="canvas-label">Renderable with opacity and shadows</div>
468
- </div>
469
- </div>
470
-
471
- <h3 id="transformable">4. Transformable</h3>
472
- <p>
473
- The <code>Transformable</code> class extends <code>Renderable</code> by adding transformation capabilities. It
474
- handles rotation and scaling of visual elements.
475
- </p>
476
-
477
- <h4>Key Features:</h4>
478
- <ul class="feature-list">
479
- <li>Rotation (in radians)</li>
480
- <li>Scaling (scaleX, scaleY)</li>
481
- <li>Transform application</li>
482
- <li>Transformed bounds calculation</li>
483
- </ul>
484
-
485
- <div class="example">
486
- <div class="example-title">Example: Applying transformations to an object</div>
487
- <pre><code class="language-javascript">// Create a Transformable object
488
- const transformableShape = new Transformable({
489
- x: 100,
490
- y: 100,
491
- width: 50,
492
- height: 30,
493
- rotation: Math.PI / 4, // 45 degrees
494
- scaleX: 1.5,
495
- scaleY: 0.8
496
- });
497
-
498
- // Rotation and scaling can be adjusted
499
- transformableShape.rotation = Math.PI / 6; // 30 degrees
500
- transformableShape.scaleX = 2.0;
501
- transformableShape.scaleY = 2.0;
502
-
503
- // The applyTransforms() method applies these transformations
504
- // by modifying the canvas context state</code></pre>
505
- <div class="canvas-demo">
506
- <canvas id="transformable-canvas"></canvas>
507
- <div class="canvas-label">Transformable with rotation and scaling</div>
508
- </div>
509
- </div>
510
-
511
- <h3 id="shape">5. Shape</h3>
512
- <p>
513
- The <code>Shape</code> class extends <code>Transformable</code> and serves as the base class for all visual
514
- elements in GCanvas. It adds styling properties and is extended by specific shape implementations like
515
- <code>Circle</code>, <code>Rectangle</code>, etc.
516
- </p>
517
-
518
- <h4>Key Features:</h4>
519
- <ul class="feature-list">
520
- <li>Fill color</li>
521
- <li>Stroke color and styling</li>
522
- <li>Line width, join, and cap properties</li>
523
- <li>Final rendering implementation</li>
524
- </ul>
525
-
526
- <div class="example">
527
- <div class="example-title">Example: Creating a Shape with styling properties</div>
528
- <pre><code class="language-javascript">// Create a Shape object (base class for visual elements)
529
- const shape = new Shape({
530
- x: 100,
531
- y: 100,
532
- width: 50,
533
- height: 30,
534
- color: "#ff0000", // Fill color
535
- stroke: "#000000", // Stroke color
536
- lineWidth: 2, // Stroke width
537
- lineJoin: "round", // Line join style
538
- lineCap: "round" // Line cap style
539
- });
540
-
541
- // Specific shape classes (Circle, Rectangle, etc.) extend Shape
542
- // and implement their own draw() method
543
- ctx.fill();
544
- ctx.stroke();
545
- ctx.restore();
546
-
547
- // Draw triangle
548
- ctx.save();
549
- ctx.translate(triangle.x, triangle.y);
550
- ctx.beginPath();
551
- ctx.moveTo(0, -triangle.size/2);
552
- ctx.lineTo(triangle.size/2, triangle.size/2);
553
- ctx.lineTo(-triangle.size/2, triangle.size/2);
554
- ctx.closePath();
555
- ctx.fillStyle = triangle.color;
556
- ctx.strokeStyle = triangle.stroke;
557
- ctx.lineWidth = triangle.lineWidth;
558
- ctx.fill();
559
- ctx.stroke();
560
- ctx.restore();</code></pre>
561
- <div class="canvas-demo">
562
- <canvas id="shape-canvas"></canvas>
563
- <div class="canvas-label">Shape implementations (Rectangle, Circle, Triangle)</div>
564
- </div>
565
- </div>
566
-
567
-
568
- </div>
569
- </section>
570
- <section>
571
- <h2>Available Shapes</h2>
572
- <p>
573
- GCanvas provides a variety of shape classes that extend the base <code>Shape</code> class. Each specialized
574
- shape implements its own <code>draw()</code> method to render the specific geometry.
575
- </p>
576
-
577
- <div class="shape-grid">
578
- <div class="shape-item">
579
- <h4>Circle</h4>
580
- <p>Circular shape with radius</p>
581
- </div>
582
- <div class="shape-item">
583
- <h4>Rectangle</h4>
584
- <p>Rectangular shape with width and height</p>
585
- </div>
586
- <div class="shape-item">
587
- <h4>Square</h4>
588
- <p>Square shape with equal sides</p>
589
- </div>
590
- <div class="shape-item">
591
- <h4>Triangle</h4>
592
- <p>Triangular shape</p>
593
- </div>
594
- <div class="shape-item">
595
- <h4>Star</h4>
596
- <p>Star shape with configurable points</p>
597
- </div>
598
- <div class="shape-item">
599
- <h4>Polygon</h4>
600
- <p>Multi-sided shape</p>
601
- </div>
602
- <div class="shape-item">
603
- <h4>TextShape</h4>
604
- <p>Text rendering with styling</p>
605
- </div>
606
- <div class="shape-item">
607
- <h4>Heart</h4>
608
- <p>Heart-shaped geometry</p>
609
- </div>
610
- <div class="shape-item">
611
- <h4>Line</h4>
612
- <p>Simple line segment</p>
613
- </div>
614
- <div class="shape-item">
615
- <h4>Cross</h4>
616
- <p>Cross shape</p>
617
- </div>
618
- <div class="shape-item">
619
- <h4>Cloud</h4>
620
- <p>Cloud-like shape</p>
621
- </div>
622
- <div class="shape-item">
623
- <h4>Cube</h4>
624
- <p>3D cube with perspective</p>
625
- </div>
626
- <div class="shape-item">
627
- <h4>Cylinder</h4>
628
- <p>3D cylinder with perspective</p>
629
- </div>
630
- <div class="shape-item">
631
- <h4>Cone</h4>
632
- <p>3D cone with perspective</p>
633
- </div>
634
- <div class="shape-item">
635
- <h4>Sphere</h4>
636
- <p>3D sphere with shading</p>
637
- </div>
638
- <div class="shape-item">
639
- <h4>Prism</h4>
640
- <p>3D prism with perspective</p>
641
- </div>
642
- <div class="shape-item">
643
- <h4>Ring</h4>
644
- <p>Ring or donut shape</p>
645
- </div>
646
- <div class="shape-item">
647
- <h4>Diamond</h4>
648
- <p>Diamond shape</p>
649
- </div>
650
- <div class="shape-item">
651
- <h4>SVGPath</h4>
652
- <p>SVG path rendering</p>
653
- </div>
654
- </div>
655
- </section>
656
-
657
- <section>
658
- <h2>Composing Shapes with Group</h2>
659
- <p>
660
- The <code>Group</code> class is a special container that inherits from <code>Transformable</code>. It allows
661
- multiple shapes to be grouped together and transformed as a single unit.
662
- </p>
663
-
664
- <h4>Key Features:</h4>
665
- <ul class="feature-list">
666
- <li>Container for multiple shapes</li>
667
- <li>Coordinates of children are relative to the group</li>
668
- <li>Transformations (rotation, scale) apply to all children</li>
669
- <li>Opacity cascades to all children</li>
670
- <li>Calculates combined bounds based on all children</li>
671
- </ul>
672
-
673
- <div class="example">
674
- <div class="example-title">Example: Creating a group of shapes</div>
675
- <pre><code class="language-javascript">// Create a Group to hold multiple shapes
676
- const group = new Group({
677
- x: 100,
678
- y: 100
679
- });
680
-
681
- // Add shapes to the group
682
- const rect = new Rectangle({
683
- width: 100,
684
- height: 50,
685
- color: "#ff0000"
686
- });
687
-
688
- const circle = new Circle(25, {
689
- x: 50,
690
- y: 0,
691
- color: "#0000ff"
692
- });
693
-
694
- const text = new TextShape("Hello", {
695
- x: 0,
696
- y: 0,
697
- color: "#ffffff",
698
- align: "center",
699
- baseline: "middle"
700
- });
701
-
702
- // Add shapes to the group
703
- group.add(rect);
704
- group.add(circle);
705
- group.add(text);
706
-
707
- // Moving the group moves all contained shapes
708
- group.x = 200;
709
- group.y = 150;
710
-
711
- // Rotating or scaling the group affects all shapes
712
- group.rotation = Math.PI / 6; // 30 degrees
713
- group.scaleX = 1.5;
714
- group.scaleY = 1.5;
715
-
716
- // Changes to the group's opacity affect all children
717
- group.opacity = 0.7;
718
-
719
- // Draw the group and all its children
720
- group.draw();</code></pre>
721
- <div class="canvas-demo">
722
- <canvas id="group-canvas"></canvas>
723
- <div class="canvas-label">Group composition with transformations</div>
724
- </div>
725
-
726
- </div>
727
- </section>
728
-
729
- <!-- Prism.js scripts -->
730
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
731
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
732
-
733
- <!-- Demo scripts -->
734
- <script type="module" src="./js/pipeline.js"></script>
735
- </body>
736
-
737
- </html>