@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/pipeline.html ADDED
@@ -0,0 +1,737 @@
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>