# Array of Lines that move different to each other Perlin Noise

**URL:** <https://discourse.processing.org/t/array-of-lines-that-move-different-to-each-other-perlin-noise/5564>\
**Category:** Coding Questions\
**Created:** [November 15, 2018, 3:57pm UTC](https://discourse.processing.org/t/array-of-lines-that-move-different-to-each-other-perlin-noise/5564 "2018-11-15T15:57:17Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![ronantuite](https://avatars.discourse-cdn.com/v4/letter/r/58956e/32.png) [@ronantuite](https://discourse.processing.org/u/ronantuite)\
**Post date:** [November 19, 2018, 4:53pm UTC](https://discourse.processing.org/t/array-of-lines-that-move-different-to-each-other-perlin-noise/5564/5 "2018-11-19T16:53:19Z")

</div>

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;  
}

---

_[View the full topic](https://discourse.processing.org/t/array-of-lines-that-move-different-to-each-other-perlin-noise/5564)._