42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import {
|
|
World,
|
|
Pico8,
|
|
Group,
|
|
Vector2,
|
|
Line,
|
|
Circle,
|
|
} 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(world);
|
|
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();
|