Draw rows of squares pattern

Processing Coding Questions
1

This code is supposed to be drawing the attached pattern, but is only drawing one square.

processing%20pattern
processing pattern.jpg2880×1800 682 KB
. does anyone know what I need to add/ what I’m doing wrong? Thank you!

int X_coordinate=150;
int y_coordinate=200;

void changeX() {
  X_coordinate= X_coordinate + 30;
}
void changeY() {
  y_coordinate= y_coordinate - 30;
}
void drawingRectangle() {
  rect(150, 200, 20, 20);
}
void setup () {
  size(600, 400);
  background(255, 255, 255);
}
void draw() {
  int numberOfRows=6;
  drawPattern(numberOfRows);
  noLoop();
}
void drawPattern(int rows) {
  for (int i = 0; i<rows; i++) {
    for (int j= 0; j<i; j++) {
      drawingRectangle();
      changeX();
    }
    changeY();
    // something
    changeX();
  }
}
2

Your drawrectangle method is not valid. Either use rect(x,y,w,h) or define a method called void drawrectangle().

1 Like
3

i just tried that and it still only printed one box. Is it something with my for loop?

4

Where is your drawingRectangle() function drawing the rectangle?
Does that position ever change?
If it doesn’t change, all the rectangles are drawn in the same place.

Your sketch has… other issues… but the main concern is that all your rectangles are always being drawn in the same place, no matter what values are stored in any variables…

2 Likes
5

Please format your Code with Str+T/Ctrl+T in processing and </> in here. And to add to what TfGuy44 said, you are drawing all your rects in one place, so they are all there, just in the exact Same place. If you want to change this, you should give rect variables as Input, not direct numbers. Also, you could probably save a lot of trouble by just using i and j as positions and multiplying them by your desired size and Offset.

1 Like
6

thank you for your help! I’ll look into that

7

Thank you! I don’t know what the you mean by formatting it differently, but I changed my code to this:

int X_coordinate = 1;
int Y_coordinate = 1;

void changeX() {

  X_coordinate= X_coordinate + 30;
}

void changeY() {
  Y_coordinate = Y_coordinate + 30;
}

void setup () {
  size(1000, 600);
  background(255, 255, 255);
}

void draw() {
  int numberOfRows=6;
  drawPattern(numberOfRows);
  noLoop();
}
void drawPattern(int numberOfRows) {
  for (int i = 0; i<numberOfRows; i++) {
    for (int j= 0; j<i; j++) {
      for (int k =0; k<4; k++) {
        rect (X_coordinate, Y_coordinate, 20, 20);
      }
      changeX();
    }

    changeY();
    changeX();
    {
    }
  }
}

and it is producing what I have attached. I dont know what I need to do to make my squares go back to the starting place.

squares%20processing
squares processing.jpg2880×1800 611 KB

8

By formatting i mean, make the code readable in the Post. Just add the code inside this :
/```

/```
Just without /. You can get this by pressing </> in the top Selection When you write a comment.

And to get the right pattern, you just Need 2 Loops. In one you have to iterate over the rows you want, and in the one inside you Need to set the number of times it has to iterate to the current iteration of the first loop.

1 Like
9

Ohh, got it! Thank you so much for your help!

10

You‘re welcome :blush:

11

Please edit your previous posts to format your code, it is not readable as is.

Regarding your problem, you just need to change one line of your code to get the desired effect.

Just after changing the Y position -> meaning that you are changing the line, you need to set your X position to the initial value (aka 1). It is as simple as that. Almost there!