@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
package/dist/CNAME
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
gcanvas.guinetik.com
|
package/dist/aizawa.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>Aizawa 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>Aizawa Attractor</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>dx/dt = (z - b)x - dy</li>
|
|
15
|
+
<li>dy/dt = dx + (z - b)y</li>
|
|
16
|
+
<li>dz/dt = c + az - z³/3 - (x² + y²)(1 + ez) + fzx³</li>
|
|
17
|
+
<li>a=0.95, b=0.7, c=0.6, d=3.5, e=0.25, f=0.1</li>
|
|
18
|
+
<li>Cyan = slow, Magenta = fast</li>
|
|
19
|
+
<li>Drag to rotate</li>
|
|
20
|
+
<li>Scroll/pinch to zoom</li>
|
|
21
|
+
<li>Double-click to reset</li>
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<canvas id="game"></canvas>
|
|
25
|
+
<script type="module" src="./js/aizawa.js"></script>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
@@ -0,0 +1,31 @@
|
|
|
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>Tween</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>Motion Demo</strong> - Showcases reusable animations. Each animation is implemented through a tween system that handles interpolation between values over time. The demo uses a tile-based layout to organize the animations in a grid, with each animation contained in its own box. Under the hood, the system manages animation timing through a central update loop, applying mathematical transformations to the shapes' positions based on normalized time values (0-1) that loop continuously.
|
|
15
|
+
</div>
|
|
16
|
+
<canvas id="game"></canvas>
|
|
17
|
+
<script type="module">
|
|
18
|
+
import { MyGame } from './js/animations.js';
|
|
19
|
+
|
|
20
|
+
window.addEventListener("load", () => {
|
|
21
|
+
const canvas = document.getElementById("game");
|
|
22
|
+
const game = new MyGame(canvas);
|
|
23
|
+
// game.setFPS(1);
|
|
24
|
+
// game.enableLogging(true);
|
|
25
|
+
game.start();
|
|
26
|
+
// setTimeout(game.stop.bind(game), 2000);
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
</body>
|
|
30
|
+
|
|
31
|
+
</html>
|
package/dist/basic.html
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
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>Basic Game Template</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>Basic Template</strong> — A minimal demo to kickstart new games. <br>
|
|
15
|
+
A <strong>Game</strong> manages the canvas, lifecycle, input, and rendering loop. <br>
|
|
16
|
+
A <strong>GameObject</strong> is any interactive or drawable entity (e.g. shape, text, button, particle). <br>
|
|
17
|
+
A <strong>Scene</strong> is a container that groups GameObjects and controls update & render order. <br>
|
|
18
|
+
The <strong>Pipeline</strong> is the main ordered list of GameObjects (or Scenes) that the game runs every frame.
|
|
19
|
+
<br>
|
|
20
|
+
This template sets up one game scene and one UI scene, with a "Hello World" box in the center and an FPS counter in
|
|
21
|
+
the corner.
|
|
22
|
+
</div>
|
|
23
|
+
<canvas id="game"></canvas>
|
|
24
|
+
|
|
25
|
+
<script type="module">
|
|
26
|
+
import { DemoGame } from "./js/basic.js";
|
|
27
|
+
window.addEventListener("load", () => {
|
|
28
|
+
const canvas = document.getElementById("game");
|
|
29
|
+
const game = new DemoGame(canvas);
|
|
30
|
+
//game.enableLogging();
|
|
31
|
+
game.enablePauseOnBlur(true);
|
|
32
|
+
game.setFPS(60);
|
|
33
|
+
game.start();
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
</body>
|
|
37
|
+
|
|
38
|
+
</html>
|
|
@@ -0,0 +1,31 @@
|
|
|
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>Root Dance - Bhaskara Formula</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>Bhaskara Dance</strong> - Visualizing the quadratic formula (Bhaskara).
|
|
15
|
+
Particles represent the roots of ax² + bx + c = 0. Watch them dance
|
|
16
|
+
as coefficients animate, merge when the discriminant hits zero, and spiral
|
|
17
|
+
into the complex plane when roots become imaginary.
|
|
18
|
+
</div>
|
|
19
|
+
<canvas id="game"></canvas>
|
|
20
|
+
<script type="module">
|
|
21
|
+
import { MyGame } from './js/baskara.js';
|
|
22
|
+
|
|
23
|
+
window.addEventListener("load", () => {
|
|
24
|
+
const canvas = document.getElementById("game");
|
|
25
|
+
const game = MyGame(canvas);
|
|
26
|
+
game.start();
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
</body>
|
|
30
|
+
|
|
31
|
+
</html>
|
package/dist/bezier.html
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
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>Basic Game Template</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>Bezier Curve Editor</strong> — Create and modify Bezier curves with interactive control points. <br>
|
|
15
|
+
The demo shows the separation between <strong>Shapes</strong> (visual definitions) and
|
|
16
|
+
<strong>GameObjects</strong> (interactive entities). <br>
|
|
17
|
+
<strong>BezierShape</strong> defines curve paths using commands like "M" (move), "L" (line), "Q" (quadratic),
|
|
18
|
+
and "C" (cubic). <br>
|
|
19
|
+
<strong>Control Points</strong> are wrapped with ShapeGOFactory to make them interactive, while guide lines show
|
|
20
|
+
relationships between points. <br>
|
|
21
|
+
Switch between <strong>Add Points</strong> mode to place new control points and <strong>Edit Points</strong>
|
|
22
|
+
mode to drag and adjust the curve shape.
|
|
23
|
+
</div>
|
|
24
|
+
<canvas id="game"></canvas>
|
|
25
|
+
<script type="module" src="./js/bezier.js"></script>
|
|
26
|
+
<script type="module">
|
|
27
|
+
window.addEventListener("load", () => {
|
|
28
|
+
const canvas = document.getElementById("game");
|
|
29
|
+
const game = new BezierDemoGame(canvas);
|
|
30
|
+
game.start();
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
|
|
35
|
+
</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 Signature</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>Bezier Signature</strong> — A <code>BezierShape</code> receives an array of path commands and draws them as a
|
|
15
|
+
bezier curve. This can be done all frames at once or they can be iterated over time, like a signature animation.
|
|
16
|
+
</div>
|
|
17
|
+
<canvas id="game"></canvas>
|
|
18
|
+
<script type="module">
|
|
19
|
+
import { MyGame } from './js/beziersignature.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>
|
|
@@ -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>Black Hole - Cinematic Visualization</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>Black Hole</strong> — Cinematic accretion disk visualization.<br/>
|
|
15
|
+
<span style="color:#CCC">
|
|
16
|
+
<li><code>Gravitational Lensing</code> — Light bends around the hole.</li>
|
|
17
|
+
<li><code>Accretion Disk</code> — 2500 particles with heat gradient.</li>
|
|
18
|
+
<li><code>Doppler Beaming</code> — Approaching side brighter.</li>
|
|
19
|
+
<li><code>Hawking Radiation</code> — Rare cyan quantum escapes.</li>
|
|
20
|
+
<li><code>Drag</code> — Orbit the camera around.</li>
|
|
21
|
+
<li><code>Auto-rotate</code> — Slow orbit when idle.</li>
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<canvas id="game"></canvas>
|
|
25
|
+
<script type="module" src="./js/blackhole/index.js"></script>
|
|
26
|
+
</body>
|
|
27
|
+
|
|
28
|
+
</html>
|
package/dist/blob.html
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
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>Blob Feeder</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>Blob Feeder</strong> — A Tamagotchi-style micro-game where you keep your blob alive by collecting food!<br>
|
|
15
|
+
<span style="color:#CCC">
|
|
16
|
+
<li>Guide the blob with your mouse/touch to collect shapes</li>
|
|
17
|
+
<li>Each level = one musical scale (do-re-mi), longer scales as you progress</li>
|
|
18
|
+
<li>Pick up items quickly for speed bonuses (up to 2x points)</li>
|
|
19
|
+
<li>Don't let your blob go hungry - it will shrink and lose points!</li>
|
|
20
|
+
<li>Watch the blob's face - it shows mood based on hunger and energy</li>
|
|
21
|
+
</span>
|
|
22
|
+
</div>
|
|
23
|
+
<canvas id="game"></canvas>
|
|
24
|
+
<script type="module">
|
|
25
|
+
import { BezierBlobGame } from './js/blob.js';
|
|
26
|
+
|
|
27
|
+
window.addEventListener("load", () => {
|
|
28
|
+
const canvas = document.getElementById("game");
|
|
29
|
+
const game = new BezierBlobGame(canvas);
|
|
30
|
+
game.start();
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
|
|
35
|
+
</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>Clifford Attractor 2D</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>Clifford Attractor</strong><br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>x_{n+1} = sin(a·y_n) + c·cos(a·x_n)</li>
|
|
15
|
+
<li>y_{n+1} = sin(b·x_n) + d·cos(b·y_n)</li>
|
|
16
|
+
<li>a=-1.4, b=1.6, c=1.0, d=0.7</li>
|
|
17
|
+
<li>2D iterative fractal pattern</li>
|
|
18
|
+
<li>Scroll/pinch to zoom</li>
|
|
19
|
+
<li>Double-click to reset</li>
|
|
20
|
+
</span>
|
|
21
|
+
</div>
|
|
22
|
+
<canvas id="game"></canvas>
|
|
23
|
+
<script type="module" src="./js/clifford.js"></script>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
package/dist/cmb.html
ADDED
|
@@ -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>Cosmic Microwave Background</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>Cosmic Microwave Background</strong> — 3D visualization of CMB temperature fluctuations.<br/>
|
|
13
|
+
<span style="color:#CCC">
|
|
14
|
+
<li>Particles represent temperature anisotropies from the early universe</li>
|
|
15
|
+
<li>Colors: Blue (cold spots) → Red (hot spots)</li>
|
|
16
|
+
<li>Drag to rotate, scroll to zoom</li>
|
|
17
|
+
<li>WebGL GPU-accelerated particle rendering</li>
|
|
18
|
+
<li>Physics: particles drift with thermal motion</li>
|
|
19
|
+
</span>
|
|
20
|
+
</div>
|
|
21
|
+
<canvas id="game"></canvas>
|
|
22
|
+
<script type="module" src="./js/cmb.js"></script>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|