Multiple elements on one p5.Geometry()

p5.js Coding Questions
1

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:

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

2

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.

3

Hmmm… :thinking:

I previously tried:

  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 :slight_smile:

4

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.

5

I was missing that ‘let’ :unamused:

Thank you very much for spotting that!!!

6

To help others, here is my final function:

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:


  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.