# Multiple elements on one p5.Geometry()

**URL:** <https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220>\
**Category:** Coding Questions\
**Created:** [April 8, 2022, 8:09pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220 "2022-04-08T20:09:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zjorge](https://avatars.discourse-cdn.com/v4/letter/z/9dc877/32.png) [@zjorge](https://discourse.processing.org/u/zjorge)\
**Post date:** [April 8, 2022, 8:09pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/1 "2022-04-08T20:09:25Z")

</div>

I need to build procedural geometries with `p5.Geometry` and `model()` ? I’m doing ok when it is only one element but if I need more than one I can’t `model()` an array of Geometries or each individually on a for loop. I’m not being able to combine all elements on a single geometry either. What should be the approach here?

This is how my function looks like right now:

```auto
function builder(prcels, ra, rb) {

    geo = new p5.Geometry( 1, 1,

      function setFaces() {
        for (let j=0; j< prcels.length; j++) {
          console.log(prcels[j].i)
          let b_lvl = setLevel(prcels[j].i,ra)
          let t_lvl = setLevel(prcels[j].c,rb)
          let q = b_lvl.length

          for (let m=0;m<b_lvl.length;m++) {
            let np = (m+1)%q

            this.vertices.push(
              new p5.Vector(b_lvl[m].x,b_lvl[m].y,0),
              new p5.Vector(b_lvl[np].x,b_lvl[np].y,0),
              new p5.Vector(t_lvl[m].x,t_lvl[m].y,40),
              new p5.Vector(t_lvl[np].x,t_lvl[np].y,40)
            );
            this.faces.push([m*4+0, m*4+1, m*4+2]);
            this.faces.push([m*4+2, m*4+1, m*4+3]);
          }
          this.computeNormals();
          this.gid = `brise|${j}|${ra}|${rb}`;

          console.log(this)
        }
      }
    );
}

```

At the top I declared `let geo` so it is global scope. This function loads the geometry into geo. I later call `model(geo)` to render on the canvas. So far I’m able to show the first block and 2 faces of the second block.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/2/f263c230f4606e8607f0e403d2bcd6610164f659.png)

---

<div class="post-metadata">

**Author:** ![pirela](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pirela](https://discourse.processing.org/u/pirela)\
**Post date:** [April 8, 2022, 8:26pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/2 "2022-04-08T20:26:18Z")

</div>

I’m not sure to understand your question.  
There is no pb to model several independent geometry in a for loop .  
I do that to animate a robot made of several parts: something like

> for (let part of robot) model(part.geo);

Otherwise i deal a day mixing several geometries in one , it’s a bit hard : you can add the vertices of the followers to the list but have to relocate the index of faces as vertices are no more at the same place.

---

<div class="post-metadata">

**Author:** ![zjorge](https://avatars.discourse-cdn.com/v4/letter/z/9dc877/32.png) [@zjorge](https://discourse.processing.org/u/zjorge)\
**Post date:** [April 8, 2022, 8:36pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/3 "2022-04-08T20:36:28Z")

</div>

Hmmm… 🤔

I previously tried:

```auto
  for (block of blocks) {
    model(block)
  }

```

but that was only rendering the last block. I’ll try that approach again. Maybe I was overwriting the previous geometries… but I checked the blocks array and those elements looked different.

Thanks, I’ll try this and get back to you 🙂

---

<div class="post-metadata">

**Author:** ![pirela](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pirela](https://discourse.processing.org/u/pirela)\
**Post date:** [April 8, 2022, 8:38pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/4 "2022-04-08T20:38:11Z")

</div>

You must declare a local var in your for loop :  
for (let aBlock of blocks) { model(aBlock) }.  
Probably you have a global named block and this is the one drawn.

---

<div class="post-metadata">

**Author:** ![zjorge](https://avatars.discourse-cdn.com/v4/letter/z/9dc877/32.png) [@zjorge](https://discourse.processing.org/u/zjorge)\
**Post date:** [April 8, 2022, 8:51pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/5 "2022-04-08T20:51:49Z")

</div>

I was missing that ‘let’ 😒

Thank you very much for spotting that!!!

---

<div class="post-metadata">

**Author:** ![zjorge](https://avatars.discourse-cdn.com/v4/letter/z/9dc877/32.png) [@zjorge](https://discourse.processing.org/u/zjorge)\
**Post date:** [April 8, 2022, 8:56pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220/6 "2022-04-08T20:56:42Z")

</div>

To help others, here is my final function:

```auto
function builder(prcels, ra, rb) {

    for (let j=0; j< prcels.length; j++) {

      let b_lvl = setLevel(prcels[j].i,ra)
      let t_lvl = setLevel(prcels[j].c,rb)
      let q = b_lvl.length

      let geo = new p5.Geometry( 1, 1,

      function setFaces() {

          for (let m=0;m<b_lvl.length;m++) {
            let np = (m+1)%q

            this.vertices.push(
              new p5.Vector(b_lvl[m].x,b_lvl[m].y,0),
              new p5.Vector(b_lvl[np].x,b_lvl[np].y,0),
              new p5.Vector(t_lvl[m].x,t_lvl[m].y,40),
              new p5.Vector(t_lvl[np].x,t_lvl[np].y,40)
            );
            this.faces.push([m*4+0, m*4+1, m*4+2]);
            this.faces.push([m*4+2, m*4+1, m*4+3]);
          }
          this.computeNormals();
          this.gid = `brise|${j}|${ra}|${rb}`;

        }
      );
      blocks.push(geo)
    }
}

```

…and this is how I render all blocks:

```auto

  for (let block of blocks) {
    model(block)
  }

```

Now _block_ is an array with global scope and _geo_ is declared within the function’s loop for each block.