<!DOCTYPE html>
<html lang="en">
<head>
<script src="/content/b6a50f5ba932b0ea7f652d9d28e59eced47bc6f8376c25e02d8b3457bb60ac8fi0"></script>
<style>
html, body { margin: 0; padding: 0; }
canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>
<meta charset="utf-8" />
</head>
<body>
<script>
let resetInterval = 10000; // Time in milliseconds to reset drawing
let startDrawing = false;
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
startDrawingProcess();
}
function draw() {
if (startDrawing) {
if (frameCount % (resetInterval / frameRate()) === 1) {
background(0);
}
let progress = (frameCount % (resetInterval / frameRate())) / (resetInterval / frameRate());
let totalLines = 7;
let lineIndex = floor(progress * totalLines);
let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'];
if (frameCount % (resetInterval / frameRate()) === 0) {
clear(); // Clear the canvas
background(0); // Reset background color
}
if (lineIndex < colors.length) {
let initialVariance = 0.005;
let initialRandomness = 0.0005;
let varianceIncrement = 0.001;
let randomnessIncrement = 0.0001;
drawWavyLine(colors[lineIndex], 2, initialVariance + varianceIncrement * lineIndex, initialRandomness + randomnessIncrement * lineIndex);
}
}
}
function drawWavyLine(lineColor, strokeWeightValue, variance, randomness) {
stroke(lineColor);
strokeWeight(strokeWeightValue);
noFill();
beginShape();
for (let x = 0; x < width; x += 1) {
let y = noise(x * variance, millis() * randomness) * height;
vertex(x, y);
}
endShape();
}
function startDrawingProcess() {
let initialVariance = 0.005;
let initialRandomness = 0.0005;
let varianceIncrement = 0.001;
let randomnessIncrement = 0.0001;
let colors = ['red', 'orange', 'yellow', 'green'];
for (let i = 0; i < 4; i++) {
drawWavyLine(colors[i], 2, initialVariance + varianceIncrement * i, initialRandomness + randomnessIncrement * i);
}
// Start drawing after initial setup
startDrawing = true;
setInterval(() => {
frameCount = 0; // Reset frame count to restart the drawing cycle
background(0); // Clear with background color
for (let i = 0; i < 4; i++) {
drawWavyLine(colors[i], 2, initialVariance + varianceIncrement * i, initialRandomness + randomnessIncrement * i);
}
}, resetInterval);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>