<html>
<body>
</body>
</html>
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const fr = 29;
const lfo = new LFO(1, 3, 1);
function LFO(min, max, step = 1) {
const damp = 0.0137;
this.max = max;
this.min = min;
this.step = step;
this.run = () => {
return (
this.min + this.max * Math.sin(radians(Math.PI * frameCount * (this.step * damp)))
);
};
}
function drawShape() {
const n = lfo.run();
const gr = 1.61803;
for (let i = 1; i < 360; i += 3) {
const c1 = color(n + i % 255, n + i % 164, n + i % 64);
push();
translate(centerX, centerY);
rotate(i * gr + n);
stroke(c1);
fill(c1);
scale(n);
bezier(i, i, n, n, i, i * n, mouseX * mouseY, 0);
pop();
}
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
frameRate(fr);
smooth();
}
function draw() {
background(255, 0.25);
drawShape();
}
This Pen doesn't use any external CSS resources.