@guinetik/gcanvas 1.0.4 → 2.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.
- package/dist/CNAME +1 -0
- package/dist/aizawa.html +27 -0
- package/dist/animations.html +31 -0
- package/dist/basic.html +38 -0
- package/dist/baskara.html +31 -0
- package/dist/bezier.html +35 -0
- package/dist/beziersignature.html +29 -0
- package/dist/blackhole.html +28 -0
- package/dist/blob.html +35 -0
- package/dist/clifford.html +25 -0
- package/dist/cmb.html +24 -0
- package/dist/coordinates.html +698 -0
- package/dist/cube3d.html +23 -0
- package/dist/dadras.html +26 -0
- package/dist/dejong.html +25 -0
- package/dist/demos.css +303 -0
- package/dist/dino.html +42 -0
- package/dist/easing.html +28 -0
- package/dist/events.html +195 -0
- package/dist/fluent.html +647 -0
- package/dist/fluid-simple.html +22 -0
- package/dist/fluid.html +37 -0
- package/dist/fractals.html +36 -0
- package/dist/gameobjects.html +626 -0
- package/dist/gcanvas.es.js +14368 -9093
- package/dist/gcanvas.es.min.js +1 -1
- package/dist/gcanvas.umd.js +1 -1
- package/dist/gcanvas.umd.min.js +1 -1
- package/dist/genart.html +26 -0
- package/dist/gendream.html +26 -0
- package/dist/group.html +36 -0
- package/dist/halvorsen.html +27 -0
- package/dist/home.html +587 -0
- package/dist/hyperbolic001.html +23 -0
- package/dist/hyperbolic002.html +23 -0
- package/dist/hyperbolic003.html +23 -0
- package/dist/hyperbolic004.html +23 -0
- package/dist/hyperbolic005.html +22 -0
- package/dist/index.html +446 -0
- package/dist/isometric.html +34 -0
- package/dist/js/aizawa.js +425 -0
- package/dist/js/animations.js +452 -0
- package/dist/js/basic.js +204 -0
- package/dist/js/baskara.js +751 -0
- package/dist/js/bezier.js +692 -0
- package/dist/js/beziersignature.js +241 -0
- package/dist/js/blackhole/accretiondisk.obj.js +379 -0
- package/dist/js/blackhole/blackhole.obj.js +318 -0
- package/dist/js/blackhole/index.js +409 -0
- package/dist/js/blackhole/particle.js +56 -0
- package/dist/js/blackhole/starfield.obj.js +218 -0
- package/dist/js/blob.js +2276 -0
- package/dist/js/clifford.js +236 -0
- package/dist/js/cmb.js +594 -0
- package/dist/js/coordinates.js +840 -0
- package/dist/js/cube3d.js +789 -0
- package/dist/js/dadras.js +405 -0
- package/dist/js/dejong.js +257 -0
- package/dist/js/dino.js +1420 -0
- package/dist/js/easing.js +477 -0
- package/dist/js/fluent.js +183 -0
- package/dist/js/fluid-simple.js +253 -0
- package/dist/js/fluid.js +527 -0
- package/dist/js/fractals.js +932 -0
- package/dist/js/fractalworker.js +93 -0
- package/dist/js/gameobjects.js +176 -0
- package/dist/js/genart.js +268 -0
- package/dist/js/gendream.js +209 -0
- package/dist/js/group.js +140 -0
- package/dist/js/halvorsen.js +405 -0
- package/dist/js/hyperbolic001.js +310 -0
- package/dist/js/hyperbolic002.js +388 -0
- package/dist/js/hyperbolic003.js +319 -0
- package/dist/js/hyperbolic004.js +345 -0
- package/dist/js/hyperbolic005.js +340 -0
- package/dist/js/info-toggle.js +25 -0
- package/dist/js/isometric.js +851 -0
- package/dist/js/kerr.js +1547 -0
- package/dist/js/lavalamp.js +590 -0
- package/dist/js/layout.js +354 -0
- package/dist/js/lorenz.js +425 -0
- package/dist/js/mondrian.js +285 -0
- package/dist/js/opacity.js +275 -0
- package/dist/js/painter.js +484 -0
- package/dist/js/particles-showcase.js +514 -0
- package/dist/js/particles.js +299 -0
- package/dist/js/patterns.js +397 -0
- package/dist/js/penrose/artifact.js +69 -0
- package/dist/js/penrose/blackhole.js +121 -0
- package/dist/js/penrose/constants.js +73 -0
- package/dist/js/penrose/game.js +943 -0
- package/dist/js/penrose/lore.js +278 -0
- package/dist/js/penrose/penrosescene.js +892 -0
- package/dist/js/penrose/ship.js +216 -0
- package/dist/js/penrose/sounds.js +211 -0
- package/dist/js/penrose/voidparticle.js +55 -0
- package/dist/js/penrose/voidscene.js +258 -0
- package/dist/js/penrose/voidship.js +144 -0
- package/dist/js/penrose/wormhole.js +46 -0
- package/dist/js/pipeline.js +555 -0
- package/dist/js/plane3d.js +256 -0
- package/dist/js/platformer.js +1579 -0
- package/dist/js/rossler.js +480 -0
- package/dist/js/scene.js +304 -0
- package/dist/js/scenes.js +320 -0
- package/dist/js/schrodinger.js +706 -0
- package/dist/js/schwarzschild.js +1015 -0
- package/dist/js/shapes.js +628 -0
- package/dist/js/space/alien.js +171 -0
- package/dist/js/space/boom.js +98 -0
- package/dist/js/space/boss.js +353 -0
- package/dist/js/space/buff.js +73 -0
- package/dist/js/space/bullet.js +102 -0
- package/dist/js/space/constants.js +85 -0
- package/dist/js/space/game.js +1884 -0
- package/dist/js/space/hud.js +112 -0
- package/dist/js/space/laserbeam.js +179 -0
- package/dist/js/space/lightning.js +277 -0
- package/dist/js/space/minion.js +192 -0
- package/dist/js/space/missile.js +212 -0
- package/dist/js/space/player.js +430 -0
- package/dist/js/space/powerup.js +90 -0
- package/dist/js/space/starfield.js +58 -0
- package/dist/js/space/starpower.js +90 -0
- package/dist/js/spacetime.js +559 -0
- package/dist/js/sphere3d.js +229 -0
- package/dist/js/sprite.js +473 -0
- package/dist/js/starfaux/config.js +118 -0
- package/dist/js/starfaux/enemy.js +353 -0
- package/dist/js/starfaux/hud.js +78 -0
- package/dist/js/starfaux/index.js +482 -0
- package/dist/js/starfaux/laser.js +182 -0
- package/dist/js/starfaux/player.js +468 -0
- package/dist/js/starfaux/terrain.js +560 -0
- package/dist/js/study001.js +275 -0
- package/dist/js/study002.js +366 -0
- package/dist/js/study003.js +331 -0
- package/dist/js/study004.js +389 -0
- package/dist/js/study005.js +209 -0
- package/dist/js/study006.js +194 -0
- package/dist/js/study007.js +192 -0
- package/dist/js/study008.js +413 -0
- package/dist/js/svgtween.js +204 -0
- package/dist/js/tde/accretiondisk.js +471 -0
- package/dist/js/tde/blackhole.js +219 -0
- package/dist/js/tde/blackholescene.js +209 -0
- package/dist/js/tde/config.js +59 -0
- package/dist/js/tde/index.js +820 -0
- package/dist/js/tde/jets.js +290 -0
- package/dist/js/tde/lensedstarfield.js +154 -0
- package/dist/js/tde/tdestar.js +297 -0
- package/dist/js/tde/tidalstream.js +372 -0
- package/dist/js/tde_old/blackhole.obj.js +354 -0
- package/dist/js/tde_old/debris.obj.js +791 -0
- package/dist/js/tde_old/flare.obj.js +239 -0
- package/dist/js/tde_old/index.js +448 -0
- package/dist/js/tde_old/star.obj.js +812 -0
- package/dist/js/tetris/config.js +157 -0
- package/dist/js/tetris/grid.js +286 -0
- package/dist/js/tetris/index.js +1195 -0
- package/dist/js/tetris/renderer.js +634 -0
- package/dist/js/tetris/tetrominos.js +280 -0
- package/dist/js/thomas.js +394 -0
- package/dist/js/tiles.js +312 -0
- package/dist/js/tweendemo.js +79 -0
- package/dist/js/visibility.js +102 -0
- package/dist/kerr.html +28 -0
- package/dist/lavalamp.html +27 -0
- package/dist/layouts.html +37 -0
- package/dist/logo.svg +4 -0
- package/dist/loop.html +84 -0
- package/dist/lorenz.html +27 -0
- package/dist/mondrian.html +32 -0
- package/dist/og_image.png +0 -0
- package/dist/opacity.html +36 -0
- package/dist/painter.html +39 -0
- package/dist/particles-showcase.html +28 -0
- package/dist/particles.html +24 -0
- package/dist/patterns.html +33 -0
- package/dist/penrose-game.html +31 -0
- package/dist/pipeline.html +737 -0
- package/dist/plane3d.html +24 -0
- package/dist/platformer.html +43 -0
- package/dist/rossler.html +27 -0
- package/dist/scene-interactivity-test.html +220 -0
- package/dist/scene.html +33 -0
- package/dist/scenes.html +96 -0
- package/dist/schrodinger.html +27 -0
- package/dist/schwarzschild.html +27 -0
- package/dist/shapes.html +16 -0
- package/dist/space.html +85 -0
- package/dist/spacetime.html +27 -0
- package/dist/sphere3d.html +24 -0
- package/dist/sprite.html +18 -0
- package/dist/starfaux.html +22 -0
- package/dist/study001.html +23 -0
- package/dist/study002.html +23 -0
- package/dist/study003.html +23 -0
- package/dist/study004.html +23 -0
- package/dist/study005.html +22 -0
- package/dist/study006.html +24 -0
- package/dist/study007.html +24 -0
- package/dist/study008.html +22 -0
- package/dist/svgtween.html +29 -0
- package/dist/tde.html +28 -0
- package/dist/tetris3d.html +25 -0
- package/dist/thomas.html +27 -0
- package/dist/tiles.html +28 -0
- package/dist/transforms.html +400 -0
- package/dist/tween.html +45 -0
- package/dist/visibility.html +33 -0
- package/package.json +1 -1
- package/readme.md +30 -22
- package/src/game/objects/go.js +7 -0
- package/src/game/objects/index.js +2 -0
- package/src/game/objects/isometric-scene.js +53 -3
- package/src/game/objects/layoutscene.js +57 -0
- package/src/game/objects/mask.js +241 -0
- package/src/game/objects/scene.js +19 -0
- package/src/game/objects/wrapper.js +14 -2
- package/src/game/pipeline.js +17 -0
- package/src/game/ui/button.js +101 -16
- package/src/game/ui/theme.js +0 -6
- package/src/game/ui/togglebutton.js +25 -14
- package/src/game/ui/tooltip.js +12 -4
- package/src/index.js +3 -0
- package/src/io/gesture.js +409 -0
- package/src/io/index.js +4 -1
- package/src/io/keys.js +9 -1
- package/src/io/screen.js +476 -0
- package/src/math/attractors.js +664 -0
- package/src/math/heat.js +106 -0
- package/src/math/index.js +1 -0
- package/src/mixins/draggable.js +15 -19
- package/src/painter/painter.shapes.js +11 -5
- package/src/particle/particle-system.js +165 -1
- package/src/physics/index.js +26 -0
- package/src/physics/physics-updaters.js +333 -0
- package/src/physics/physics.js +375 -0
- package/src/shapes/image.js +5 -5
- package/src/shapes/index.js +2 -0
- package/src/shapes/parallelogram.js +147 -0
- package/src/shapes/righttriangle.js +115 -0
- package/src/shapes/svg.js +281 -100
- package/src/shapes/text.js +22 -6
- package/src/shapes/transformable.js +5 -0
- package/src/sound/effects.js +807 -0
- package/src/sound/index.js +13 -0
- package/src/webgl/index.js +7 -0
- package/src/webgl/shaders/clifford-point-shaders.js +131 -0
- package/src/webgl/shaders/dejong-point-shaders.js +131 -0
- package/src/webgl/shaders/point-sprite-shaders.js +152 -0
- package/src/webgl/webgl-clifford-renderer.js +477 -0
- package/src/webgl/webgl-dejong-renderer.js +472 -0
- package/src/webgl/webgl-line-renderer.js +391 -0
- package/src/webgl/webgl-particle-renderer.js +410 -0
- package/types/index.d.ts +30 -2
- package/types/io.d.ts +217 -0
- package/types/physics.d.ts +299 -0
- package/types/shapes.d.ts +8 -0
- package/types/webgl.d.ts +188 -109
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
<title>StarFaux - Rail Shooter</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>StarFaux</strong> — StarFox64-style rail shooter<br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>Arrow Keys / WASD: Move ship</li>
|
|
15
|
+
<li>Space: Fire lasers</li>
|
|
16
|
+
<li>Avoid enemies, shoot them down!</li>
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
<canvas id="game"></canvas>
|
|
20
|
+
<script type="module" src="./js/starfaux/index.js"></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
<title>Study 001 - Grid Bounce</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 001 - Grid Bounce</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
Original art by <a href="https://twitter.com/okazz_" target="_blank" style="color:#0af">@okazz_</a><br/>
|
|
15
|
+
<li>Colored circles bounce between grid points</li>
|
|
16
|
+
<li>Motion trails show movement paths</li>
|
|
17
|
+
<li>Click to randomize colors</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study001.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
<title>Study 002 - Hex Grid</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 002 - Hex Grid</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
Original art by <a href="https://twitter.com/okazz_" target="_blank" style="color:#0af">@okazz_</a><br/>
|
|
15
|
+
<li>Triangular lattice grid (6 directions)</li>
|
|
16
|
+
<li>Ring circles with center dots</li>
|
|
17
|
+
<li>Click to randomize colors</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study002.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
<title>Study 003 - Circuit</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 003 - Circuit</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
Generative circuit patterns<br/>
|
|
15
|
+
<li>Random maze-like connections</li>
|
|
16
|
+
<li>White dots traverse the paths</li>
|
|
17
|
+
<li>Click to regenerate circuit</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study003.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
<title>Study 004 - Hex Bloom</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 004 - Hex Bloom</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
Original art by <a href="https://twitter.com/okazz_" target="_blank" style="color:#0af">@okazz_</a><br/>
|
|
15
|
+
<li>Radial hexagon explosion</li>
|
|
16
|
+
<li>Tweenetik-powered animations</li>
|
|
17
|
+
<li>Click to bloom again</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study004.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
<title>Study 005 - Hex Flow</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 005 - Hex Flow</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>Hexagonal grid with wave interference</li>
|
|
15
|
+
<li>Rotation + scale pulsing</li>
|
|
16
|
+
<li>Click to shift palette</li>
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
<canvas id="game"></canvas>
|
|
20
|
+
<script type="module" src="./js/study005.js"></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
<title>Study 006 - Psychedelic Drop</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 006 - Psychedelic Drop</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>Ripples in space-time</li>
|
|
15
|
+
<li>Unintentional psychedelic patterns</li>
|
|
16
|
+
<li>Move mouse to disturb the pool</li>
|
|
17
|
+
<li>Click to change palette</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study006.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
24
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
<title>Study 007 - Interference</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 007 - Interference</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
Multiple wave emitters creating moiré chaos with chromatic aberration.
|
|
15
|
+
<li>RGB channel separation</li>
|
|
16
|
+
<li>7 orbiting wave sources</li>
|
|
17
|
+
<li>Click to randomize</li>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<canvas id="game"></canvas>
|
|
21
|
+
<script type="module" src="./js/study007.js"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
24
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
<title>Study 008 - GCanvas 3D Logo</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Study 008 - 3D Logo</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>Extruded SVG Geometry</li>
|
|
15
|
+
<li>Wireframe rendering</li>
|
|
16
|
+
<li>Mouse interaction</li>
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
<canvas id="game"></canvas>
|
|
20
|
+
<script type="module" src="./js/study008.js"></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
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>Bezier Rider</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>SVG Motion</strong> — Interactive path drawing with animation.<br/>
|
|
15
|
+
This demo uses <code>SVGShape</code> and <code>GameObject</code> to animate SVG vector paths with easing, motion effects, and a glowing trail.
|
|
16
|
+
</div>
|
|
17
|
+
<canvas id="game"></canvas>
|
|
18
|
+
<script type="module">
|
|
19
|
+
import { MyGame } from './js/svgtween.js';
|
|
20
|
+
|
|
21
|
+
window.addEventListener("load", () => {
|
|
22
|
+
const canvas = document.getElementById("game");
|
|
23
|
+
const game = new MyGame(canvas);
|
|
24
|
+
game.start();
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
</body>
|
|
28
|
+
|
|
29
|
+
</html>
|
package/dist/tde.html
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
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>Tidal Disruption Event</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>Tidal Disruption Event</strong> — A star torn apart by a black hole.<br />
|
|
15
|
+
<span style="color:#CCC">
|
|
16
|
+
<li><code>Tidal Forces</code> — Star stretches and deforms.</li>
|
|
17
|
+
<li><code>Spaghettification</code> — Matter streams into debris.</li>
|
|
18
|
+
<li><code>Accretion</code> — Debris spirals into the black hole.</li>
|
|
19
|
+
<li><code>Flare</code> — Luminous burst at peak accretion.</li>
|
|
20
|
+
<li><code>Drag</code> — Orbit the camera around.</li>
|
|
21
|
+
<li><code>Click</code> — Restart the event.</li>
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<canvas id="game"></canvas>
|
|
25
|
+
<script type="module" src="./js/tde/index.js"></script>
|
|
26
|
+
</body>
|
|
27
|
+
|
|
28
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
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
|
+
<title>3D Tetris - GCanvas Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>3D Tetris</strong> — A 3D falling block puzzle game.<br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>WASD / Arrow Keys: Move piece</li>
|
|
15
|
+
<li>Q/E: Rotate piece</li>
|
|
16
|
+
<li>SPACE: Hard drop (instant)</li>
|
|
17
|
+
<li>Mouse drag: Rotate camera view</li>
|
|
18
|
+
<li>View Button: Cycle preset camera angles</li>
|
|
19
|
+
<li>ENTER: Start/Restart | ESC: Pause</li>
|
|
20
|
+
</span>
|
|
21
|
+
</div>
|
|
22
|
+
<canvas id="game"></canvas>
|
|
23
|
+
<script type="module" src="./js/tetris/index.js"></script>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
package/dist/thomas.html
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
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
|
+
<title>Thomas Attractor 3D</title>
|
|
7
|
+
<link rel="stylesheet" href="demos.css" />
|
|
8
|
+
<script src="./js/info-toggle.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="info">
|
|
12
|
+
<strong>Thomas' Cyclically Symmetric Attractor</strong> (1999)<br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>dx/dt = sin(y) - bx</li>
|
|
15
|
+
<li>dy/dt = sin(z) - by</li>
|
|
16
|
+
<li>dz/dt = sin(x) - bz</li>
|
|
17
|
+
<li>b = 0.208186</li>
|
|
18
|
+
<li>Elegant three-fold symmetry</li>
|
|
19
|
+
<li>Blue = slow, Green = fast</li>
|
|
20
|
+
<li>Drag to rotate</li>
|
|
21
|
+
<li>Scroll/pinch to zoom</li>
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<canvas id="game"></canvas>
|
|
25
|
+
<script type="module" src="./js/thomas.js"></script>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
package/dist/tiles.html
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
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>Tiles</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>Tile Layout</strong> - This demo shows how to use the tile layout system to create a grid of tiles.
|
|
15
|
+
</div>
|
|
16
|
+
<canvas id="game"></canvas>
|
|
17
|
+
<script type="module">
|
|
18
|
+
import { MyGame } from './js/tiles.js';
|
|
19
|
+
|
|
20
|
+
window.addEventListener("load", () => {
|
|
21
|
+
const canvas = document.getElementById("game");
|
|
22
|
+
const game = new MyGame(canvas);
|
|
23
|
+
game.start();
|
|
24
|
+
});
|
|
25
|
+
</script>
|
|
26
|
+
</body>
|
|
27
|
+
|
|
28
|
+
</html>
|