Grid of custom designs using beginShape(); vertex(); endShape(CLOSE);

Processing Coding Questions
1

How do you make a grid of custom shapes like the one that follows (via Daniel Shiffman’s book “Learning Processing”)?

void setup(){
  size(800,800,P2D);
  background(255);
}

void draw(){
  stroke(0);
  translate(30, 30);
  for(int i = 0; i < 100; i++){
    beginShape();
    fill(175);
    vertex(i*20, 10 - i);
    vertex(i*20 + 15,10 + i);
    vertex(i*20 + 15,180 + i);
    vertex(i*20,180 - i);
    endShape(CLOSE);

  }
}
2

Hello @asymmetric,

Consider making a single PShape and then placing it at the co-ordinates of your grid with a nested for loop for x and y.

Example from PShape tutorial without grid:

PShape star;

void setup() {
  size(640,360,P2D);

  // First create the shape
  star = createShape();
  star.beginShape();
  // You can set fill and stroke
  star.fill(102);
  star.stroke(255);
  star.strokeWeight(2);
  // Here, we are hardcoding a series of vertices
  star.vertex(0, -50);
  star.vertex(14, -20);
  star.vertex(47, -15);
  star.vertex(23, 7);
  star.vertex(29, 40);
  star.vertex(0, 25);
  star.vertex(-29, 40);
  star.vertex(-23, 7);
  star.vertex(-47, -15);
  star.vertex(-14, -20);
  star.endShape(CLOSE);
}

// glv added:
void draw()
  {
  float x = random(width);
  float y = random(height);
  shape(star, x, y);
  }

Start with just a grid of circles (or other shape) for now and then replace circle with your custom shape.

References:
https://processing.org/tutorials/pshape
https://processing.org/reference/PShape.html

:)

3

Thank you @glv! My question is how to execute the for loop to create an organized grid pattern from a custom vertex shape.

4 
  for( int star.x = 0, star.x < 100; star.x ++);
    for(int star.y = 0; star.y < 100; star.y++);

Can I do something like the above?

5

Or…

void draw(){
  for( int x = 0; x > 100; x++);
    for (int y = 0; y > 100; y ++);
  shape(star, x, y);
  
}
6

Hi @glv! I figured out how to create a for-loop structure with circles, but there is a disconnect when it comes to making a for-loop grid system with the custom shapes such as vertexes.

(Grid system via Time Rodenbroeker)

void setup(){
  size(900,900);
}

void draw(){ 
  background(0);
  fill(#f1f1f1);
  stroke(0);
  
  float tilesX = 100; // or mouseX;
  float tilesY = 100; // or mouseY;
  
  float tileW = width / tilesX;
  float tileH = height /tilesY;
  
  for (int x = 0; x < tilesX; x++){
    for (int y = 0; y < tilesY; y++){
      
      ellipse(x * tileW, y * tileH, tileW, tileH);
    }
  }
}
7

Hi @asymmetric,

Replace this:

With this:

shape(star, x, y); // You will have to change the x and y to match ellipse location

100 was too many cells and 10x10 worked for the size of the star shape.

With some modifications to your code in addition to above.

End result:

image
image902×939 41.3 KB

:)

8

Yay!! Your solution worked!

I have one more question… Why do the stars start to overlap when I up tileX to 20 and tileY to 20?

PShape star;

void setup() {
  size(900,900,P2D);

  // First create the shape
  star = createShape();
  star.beginShape();
  // You can set fill and stroke
  star.fill(102);
  star.stroke(255);
  star.strokeWeight(2);
  // Here, we are hardcoding a series of vertices
  star.vertex(0, -50);
  star.vertex(14, -20);
  star.vertex(47, -15);
  star.vertex(23, 7);
  star.vertex(29, 40);
  star.vertex(0, 25);
  star.vertex(-29, 40);
  star.vertex(-23, 7);
  star.vertex(-47, -15);
  star.vertex(-14, -20);
  star.endShape(CLOSE);
}


void draw(){
  background(0);
  translate(50,50);
  fill(#f1f1f1);
  stroke(0);
  
  float tilesX = 10; // or mouseX;
  float tilesY = 10; // or mouseY;
  
  float tileW = width / tilesX;
  float tileH = height /tilesY;
  
  for (int x = 0; x < tilesX; x++){
    for (int y = 0; y < tilesY; y++){
      
      //ellipse(x * tileW, y * tileH, tileW, tileH);
      shape(star, x * tileW, y * tileH);
    }
  }
}
9

The answer is in the code:

I encourage you to go through the code and comment each line.

tileW from that line of code appears to be // tile width

It often write short snippets of code and use println() to examine code and output:

image
image590×749 32 KB

The above code did not work with 0 tiles and started at 1 !

:)

1 Like