# Produce a pattern

**URL:** <https://discourse.processing.org/t/produce-a-pattern/23980>\
**Category:** Coding Questions\
**Created:** [September 20, 2020, 10:43am UTC](https://discourse.processing.org/t/produce-a-pattern/23980 "2020-09-20T10:43:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Val1](https://avatars.discourse-cdn.com/v4/letter/v/e19b73/32.png) [@Val1](https://discourse.processing.org/u/Val1)\
**Post date:** [September 20, 2020, 10:43am UTC](https://discourse.processing.org/t/produce-a-pattern/23980/1 "2020-09-20T10:43:22Z")

</div>

How to produce a pattern from draw quad coding

---

<div class="post-metadata">

**Author:** ![Val1](https://avatars.discourse-cdn.com/v4/letter/v/e19b73/32.png) [@Val1](https://discourse.processing.org/u/Val1)\
**Post date:** [September 20, 2020, 10:55am UTC](https://discourse.processing.org/t/produce-a-pattern/23980/2 "2020-09-20T10:55:20Z")

</div>

I wish to produce a pattern from the following coding, which produces the fist two elements of a zig-zag pattern:-  
void setup() {  
size(600,600);  
}

void draw() {  
strokeWeight(0);  
fill(255,0,0);  
quad(0,0,36,36,36,72,0,36);  
fill(0,0,255);  
quad(36,36,72,0,72,36,36,72);  
}

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 11:43am UTC](https://discourse.processing.org/t/produce-a-pattern/23980/3 "2020-09-20T11:43:59Z")

</div>

Hi @Val1  
What do you mean by pattern? Something like this code?  
You can also draw the whole pattern in a PGraphics, and rotate, etc.

```auto
PGraphics pgr;

void setup() {
  size(600, 200);
  background(255);
  strokeWeight(0);
  pgr = createGraphics(70, 75);
  pgr.beginDraw();
  pgr.fill(255, 0, 0);
  pgr.quad(0, 0, 36, 36, 36, 72, 0, 36);
  pgr.fill(0, 0, 255);
  pgr.quad(36, 36, 72, 0, 72, 36, 36, 72);
  pgr.endDraw();
  translate(50, 0);
  for (int i = 0; i < 5; i++) {  
    image(pgr, 0, 50);
    translate(100, 0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Val1](https://avatars.discourse-cdn.com/v4/letter/v/e19b73/32.png) [@Val1](https://discourse.processing.org/u/Val1)\
**Post date:** [September 20, 2020, 7:22pm UTC](https://discourse.processing.org/t/produce-a-pattern/23980/4 "2020-09-20T19:22:21Z")

</div>

Noel,

Thank you, but what I had in mind was a pattern that covered all columns and rows of size(600,600) starting a the top left hand corner.  
As I am new to processing I was not able to modify your coding to do what I wanted. If you would be good enough to amend your code with explanations for the lines it would be most helpful.

Val1

> ![](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/45/213_2.png "noel") | [noel](https://discourse.processing.org/u/noel)  
> September 20 |
> 
> - | - |

Hi [@Val1](https://discourse.processing.org/u/val1)  
What do you mean by pattern? Something like this code?  
You can also draw the whole pattern in a PGraphics, and rotate, etc.

```auto
PGraphics pgr;

void setup() {
  size(600, 200);
  background(255);
  strokeWeight(0);
  pgr = createGraphics(70, 75);
  pgr.beginDraw();
  pgr.fill(255, 0, 0);
  pgr.quad(0, 0, 36, 36, 36, 72, 0, 36);
  pgr.fill(0, 0, 255);
  pgr.quad(36, 36, 72, 0, 72, 36, 36, 72);
  pgr.endDraw();
  translate(50, 0);
  for (int i = 0; i < 5; i++) {  
    image(pgr, 0, 50);
    translate(100, 0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 7:43pm UTC](https://discourse.processing.org/t/produce-a-pattern/23980/5 "2020-09-20T19:43:23Z")

</div>

OK, the first thing I want you to do is watching [this video](https://www.youtube.com/watch?v=TaluaAD9MKA&ab_channel=TheCodingTrain) from Daniel. He has b.t.w. a whole series about the Processing language. You might want to watch them.

---

<div class="post-metadata">

**Author:** ![Val1](https://avatars.discourse-cdn.com/v4/letter/v/e19b73/32.png) [@Val1](https://discourse.processing.org/u/Val1)\
**Post date:** [September 23, 2020, 12:57pm UTC](https://discourse.processing.org/t/produce-a-pattern/23980/6 "2020-09-23T12:57:35Z")

</div>

noel I am not able to get the coding I require from Daniel’s examples. I have played with your coding,but still cannot produce a full page pattern starting at 0,0. I would be pleased to have your further help, please?

Val1

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 23, 2020, 1:50pm UTC](https://discourse.processing.org/t/produce-a-pattern/23980/7 "2020-09-23T13:50:50Z")

</div>

Ok, but did you learn to work with PGraphics?  
You can use a PShape as well. I would do it with vertexes to make a base image for the pattern, and just deal with one shape instead of two quad shapes. But since you already constructed your quad’s we can group them together as one, and place them on the screen with coordinates in two combined loops.  
See if you understand this code, and also try to make one shape with vertexes.

```auto
PShape group_shape;

void setup() {
  size(574, 574);
  background(255);
  
  // Make a group PShape
  group_shape = createShape(GROUP);

  // Make two quad shapes
  fill(255, 0, 0);
  PShape quad_1 = createShape(QUAD, 0, 0, 36, 36, 36, 72, 0, 36);
  fill(0, 0, 255);
  PShape quad_2 = createShape(QUAD, 36, 36, 72, 0, 72, 36, 36, 72);

  // Add the two quad shapes as children to the group
  group_shape.addChild(quad_1);
  group_shape.addChild(quad_2);

  // Draw the group on screen with a loop,
  // to place them as a pattern with individual x and y values each
  for (int x = 0; x < width; x = x+100) {
    for (int y = 0; y < width; y = y+100) {
      shape(group_shape, x, y);
    }
  }
}

```