选择矩形/使其移动

Question

Relevant code:

if (pic2 == true) {

  image(imgs[1],50,375);

} else {

  image(imgs[1],50,375);
  fill(255);
  rect(tboxPos,375,picWidth,picHeight);
  fill(0);
  textAlign(LEFT);
  text("text box 2...",420,395);

}

I'm using processing 2.2 and just added following library: http://benedikt-gross.de/libraries/Ani/

I want to use this for some kind of animation(my "rect" should slide from one side to the other. Ani seems to provide an easy solution to this, however I need to specify the "rect", so it doesn't select the image or text. Can this be done, by using Ani.to(this, ......), or do I have to specify it in another way?

I have to do this with several rectangles as well.

Thank you in advance.

Answer 1

Step one : Store whatever you want to move in variables. For a rectangle, that's probably just the x and y values, and maybe the width and height :

float rectX = 25;
float rectY = 50;
float rectWidth = 10;
float rectHeight = 20;

Step two : Use those variables to draw your rect:

void draw(){
   background(0);
   rect(rectX, rectY, rectWidth, rectHeight);
}

Step three: Modify those variables to move your rect. You could use the Ani library to do that:

void setup(){
   Ani.init(this);
}
void mouseReleased(){
   Ani.to(this, 1.5, "rectX", mouseX);
   Ani.to(this, 1.5, "rectY", mouseY);
}

Note that there are many other ways to animate stuff, and you should probably get a better grasp of the basics before you try using a library like Ani. Here is a tutorial that I wrote on basic animation in Processing.

Step four : Repeat those steps for whatever other objects you want to animate. An image will be similar to a rectangle.