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();