Array of Lines that move different to each other Perlin Noise

p5.js Coding Questions
5

Thanks Again. Ive added a var to add a number that adds 1 each time the line is drawn called this.count. The lines are all different. Only the animation isn’t smooth like in my Processing sketch which makes it feel very jumpy. I’m presuming this is because this.x returns to 0 once the loop is complete. Not sure how to fix that but there you go.

Ive added the code to show how Ive changed the sketch.

Cheers.

var lineCount = 15;

var lines = [];

var l1;

function setup() {
createCanvas(720, 720);

for (var i = 0; i < lineCount; i++) {
lines[i] = new Lines(i, 0.05, i, 255, 0, 100, 100);

}
}

function draw () {
background(0);
translate(height/2, width/2);
for (var i = 0; i < lineCount; i++) {
lines[i].display();
}
}

function Lines( _rot, _inc, _count, _r, _g, _b, _a) {

this.rot = _rot;
this.inc = _inc;
this.count = _count;

this.r = _r;
this.g = _g;
this.b = _b;
this.a = _a;

this.yoff = 0.0;
}

Lines.prototype.display = function() {
rotate(this.rot);
strokeWeight(2);
noFill();
this.c = color(this.r, this.g, this.b, this.a);
stroke(this.c);
push();
beginShape();
this.xoff = 0.0;
for(this.x = 50; this.x < 200; this.x += 10){
this.y = map(noise(this.count + this.xoff, this.yoff), 0, 1, 0, 150);
vertex(this.x, this.y);
this.xoff += this.inc;
}
endShape();
pop();
this.yoff += 0.01;
}