48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<html>
|
|
<head> </head>
|
|
<body>
|
|
<canvas id="mainCanvas" width="500" height="500"></canvas>
|
|
<script type="module">
|
|
import {
|
|
artworld,
|
|
Color,
|
|
Pico8,
|
|
Group,
|
|
Rect,
|
|
Random,
|
|
Vector2,
|
|
Line,
|
|
Circle,
|
|
Var,
|
|
degToRad,
|
|
} from "../artworld/index.js";
|
|
artworld.bindCanvas("mainCanvas");
|
|
window.artworld = artworld;
|
|
|
|
// declare some time-fluctuation variables
|
|
let color = new Var(
|
|
(t) =>
|
|
[Pico8.RED, Pico8.ORANGE, Pico8.GREEN, Pico8.BLUE][
|
|
Math.floor(t / 60) % 4
|
|
],
|
|
);
|
|
let outerR = new Var((t) => Math.sin(t / 100) * 50 + 200);
|
|
// simple dependency
|
|
let innerR = new Var(() => outerR.getValue() - 10);
|
|
// example of a more complex Var that uses other vars
|
|
let lineTo = new Var((t) => {
|
|
let angle = (t / 6000) * Math.PI * 2;
|
|
return Vector2.polar(innerR.getValue(), angle);
|
|
});
|
|
|
|
let g = new Group().pos(new Vector2(250, 250));
|
|
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);
|
|
|
|
artworld.loopStep();
|
|
</script>
|
|
</body>
|
|
</html>
|