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

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);

}
}
``````

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);
}

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.

`:)`

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

``````  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?

Or…

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

}
``````

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);
}
}
}
``````

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:

`:)`

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);
}
}
}
``````

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:

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

`:)`

1 Like