58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<html>
|
|
<head> </head>
|
|
<body>
|
|
<canvas id="mainCanvas" width="500" height="500"></canvas>
|
|
<script type="module">
|
|
import {
|
|
World,
|
|
Color,
|
|
Pico8,
|
|
Group,
|
|
Rect,
|
|
Random,
|
|
Vector2,
|
|
Line,
|
|
Circle,
|
|
Var,
|
|
degToRad,
|
|
} from "../artworld/index.js";
|
|
|
|
let world = new World("mainCanvas");
|
|
window.world = world;
|
|
// This is an experiment to separate the declaration of
|
|
// "what the data does" from "what it looks like".
|
|
|
|
// First we use `Var` to define "what the data does"
|
|
// variables are expected to regularly *vary*!
|
|
|
|
// Variables are defined as functions that update with time.
|
|
// It is also possible to define static variables.
|
|
let color = world.var(
|
|
(t) =>
|
|
[Pico8.RED, Pico8.ORANGE, Pico8.GREEN, Pico8.BLUE][
|
|
Math.floor(t / 60) % 4
|
|
],
|
|
);
|
|
// We can create dependencies between them: here the inner & outer
|
|
// radii should be 10 pixels apart.
|
|
let outerR = world.var((t) => Math.sin(t / 100) * 50 + 200);
|
|
let innerR = world.var(() => outerR.getValue() - 10);
|
|
// We take this composition a bit further here, the radius of the clock
|
|
// hand grows & shrinks with the edge.
|
|
let lineTo = world.var((t) => {
|
|
let angle = (t / 6000) * Math.PI * 2;
|
|
return Vector2.polar(innerR.getValue(), angle);
|
|
});
|
|
|
|
let g = new Group().pos(new Vector2(250, 250));
|
|
world.drawable(g);
|
|
new Circle(g).fill(Pico8.BLACK).z(1).radius(outerR);
|
|
new Circle(g).z(10).fill(color).radius(innerR);
|
|
new Circle(g).radius(20).fill(Pico8.BLACK).z(50);
|
|
new Line(g).to(lineTo).z(100);
|
|
|
|
world.loopStep();
|
|
</script>
|
|
</body>
|
|
</html>
|