Produce a pattern

Processing Coding Questions
1

How to produce a pattern from draw quad coding

2

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

3

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.

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

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

| noel
September 20 |

  • | - |

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.

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

OK, the first thing I want you to do is watching this video from Daniel. He has b.t.w. a whole series about the Processing language. You might want to watch them.

6

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

7

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.

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