How would I draw 4 squares in a vertical stack move back and forth?

问题

How would I draw 4 squares in a vertical stack move back and forth using a loop to avoid repeating the same code 4 times when drawing 4 squares. The squares should move as one and when any of them hit the edge of the window, all of them change direction.

float location;
float sizeWidth;
float sizeHeight;
float direction;
boolean moving;

void setup() {
  size (1280, 720);
  location = 0;
  direction = height/720;
  sizeWidth = 90;
  sizeHeight = 90;
  moving = true;
}

void draw() {

  background(255);

  stroke(0);
  strokeWeight(1);

  for (int i = 0; i < width; i = i + 90) {
    line(0, i, 1280, i);
    line(i, 0, i, 720);
  }

  fill (255, 147, 79);
  int steppedPos = (int)(location/sizeHeight+0.5);
  rect(0, steppedPos*sizeHeight, sizeWidth, sizeHeight);


  if (moving) {
    location = location + direction;
    if (location + sizeHeight > height || location < 0){
      direction = direction * -1;
      location = location + direction;
    }
  }
}



void keyPressed() {
  if (key == ' ') {
    moving = !moving;
  }
}

回答1:

Create a class Square rather than the single variables location, sizeWidth, sizeHeight and direction:

class Square {
    float locationX;
    float locationY;
    float sizeWidth;
    float sizeHeight;
    float direction;
    color col;

    Square(float x, float y, float w, float h, float d, color c) {
        locationX = x;
        locationY = y;
        sizeWidth = w;
        sizeHeight = h;
        direction = d;
        col = c;
    }

    // [...]
}

Add an array variable for the squares:

Square squares[];

Create the squares in a for-loop:

void setup() {
    // [...]

    squares = new Square[4];
    for (int i = 0; i < squares.length; ++i ) {
        squares[i] = new Square(i*90, 0, 90, 90, height/720, color(255, 147, 79));
    }
}

Add a method which can draw a Square object:

class Square {
    // [...]
    void Draw() {
        fill(col);
        int steppedPosX = (int)(locationX/sizeWidth+0.5);
        int steppedPosY = (int)(locationY/sizeHeight+0.5);
        rect(steppedPosX*sizeWidth, steppedPosY*sizeHeight, sizeWidth, sizeHeight);
    }
}

Draw the squares in a loop:

void draw() {
    // [...]

    for (int i = 0; i < squares.length; ++i ) {
        squares[i].Draw();
    }

    // [...]
}

Add a method which moves a Square object:

class Square {
    // [...]
    void Move() {
        locationY = locationY + direction;
        if (locationY + sizeHeight > height || locationY < 0){
            direction = direction * -1;
            locationY = locationY + direction;
        }
    }
}

Move the squares in a loop:

void draw() {
    // [...]

    if (moving) {
        for (int i = 0; i < squares.length; ++i ) {
            squares[i].Move();
        }
    }
}

See the example:

class Square {
    float locationX;
    float locationY;
    float sizeWidth;
    float sizeHeight;
    float direction;
    color col;

    Square(float x, float y, float w, float h, float d, color c) {
        locationX = x;
        locationY = y;
        sizeWidth = w;
        sizeHeight = h;
        direction = d;
        col = c;
    }

    void Draw() {
        fill(col);
        int steppedPosX = (int)(locationX/sizeWidth+0.5);
        int steppedPosY = (int)(locationY/sizeHeight+0.5);
        rect(steppedPosX*sizeWidth, steppedPosY*sizeHeight, sizeWidth, sizeHeight);
    }

    void Move() {
        locationY = locationY + direction;
        if (locationY + sizeHeight > height || locationY < 0){
            direction = direction * -1;
            locationY = locationY + direction;
        }
    }
}

boolean moving;
Square squares[];

void setup() {
    size (1280, 720);

    squares = new Square[4];
    for (int i = 0; i < squares.length; ++i ) {
        squares[i] = new Square(i*90, 0, 90, 90, height/720, color(255, 147, 79));
    }
    moving = true;
}

void draw() {

    background(255);

    stroke(0);
    strokeWeight(1);

    for (int i = 0; i < width; i = i + 90) {
        line(0, i, 1280, i);
        line(i, 0, i, 720);
    }

    for (int i = 0; i < squares.length; ++i ) {
        squares[i].Draw();
    }

    if (moving) {
        for (int i = 0; i < squares.length; ++i ) {
            squares[i].Move();
        }
    }
}

void keyPressed() {
    if (key == ' ') {
        moving = !moving;
    }
}

回答2:

Check out Monday’s lecture! We covered exactly this.

来源：https://stackoverflow.com/questions/61883587/how-would-i-draw-4-squares-in-a-vertical-stack-move-back-and-forth