# Make object array move as one unit

**URL:** <https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994>\
**Category:** Coding Questions\
**Created:** [November 30, 2019, 7:27pm UTC](https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994 "2019-11-30T19:27:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![samm](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@samm](https://discourse.processing.org/u/samm)\
**Post date:** [November 30, 2019, 7:27pm UTC](https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994/1 "2019-11-30T19:27:29Z")

</div>

I am fairly new to P5.js and am trying to make an entity of lines move around the screen and rotate (like a twirling motion). I have the array of lines created but I can’t figure out how to make a statement that will apply to all of them as one unit. Also, as a side note, I have set the x1, x2, y1, y2 to loop and increase or decrease to create movement but as the program runs, the lines grow apart (as they keep adding which expands the location parameters). Is there a way to set a boundary? I attempted to set a boundary (commented out in the move section) but it didn’t work. I’m afraid that with my limited knowledge so far, I don’t know of any solutions, but I would love to learn.

My code so far:

```auto
let bubbles = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  for (let i = 0; i < 30; i++) {
    bubbles[i] = new Bubble();
  }
}

function draw() {

  background(255, 255, 255, bc);

  for (i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].move();
  } 
}

class Bubble {
  constructor() {
    this.x1 = random(-150, -160);
    this.y1 = random(50, 100);
    this.x2 = random(-135, -175);
    this.y2 = 150;
    this.speed = 1;
  }

  display() {

    let r = random(100, 255);
    let g = random(0, 50);
    let b = random(0, 50);
    stroke(0);
    line(this.x1, this.y1, this.x2, this.y2);

  }

  move() {
    // if (this.x1<-150 && this.x1>-160){
    this.x1 += random(-this.speed, this.speed);
    // }
    //if (this.y1<100 && this.y1>50){
    this.y1 += random(-this.speed, this.speed);
    // }
    //if (this.x2<-135 && this.x2>-175){
    this.x2 += random(-this.speed, this.speed);
    // }
    // if (this.y2>150 && this.y2<150){
    this.y2 += random(-this.speed, this.speed);
    // }

  }

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 1, 2019, 2:43am UTC](https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994/2 "2019-12-01T02:43:08Z")

</div>

please format your code posting by pasting it into the

```auto
</> code button

```

of the editor header menu ( context name: Preformatted text )  
it looks like  
```  
type or paste code here  
```

also can use the ``` manually above and below your code.

thank you.

* * *

also when using p5.js  
it might be better just to link to your online editor project / or MVCE

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/9xCZ14SWH)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

you draw line X Y only,  
but use WEBGL renderer ( for 3D )

i show you there how to use constrain()  
but there might be other way.

but the real question might be WHY

> [@samm](#):
>
> I have set the x1, x2, y1, y2 to loop and increase or decrease to create movement but as the program runs, the lines grow apart (as they keep adding which expands the location parameters)

i think that is a tricky statistical question behind it, when you change randomly  
the 4 parameters of a line, it can walk anywhere, can grow longer or shorter…  
so limiting must not only be in X/Y canvas,  
possibly also limit min max length!

and there i recommend to change all that code to PVector

* * *

> [@samm](#):
>
> I have the array of lines created but I can’t figure out how to make a statement that will apply to all of them as one unit

possibly now want position the whole array ( of objects ) in 3D space  
use like

```auto
translate(x,y,z);

```

> **[reference | p5.js](https://p5js.org/reference/#/p5/translate)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.