Disappearance of curves in the order they appear

p5.js Coding Questions
1

I have this code:

var i = 0;
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    colorMode(HSB, 255);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    background(0);
}

function draw() {
        noFill();
		var amplitud = height * (sin(i) * 0.1);
		strokeWeight(abs(sin(i))*0.5);
        var space = abs((sin(i)) * 0.001 ) * 100 + 150;
		beginShape();
		curveVertex(-space, 0);
		for (var x = 0; x < width; x += space) {
				var y = height * ((sin(i)*0.01)+0.5);
				y += sin(i - x * 0.01 + noise(i * 0.1) * -50) * amplitud;
				y += sin(i + x * 0.02) * amplitud;
				y += sin(i - x * 0.03 + noise(i * 0.1) * 50) * amplitud;
				curveVertex(x, y);
		}
		curveVertex(width, y);
		curveVertex(width + space, y);
		endShape();
		var rgb = ~~abs( sin(i) * 100) + 155;
		stroke(color(rgb, rgb, rgb, 100));
		i += 0.01;
}

Same code on codepen
I want the curves to disappear after a certain time in the order they appear. That is, the first line should disappear in 5 seconds, then the second one in 5.5 seconds and so on.

2 Likes
2

for now you are drawing to the canvas, curves after curves, on top of each other.
so you need to change to a systematic that clears the canvas and draws the curves you want to be shown.
one way would be to use a number of PGraphics into which you draw and when you have “filled” the last one, start to cycle through them again. (that will free you from managing information about the actual curves.)

Or you need to store the curve parameters in some sort of list and (again) add curve after curve then draw like only the most recent curves after some logic that you have devised.

one way or another, you need to store that information somewhere to be able to exclude the older curves from your canvas at some point.

(btw, really beautiful visual)

oh, now that I think of it.
since you create shapes. make a list of shapes (an array).
then draw all shapes from 0 to (e.g.)10
remove the first shapes while adding new one to the end of the list, after your preferred number of seconds.

3

I think you can also use background with a weak fill like

(0,10)