# Display grid of objects (animated circles)

**URL:** <https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927>\
**Category:** Coding Questions\
**Created:** [October 9, 2023, 8:22am UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927 "2023-10-09T08:22:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [October 9, 2023, 8:22am UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/1 "2023-10-09T08:22:23Z")

</div>

Hi everyone,

I know that this is a frequent and simple question but I haven’t been able to find a solution for what I’d like to do.

I’m creating an object made of circles. In the class I have a function that modifies the x and y locations of the circles to make a “spinning spiral like” object.

I then initialize an array of objects in setup().  
I’d like now to display several of them as a grid. I can’t figure out how to do it. I either manage to display all my objects at the same location on the canvas or to display only one of them.

What’s missing in my code?

Thank you in advance!

The example below displays one object:

```auto
let b = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  
  for (let i = 0; i<10; i++){
    b.push(new B(i));
  }
}
function draw() {
  
  background(0);
  
    for (let i = 0; i < b.length; i++) {
    b[i].m();
    b[i].s();
  }
}

class B {
  constructor(x,y) {
    this.x = x;
    this.y = y;
    this.t = 100;
    this.speed = 0.08;
    this.rad = 10;
    }
  
  s() {
    noFill();
    stroke(255, 80);
    circle(this.x, this.y, 100); 
  }

  m() {
    this.x = this.rad * cos(this.t);
    this.y = this.rad * sin(this.t);
    this.v = 0.01;
    rotate((this.v += 1));
    this.t += this.speed;
    rotateZ(5);
      }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2023, 8:50am UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/2 "2023-10-09T08:50:42Z")

</div>

```auto
let b = [];

function setup() {
  createCanvas(600, 600, WEBGL);

  for (let i = 0; i < 10; i++) {
    b.push(new B(133, 133));
  }
}

function draw() {
  background(0);
  translate(-300, -200);
  for (let x = 0; x < 3; x++) {
    translate(130, 0);
    push();
    for (let y = 0; y < 3; y++) {
      translate(0, 130);
      push();
      for (let i = 0; i < b.length; i++) {
        //
        b[i].m();
        b[i].display();
        //
      }
      pop();
    }
    pop();
  }
}

// ================================================================

class B {
  //
  constructor(x, y) {
    let x1 = 0;
    let y1 = 0;
    this.x = x;
    this.y = y;
    this.t = 100;
    this.speed = 0.08;
    this.rad = 10;
  }

  display() {
    noFill();
    stroke(255, 80);
    circle(this.x, this.y, 100);
  }

  m() {
    this.x = this.rad * cos(this.t);
    this.y = this.rad * sin(this.t);
    this.v = 0.01;
    rotate((this.v += 1));
    this.t += this.speed;
    rotateZ(5);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [October 9, 2023, 9:06am UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/3 "2023-10-09T09:06:46Z")

</div>

> [@Chrisir](#):
>
> ```auto
> et b = [];
> 
> function setup() {
> createCanvas(600, 600, WEBGL);
> 
> for (let i = 0; i < 10; i++) {
> b.push(new B(133, 133));
> }
> }
> 
> function draw() {
> background(0);
> translate(-300, -200);
> for (let x = 0; x < 3; x++) {
> translate(130, 0);
> push();
> for (let y = 0; y < 3; y++) {
> translate(0, 130);
> push();
> for (let i = 0; i < b.length; i++) {
> //
> b[i].m();
> b[i].display();
> //
> }
> pop();
> }
> pop();
> }
> }
> 
> // ================================================================
> 
> class B {
> //
> constructor(x, y) {
> let x1 = 0;
> let y1 = 0;
> this.x = x;
> this.y = y;
> this.t = 100;
> this.speed = 0.08;
> this.rad = 10;
> }
> 
> display() {
> noFill();
> stroke(255, 80);
> circle(this.x, this.y, 100);
> }
> 
> m() {
> this.x = this.rad * cos(this.t);
> this.y = this.rad * sin(this.t);
> this.v = 0.01;
> rotate((this.v += 1));
> this.t += this.speed;
> rotateZ(5);
> }
> }
> //
> 
> ```

Thank you!

I need to study your code step by step to understand your use of translate(), push() and pop(). These are functions I don’t master yet.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2023, 11:00am UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/4 "2023-10-09T11:00:57Z")

</div>

new version

unfortunately with a vibration I couldn’t get rid of

```auto
let b = [];
let angleY = 0;

function setup() {
  createCanvas(600, 600, WEBGL);

  for (let i = 0; i < 10; i++) {
    b.push(new Circle(0, 0));
  }
}
function draw() {
  background(0);

  rotateY((angleY += 0.0201));

  for (let x = 0; x < 3; x++) {
    for (let y = 0; y < 3; y++) {
      push();
      translate(x * 130, y * 130);
      showOneCircleGroup();
      pop();
    }
  }
}

function showOneCircleGroup() {
  for (let i = 0; i < b.length; i++) {
    b[i].calc();
    b[i].display();
    // b[i].reset();
  }
  for (let i = 0; i < b.length; i++) {
    b[i].reset();
  }
}

// =================================================

class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.t = 100;
    this.speed = 0.08;
    this.rad = 10;
  }

  display() {
    noFill();
    stroke(255, 80);
    rotate((this.v += 1));
    rotateZ(5);
    circle(this.x, this.y, 100);
  }

  calc() {
    this.x = this.rad * cos(this.t);
    this.y = this.rad * sin(this.t);
    this.t += this.speed;
    this.v = 0.01;
  }

  reset() {
    //this.t=100;
    //this.v = 0.01;
    // this.t = 100;
    this.speed = 0.08;
    this.rad = 10;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 9, 2023, 1:15pm UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/5 "2023-10-09T13:15:33Z")

</div>

Hello @Alesk1969,

Very cool effect!

Scrutinize this code:

```auto
let b = [];

function setup() {
  createCanvas(600, 200, WEBGL);
  
  numCircles = 7;
  sp = 0.1/numCircles; // Set speed proportioanal to number of circles 
  
  for (let i = 0; i<10; i++){
    b.push(new B(0, 0, sp)); // Set initial speed!
  }
}
function draw() {
  background(0);
  
  for(let j=0; j<numCircles; j++)
    {
    push();
    translate(100*j-width/2, 0);
    
    for (let i = 0; i < b.length; i++) {
      //rotate(6.01);
      b[i].m();
      b[i].s();
      rotate(6.01);
    }
    pop();
    }    
}

class B {
  constructor(x, y, sp) {
    this.x = x;
    this.y = y;
    this.t = 100;
    this.speed = sp;
    this.rad = 10;
    }
  
  s() {
    noFill();
    stroke(255, 80);
    circle(this.x, this.y, 100); 
  }

  m() {
    this.x = this.rad * cos(this.t);
    this.y = this.rad * sin(this.t);
    this.t += this.speed;
  }
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/c/bc80d5b983a44936662601405cf5f5501cda8848.png)

Notes:

```auto
this.v = 0.01;
rotate((this.v += 1));
rotateZ(5);

```

Can be simplified to:

`rotateZ(6.01);`

You are applying rotations to objects and this does not need to be part of your class.

The speed needs to be adjusted and proportional to the number of circles.  
Give some thought to this… it will come to you! 🙂

Now you can work on a grid.

Have fun!

References:  
[learn | p5.js](https://p5js.org/learn/) \< Coordinates and Transformations is in there!

`:)`

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [October 9, 2023, 3:48pm UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927/6 "2023-10-09T15:48:42Z")

</div>

Brillant! Thank you very much for your answers and the references @Chrisir, @glv! 🙂