@guinetik/gcanvas 1.0.0 → 1.0.2
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.
- package/demos/coordinates.html +698 -0
- package/demos/cube3d.html +23 -0
- package/demos/demos.css +17 -3
- package/demos/dino.html +42 -0
- package/demos/fluid-simple.html +22 -0
- package/demos/fluid.html +37 -0
- package/demos/gameobjects.html +626 -0
- package/demos/index.html +19 -7
- package/demos/js/blob.js +18 -5
- package/demos/js/coordinates.js +840 -0
- package/demos/js/cube3d.js +789 -0
- package/demos/js/dino.js +1420 -0
- package/demos/js/fluid-simple.js +253 -0
- package/demos/js/fluid.js +527 -0
- package/demos/js/gameobjects.js +176 -0
- package/demos/js/plane3d.js +256 -0
- package/demos/js/platformer.js +1579 -0
- package/demos/js/sphere3d.js +229 -0
- package/demos/js/sprite.js +473 -0
- package/demos/js/tde/accretiondisk.js +65 -12
- package/demos/js/tde/blackholescene.js +2 -2
- package/demos/js/tde/config.js +2 -2
- package/demos/js/tde/index.js +152 -27
- package/demos/js/tde/lensedstarfield.js +32 -25
- package/demos/js/tde/tdestar.js +78 -98
- package/demos/js/tde/tidalstream.js +24 -8
- package/demos/plane3d.html +24 -0
- package/demos/platformer.html +43 -0
- package/demos/sphere3d.html +24 -0
- package/demos/sprite.html +18 -0
- package/docs/README.md +230 -222
- package/docs/api/FluidSystem.md +173 -0
- package/docs/concepts/architecture-overview.md +204 -204
- package/docs/concepts/coordinate-system.md +384 -0
- package/docs/concepts/rendering-pipeline.md +279 -279
- package/docs/concepts/shapes-vs-gameobjects.md +187 -0
- package/docs/concepts/two-layer-architecture.md +229 -229
- package/docs/fluid-dynamics.md +99 -0
- package/docs/getting-started/first-game.md +354 -354
- package/docs/getting-started/installation.md +175 -157
- package/docs/modules/collision/README.md +2 -2
- package/docs/modules/fluent/README.md +6 -6
- package/docs/modules/game/README.md +303 -303
- package/docs/modules/isometric-camera.md +2 -2
- package/docs/modules/isometric.md +1 -1
- package/docs/modules/painter/README.md +328 -328
- package/docs/modules/particle/README.md +3 -3
- package/docs/modules/shapes/README.md +221 -221
- package/docs/modules/shapes/base/euclidian.md +123 -123
- package/docs/modules/shapes/base/shape.md +262 -262
- package/docs/modules/shapes/base/transformable.md +243 -243
- package/docs/modules/state/README.md +2 -2
- package/docs/modules/util/README.md +1 -1
- package/docs/modules/util/camera3d.md +3 -3
- package/docs/modules/util/scene3d.md +1 -1
- package/package.json +3 -1
- package/readme.md +19 -5
- package/src/collision/collision.js +75 -0
- package/src/game/game.js +11 -5
- package/src/game/index.js +2 -1
- package/src/game/objects/index.js +3 -0
- package/src/game/objects/platformer-scene.js +411 -0
- package/src/game/objects/scene.js +14 -0
- package/src/game/objects/sprite.js +529 -0
- package/src/game/pipeline.js +20 -16
- package/src/game/systems/FluidSystem.js +835 -0
- package/src/game/systems/index.js +11 -0
- package/src/game/ui/button.js +39 -18
- package/src/game/ui/cursor.js +14 -0
- package/src/game/ui/fps.js +12 -4
- package/src/game/ui/index.js +2 -0
- package/src/game/ui/stepper.js +549 -0
- package/src/game/ui/theme.js +123 -0
- package/src/game/ui/togglebutton.js +9 -3
- package/src/game/ui/tooltip.js +11 -4
- package/src/io/input.js +75 -45
- package/src/io/mouse.js +44 -19
- package/src/io/touch.js +35 -12
- package/src/math/fluid.js +507 -0
- package/src/math/index.js +2 -0
- package/src/mixins/anchor.js +17 -7
- package/src/motion/tweenetik.js +16 -0
- package/src/shapes/cube3d.js +599 -0
- package/src/shapes/index.js +3 -0
- package/src/shapes/plane3d.js +687 -0
- package/src/shapes/sphere3d.js +75 -6
- package/src/util/camera2d.js +315 -0
- package/src/util/camera3d.js +218 -12
- package/src/util/index.js +1 -0
- package/src/webgl/shaders/plane-shaders.js +332 -0
- package/src/webgl/shaders/sphere-shaders.js +4 -2
- package/types/fluent.d.ts +361 -0
- package/types/game.d.ts +303 -0
- package/types/index.d.ts +144 -5
- package/types/math.d.ts +361 -0
- package/types/motion.d.ts +271 -0
- package/types/particle.d.ts +373 -0
- package/types/shapes.d.ts +107 -9
- package/types/util.d.ts +353 -0
- package/types/webgl.d.ts +109 -0
- package/disk_example.png +0 -0
- package/tde.png +0 -0
package/demos/index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
|
|
6
|
+
|
|
7
7
|
<!-- Primary Meta Tags -->
|
|
8
8
|
<title>GCanvas Demos - Interactive Examples & Documentation</title>
|
|
9
9
|
<meta name="title" content="GCanvas Demos - Interactive Examples & Documentation">
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<meta name="author" content="GCanvas">
|
|
13
13
|
<meta name="robots" content="index, follow">
|
|
14
14
|
<link rel="canonical" href="https://gcanvas.guinetik.com/">
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
<!-- Open Graph / Facebook -->
|
|
17
17
|
<meta property="og:type" content="website">
|
|
18
18
|
<meta property="og:url" content="https://gcanvas.guinetik.com/">
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<meta property="og:image:alt" content="GCanvas interactive demos and examples">
|
|
25
25
|
<meta property="og:site_name" content="GCanvas">
|
|
26
26
|
<meta property="og:locale" content="en_US">
|
|
27
|
-
|
|
27
|
+
|
|
28
28
|
<!-- Twitter -->
|
|
29
29
|
<meta name="twitter:card" content="summary_large_image">
|
|
30
30
|
<meta name="twitter:url" content="https://gcanvas.guinetik.com/">
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
<meta name="twitter:image" content="https://gcanvas.guinetik.com/og_image.png">
|
|
34
34
|
<meta name="twitter:image:alt" content="GCanvas interactive demos and examples">
|
|
35
35
|
<meta name="twitter:creator" content="@guinetik">
|
|
36
|
-
|
|
36
|
+
|
|
37
37
|
<!-- Favicon -->
|
|
38
38
|
<link rel="icon" type="image/svg+xml" href="./logo.svg">
|
|
39
39
|
<link rel="apple-touch-icon" href="./logo.svg">
|
|
40
40
|
<meta name="theme-color" content="#000000">
|
|
41
|
-
|
|
41
|
+
|
|
42
42
|
<!-- Structured Data (JSON-LD) -->
|
|
43
43
|
<script type="application/ld+json">
|
|
44
44
|
{
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
</script>
|
|
62
|
-
|
|
62
|
+
|
|
63
63
|
<link rel="stylesheet" href="demos.css" />
|
|
64
64
|
|
|
65
65
|
<!-- Google Analytics -->
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
title="View on GitHub"
|
|
136
136
|
style="
|
|
137
137
|
display: inline-block;
|
|
138
|
-
background:
|
|
138
|
+
background: #1F1F1F;
|
|
139
139
|
border-radius: 50%;
|
|
140
140
|
width: 36px;
|
|
141
141
|
height: 36px;
|
|
@@ -171,6 +171,8 @@
|
|
|
171
171
|
<hr />
|
|
172
172
|
<h2 style="margin-bottom: 0.3em">Docs</h2>
|
|
173
173
|
<a href="pipeline.html" target="demo-frame">Rendering Pipeline</a>
|
|
174
|
+
<a href="gameobjects.html" target="demo-frame">Game Objects</a>
|
|
175
|
+
<a href="coordinates.html" target="demo-frame">Coordinate System</a>
|
|
174
176
|
<a href="fluent.html" target="demo-frame">Fluent API</a>
|
|
175
177
|
<hr />
|
|
176
178
|
<h2>Demos</h2>
|
|
@@ -201,6 +203,7 @@
|
|
|
201
203
|
<a href="animations.html" target="demo-frame">Animations</a>
|
|
202
204
|
<a href="easing.html" target="demo-frame">Easing</a>
|
|
203
205
|
<a href="tween.html" target="demo-frame">Tween</a>
|
|
206
|
+
<a href="sprite.html" target="demo-frame">Sprite Timeline</a>
|
|
204
207
|
<a href="particles-showcase.html" target="demo-frame"
|
|
205
208
|
>Particle System</a
|
|
206
209
|
>
|
|
@@ -211,6 +214,11 @@
|
|
|
211
214
|
<a href="isometric.html" target="demo-frame">Isometric</a>
|
|
212
215
|
<a href="scenes.html" target="demo-frame">Scene Transforms</a>
|
|
213
216
|
<hr />
|
|
217
|
+
<h2 style="margin-bottom: 0.3em">3D</h2>
|
|
218
|
+
<a href="sphere3d.html" target="demo-frame">Sphere3D Showcase</a>
|
|
219
|
+
<a href="plane3d.html" target="demo-frame">Plane3D Showcase</a>
|
|
220
|
+
<a href="cube3d.html" target="demo-frame">Rubik's Cube</a>
|
|
221
|
+
<hr />
|
|
214
222
|
<h2 style="margin-bottom: 0.3em">Generative Art</h2>
|
|
215
223
|
<a href="genart.html" target="demo-frame">Hypnotic Mandala</a>
|
|
216
224
|
<a href="mondrian.html" target="demo-frame">Mondrian</a>
|
|
@@ -219,6 +227,8 @@
|
|
|
219
227
|
<a href="baskara.html" target="demo-frame">Root Dance</a>
|
|
220
228
|
<hr />
|
|
221
229
|
<h2 style="margin-bottom: 0.3em">Math & Physics</h2>
|
|
230
|
+
<a href="fluid.html" target="demo-frame">Fluid Playground</a>
|
|
231
|
+
<a href="fluid-simple.html" target="demo-frame">Fluid System</a>
|
|
222
232
|
<a href="schrodinger.html" target="demo-frame">Schrodinger Wave</a>
|
|
223
233
|
<a href="spacetime.html" target="demo-frame">Spacetime Curvature</a>
|
|
224
234
|
<a href="schwarzschild.html" target="demo-frame"
|
|
@@ -231,6 +241,8 @@
|
|
|
231
241
|
<h2 style="margin-bottom: 0.3em">Games</h2>
|
|
232
242
|
<a href="blob.html" target="demo-frame">Bezier Blob</a>
|
|
233
243
|
<a href="space.html" target="demo-frame">Space Invaders</a>
|
|
244
|
+
<a href="dino.html" target="demo-frame">Dino Run</a>
|
|
245
|
+
<a href="platformer.html" target="demo-frame">Tron Platformer</a>
|
|
234
246
|
<a href="penrose-game.html" target="demo-frame"
|
|
235
247
|
>Penrose Spacetime</a
|
|
236
248
|
>
|
package/demos/js/blob.js
CHANGED
|
@@ -243,6 +243,7 @@ class BlobScene extends Scene {
|
|
|
243
243
|
// Set initial blob size (smaller)
|
|
244
244
|
this.blobPhysics.baseRadius = CONFIG.startRadius;
|
|
245
245
|
this.blobPhysics.currentRadius = CONFIG.startRadius;
|
|
246
|
+
this.blobPhysics.healthyRadius = CONFIG.startRadius; // Track healthy size before hunger effects
|
|
246
247
|
|
|
247
248
|
// Control points around the blob (in polar coordinates for easy animation)
|
|
248
249
|
this.blobPoints = [];
|
|
@@ -1095,11 +1096,16 @@ class BlobScene extends Scene {
|
|
|
1095
1096
|
this.gameState.lastEatTime = 0;
|
|
1096
1097
|
this.gameState.isHungry = false;
|
|
1097
1098
|
|
|
1098
|
-
// Grow the blob
|
|
1099
|
+
// Grow the blob - restore to healthy radius plus growth
|
|
1099
1100
|
const physics = this.blobPhysics;
|
|
1100
|
-
|
|
1101
|
+
// Ensure healthyRadius is initialized
|
|
1102
|
+
if (physics.healthyRadius === undefined) {
|
|
1103
|
+
physics.healthyRadius = physics.baseRadius;
|
|
1104
|
+
}
|
|
1105
|
+
const newRadius = Math.min(CONFIG.maxRadius, physics.healthyRadius + CONFIG.growthPerCollect);
|
|
1101
1106
|
physics.baseRadius = newRadius;
|
|
1102
1107
|
physics.currentRadius = newRadius;
|
|
1108
|
+
physics.healthyRadius = newRadius; // Update healthy radius to new size
|
|
1103
1109
|
|
|
1104
1110
|
// Also give energy boost
|
|
1105
1111
|
physics.energy = Math.min(1, physics.energy + 0.15);
|
|
@@ -1150,10 +1156,14 @@ class BlobScene extends Scene {
|
|
|
1150
1156
|
const wasHungry = this.gameState.isHungry;
|
|
1151
1157
|
this.gameState.isHungry = this.gameState.lastEatTime > hungerThreshold;
|
|
1152
1158
|
|
|
1153
|
-
// If just became hungry, show warning
|
|
1159
|
+
// If just became hungry, show warning and capture healthy radius
|
|
1154
1160
|
if (this.gameState.isHungry && !wasHungry) {
|
|
1155
1161
|
this.showFloatingText("HUNGRY!", this.game.width / 2, this.game.height / 2);
|
|
1156
1162
|
this.playHungryWarning();
|
|
1163
|
+
// Capture the current radius as the healthy radius when hunger starts
|
|
1164
|
+
if (physics.healthyRadius === undefined || physics.healthyRadius < physics.baseRadius) {
|
|
1165
|
+
physics.healthyRadius = physics.baseRadius;
|
|
1166
|
+
}
|
|
1157
1167
|
}
|
|
1158
1168
|
|
|
1159
1169
|
// If hungry, shrink and lose points
|
|
@@ -1169,7 +1179,7 @@ class BlobScene extends Scene {
|
|
|
1169
1179
|
const hungerMultiplier = 1 + Math.min(hungerDuration / 2, 1);
|
|
1170
1180
|
const shrinkAmount = shrinkRate * hungerMultiplier * dt;
|
|
1171
1181
|
|
|
1172
|
-
// Apply shrinking
|
|
1182
|
+
// Apply shrinking from healthy radius (but don't modify healthyRadius)
|
|
1173
1183
|
const newRadius = Math.max(CONFIG.minRadius, physics.baseRadius - shrinkAmount);
|
|
1174
1184
|
if (newRadius < physics.baseRadius) {
|
|
1175
1185
|
// Calculate score penalty
|
|
@@ -1177,7 +1187,7 @@ class BlobScene extends Scene {
|
|
|
1177
1187
|
const scorePenalty = Math.ceil(radiusLost * CONFIG.shrinkScorePenalty);
|
|
1178
1188
|
this.gameState.score = Math.max(0, this.gameState.score - scorePenalty);
|
|
1179
1189
|
|
|
1180
|
-
// Apply size reduction
|
|
1190
|
+
// Apply size reduction (healthyRadius stays unchanged)
|
|
1181
1191
|
physics.baseRadius = newRadius;
|
|
1182
1192
|
physics.currentRadius = newRadius;
|
|
1183
1193
|
}
|
|
@@ -1288,6 +1298,7 @@ class BlobScene extends Scene {
|
|
|
1288
1298
|
this.collectionParticles = [];
|
|
1289
1299
|
this.blobPhysics.baseRadius = CONFIG.startRadius;
|
|
1290
1300
|
this.blobPhysics.currentRadius = CONFIG.startRadius;
|
|
1301
|
+
this.blobPhysics.healthyRadius = CONFIG.startRadius;
|
|
1291
1302
|
// Reset color to normal
|
|
1292
1303
|
this.blobPhysics.currentColor = [...this.blobPhysics.baseColor];
|
|
1293
1304
|
// Reset pop sound scale
|
|
@@ -1357,6 +1368,7 @@ class BlobScene extends Scene {
|
|
|
1357
1368
|
// Reset physics
|
|
1358
1369
|
physics.baseRadius = CONFIG.startRadius;
|
|
1359
1370
|
physics.currentRadius = CONFIG.startRadius;
|
|
1371
|
+
physics.healthyRadius = CONFIG.startRadius;
|
|
1360
1372
|
physics.currentX = this.game.width / 2;
|
|
1361
1373
|
physics.currentY = this.game.height / 2;
|
|
1362
1374
|
physics.vx = 0;
|
|
@@ -2190,6 +2202,7 @@ class BlobUIScene extends Scene {
|
|
|
2190
2202
|
// Reset physics - use CONFIG for starting size
|
|
2191
2203
|
physics.baseRadius = CONFIG.startRadius;
|
|
2192
2204
|
physics.currentRadius = CONFIG.startRadius;
|
|
2205
|
+
physics.healthyRadius = CONFIG.startRadius;
|
|
2193
2206
|
physics.energy = 1.0;
|
|
2194
2207
|
physics.baseColor = [64, 180, 255];
|
|
2195
2208
|
physics.vx = 0;
|