html, body {
margin: 0;
padding: 0;
text-align: center;
}
function setup() {
createCanvas(250, 250);
rectMode(CENTER)
background(sin(frameCount * 0.01) * 255);
}
function draw() {
noFill()
translate(width / 2, height / 2);
for (let i = 0; i <= height; i++) {
let interpolate = map(i, 0, height / (sin(frameCount * 0.025) * 8), 0, 1); //8
push();
let rVal = abs(sin(frameCount * 0.01) * 0);
let gVal = 0;
let lerpC = lerpColor(
color(abs(sin(frameCount * 0.01) * 255), 255),
color(rVal, gVal, abs(sin(frameCount * 0.01) * 255)),
interpolate
);
stroke(lerpC);
rect(-width / (sin(frameCount * 0.01) * 2), i, width * 1.5, i / 2);
rect(-width / (sin(frameCount * 0.01) * 2), -i, width * 1.5, -i / 2);
pop();
push();
if ((frameCount / 25) % 10 == 0) {
rVal = 255//abs(sin(frameCount * 0.1)) * 0//255
gVal = 255;
lerpC = lerpColor(
color(abs(sin(frameCount * 0.01)) * 255, 100),
color(gVal, rVal, abs(sin(frameCount * 0.01) * 255)),
interpolate
);
stroke(lerpC);
// line(-width / (sin(frameCount * 0.01) * 2), i, width * 1.125, i / 2);
// line(-width / (sin(frameCount * 0.01) * 2), -i, width * 1.125, -i / 2);
}
pop();
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.