Creating a grid with a PShape

Processing Coding Questions
1

How could I turn this code into a grid? I’d appreciate any help.

int many = 10;
PShape[] a = new PShape[many];

void setup() {
  size(1680, 1005, P3D);
  make_shapes();
}

void make_shapes() {
  for (int i = 0; i < many; i++) {
    float variable = i*100;
    a[i] = createShape();
    a[i].beginShape();
    a[i].fill(0, 0, 255);
    a[i].stroke(0);
    a[i].strokeWeight(0.55);
    a[i].vertex(250+variable, 500);
    a[i].vertex(250+variable, 600);
    a[i].vertex(350+variable, 600);
    a[i].vertex(350+variable, 500);
    a[i].endShape(CLOSE);
  }
}

void draw() {
  background(0);
  for (int i = 0; i < many; i++)  shape(a[i]);
}
1 Like
2

Hey There!

Just wrap the PShape in a class make an array of that and your good to go ( Kind of ) have a looka classes. And objects !

Have Fun !

3

I have this so far, but not sure why the for loop is not working:

Shape myShape1;

void setup() {
  size(1000,1000, P3D);
  // Parameters go inside the parentheses when the object is constructed.
   for(int x = 350; x < width; x = x + 100){
    for(int y = 600; y < height; y = y + 100){
      myShape1 = new Shape(color(255, 0, 0), x, y, 0);
    }
  }
}


void draw(){
  background(0);
  myShape1.display();
}


class Shape {
  color c;
  float xpos;
  float ypos;
  float zpos;
  
  
  Shape(color tempC, float tempXpos, float tempYpos, float tempZpos){
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    zpos = tempZpos;
  }
  
  void display(){
    PShape a;
  a = createShape();
  a.beginShape();
  a.stroke(255);
  a.strokeWeight(0.50);
  a.vertex(250, 500);
  a.vertex(250, 600);
  a.vertex(350, 600);
  a.vertex(350, 500);
  a.endShape(CLOSE);
  
  shape(a, 25, 25);
}
}
1 Like
4

This must be an array that you fill in setup ()

Then in draw use a for loop over the array

5

also it does not make sense to make the shape ( esp as it is same )
at draw ( 60 times per sec ) and at every element of the grid array.

you can make one shape ( at setup ) and call it from class.display
or create it in the class ( so each element can look different )
but at creation of array ( also setup ) and NOT at draw.

example 
int x=10, y=x, w=80, h=w, off=10, grid=5, many=grid*grid;

Shape[] myGrid = new Shape[many];

void setup() {
  size(1000, 1000);
  for ( int i =0; i< myGrid.length; i++ )   myGrid[i] = new Shape( color(255, random(255), 0), w, h, x+(i%grid)*( w+off), y+(floor(i/grid))*(h+off) );
}

void draw() {
  background(0);
  for ( int i =0; i< myGrid.length; i++ ) myGrid[i].display();
}

class Shape {
  color c;
  float xpos, ypos, w, h;
  PShape a;

  Shape(color tC, float tw, float th, float tXpos, float tYpos) {
    c = tC;
    w=tw;
    h=th;
    xpos = tXpos;
    ypos = tYpos;

    a = createShape();
    a.beginShape();
    a.stroke(255);
    a.strokeWeight(0.50);
    a.vertex(0, 0);
    a.vertex(0, h);
    a.vertex(w, h);
    a.vertex(w, 0);
    a.endShape(CLOSE);
  }

  void display() {
    a.setFill(c);
    shape(a, xpos, ypos);
  }
}

your FOR loop does create many rect shapes,
but as it not uses the provided xpos/ypos
all are drawn at same position.

2 Likes
6

That’s totally wrong and I don’t understand why you provided a full code solution. The nested for loop is more elegant than your solution.

The position was okay but the array was missing as I already have said

7

@Chrisir, please check again.

also please read prior topic:
Indexing a for loop where i tried already to
show the purpose of prepared shapes
so i was thinking there is need to show again,
what should be done at setup, and what at draw,
that is what my example is for, and yes, it also shows other things,
like coding styles … GRID math …

1 Like
8

Of course not working. As others have posted, there must be an array of Shape for holding a bunch of shapes

what the code does right now is creating a shape and overwritten by the next shape, eventually you will get a single last shape that was created.

One thing, do you need the block of grid manually created by hand? like a.vertex(..., ...) thing? easiest way to create grid (consist of rectangle) is giving the createShape() some parameters. Based on createShape() / Reference / Processing.org you can pass parameters to create a rectangle

createShape(kind, p)
kind int: either POINT, LINE, TRIANGLE, QUAD, RECT, ELLIPSE, ARC, BOX, SPHERE
p float: parameters that match the kind of shape

yes, you can create a rectangle easier by passing RECT and its parameter so you don’t need a class of shape! also you can set its property individually like fill and stroke
PShape a = createShape(RECT, x, y, w, h);

PShape[] myShapes;
int w = 100;
int h = 100;

void setup() {
  size(1000, 1000, P2D);
  int cw = width/w;
  int ch = height/h;
  myShapes = new PShape[cw*ch];

  for (int x = 0; x < cw; x++) {
    for (int y = 0; y < ch; y++) {
      int index = x + y * cw; //convert 2d array to 1d array
      PShape a = createShape(RECT, x * w, y * h, w, h); 
      color c = color(255, random(255),0);
      a.setFill(c);
      myShapes[index] = a;
    }
  }
}

void draw() {
  background(0);
  for (PShape s : myShapes) {
    shape(s);
  }
}
4 Likes
9

The statements above can be refactored like this: :wink:

fill(255, random(256), 0);
myShapes[index] = createShape(RECT, x * w, y * h, w, h);
3 Likes
10

Are you sure? Would the color be attached to the shape permanently? Because we define the array and use it only later in draw()?

11

Newly-created shapes default for the canvas’ current styles. Like fill(), stroke(), etc. :sunglasses:

4 Likes
12

woah great! i don’t even realized it can be done that way, thank you for correction :smiley:

1 Like
13

Whenever calculating grids I’d refrain from using integers (w, h, cw, and ch in this case) for position calculations. In this situation it works since all numbers and outcomes are whole numbers (1000 / 100 = 10), but once that isn’t the case the grid will break and end up looking incorrect. Whenever you divide the width or height by an integer, the outcome will be rounded to a whole number.

In my experience floats yield better grid results when working with ‘odd’ window sizes, such as the 1005 pixel height thedurf18 is working with.

2 Likes