Animating a rectangle

Processing Coding Questions
1

Hey everyone! I’m new to processing and learning how to play around with figures. Right now I’m trying to animate the movement of a rectangle. My idea is that the rectangle should move from current position to the clicked position (only in x axis, to keep things simple) in discreet, equally sized steps. For example if the current position of my rectangle is (250, 250) and I click on location (500, 400), then I should be able to see the rectangle move to (275, 250), then to (300, 250), then to (325, 250) and so on, until it reaches (500, 250). However, I’m having difficulty articulating this idea into code. This is what I have so far:

int pX = 50;
int pY = 250;
int positions[];
void setup(){
  size(500, 500);
  
}

void draw(){
  background(192);
  update();
  //drawMe();
  
}

void update(){
  int oldX = pX;
  int newX = -1;
  if(mousePressed){
    newX = mouseX;
  }
  if(newX > -1){
    int step = (newX - oldX) / 10;
    for (int i = 0; i < 10; i++){
      drawMe( oldX + (i * step));      
    }
  }
  
}

void drawMe(int pX){
  rectMode(CENTER);
  rect(pX, pY, 50, 50);
}

My idea was to use an array of ten integers to store the individual positions on x axis. However all the rectangles just appear together as soon as I click the mouse button. My code is not doing what I want it to do. Any pointers in this regard will be much appreciated.

2

I’ve managed to solve the problem on my own. It took a little organization and some sketching on paper to figure out coordinates plus I read the reference docs for the functions I was using. Here’s the code, for anyone else who comes across this problem in future:

Rectangle r1;
void setup() {
  size(500, 500);
  frameRate(10);//this is optional for the problem. i just wanted to see a slower animation
  r1 = new Rectangle();
}

void draw() {
  background(192);
  r1.update();
  r1.drawMe();
}

class Rectangle {
  int size = 100;
  int posX;
  int posY;
  int targetX;
  int targetY;
  int stepX;
  int stepY;
  int colour = 255;
  Rectangle() {
    posX = 50;
    posY = 250;
  }
  void update() {
    if (mousePressed) {
      targetX = mouseX;
      targetY = mouseY;
      stepX = (targetX - posX) / 10;
      stepY = (targetY - posY) / 10;
    }
  }

  void drawMe() {
    rectMode(CENTER);
    if (targetX > posX) {
      posX += stepX;
      if (targetX <= posX) stepX = 0;
    } else if (targetX < posX) {
      posX += stepX;
      if (targetX >= posX) stepX = 0;
    }
    if (targetY > posY) {
      posY += stepY;
      if (targetY <= posY) stepY = 0;
    } else if (targetY < posY) {
      posY += stepY;
      if (targetY >= posY) stepY = 0;
    }
    rect(posX, posY, 50, 50);
  }
}
5 Likes
3

Thanks for sharing this achievement.

Actually it’s an impressive progress you’ve made, especially since you turned to object oriented programming and used this.

Congratulations!

There is also a tutorial about objects regarding this subject that you might want to look at. It’s in the tutorials section on the website.

Also, one of the problems was your usage of the for loop for the animation. This never works since draw() only updates the screen once at its end and not throughout.

Chrisir

2 Likes