Animation for a quadrilateral polygon assistance

Processing Coding Questions
1

Hello,

I’m interested in developing an animated loop for a quadrilateral polygon that slowly moves down vertically from its initial position to the exact position of a quadrilateral polygon of the same size. Finally, the initial quad moves up vertically to its original position, and then back down again in an infinite loop (i.e., like an unstoppable “elevator”). I don’t think keyboard or mouse functions are necessary. Here’s what I’ve designed so far:

size(700,700);
//quad(350, 400, 550, 250, 550, 450, 350, 600);
//quad(350, 400, 350, 600, 150, 450, 150, 250);
quad(350, 300, 550, 450, 350, 600, 150, 450);
quad(350, 300, 350, 100, 550, 250, 550, 450);
quad(350, 300, 150, 450, 150, 250, 350, 100);
quad(350, 100, 550, 250, 350, 400, 150, 250);

Any assistance or ideas related to animation of this project are greatly appreciated.

2

-a- you could pack it first:

PShape q1,q2,q3,q4,myshape;

void make_myshape() {
  myshape = createShape(GROUP);
  q1 = createShape(QUAD,350, 300, 550, 450, 350, 600, 150, 450);
  q2 = createShape(QUAD,350, 300, 350, 100, 550, 250, 550, 450);
  q3 = createShape(QUAD,350, 300, 150, 450, 150, 250, 350, 100);
  q4 = createShape(QUAD,350, 100, 550, 250, 350, 400, 150, 250);
  myshape .addChild(q1);
  myshape .addChild(q2);
  myshape .addChild(q3);
  myshape .addChild(q4);
}

void setup() {
  size(700, 700);
  make_myshape();
}

void draw() {
 background(200,200,0);
 shape(myshape,0,0);
}

-b- now to let it fly try:

int speed=1,posy;

void draw() {
 background(200,200,0);
 shape(myshape,0,posy);
 if ( posy > height/2 )        speed = -1;
 if ( posy < -height/2 )       speed = 1;
 posy+= speed;
}

-c- a different movement can be

int posy;
float ang,speed=0.01;

void draw() {
  background(200, 200, 0);
  shape(myshape, 0, posy);
  ang += speed;
  posy = int(100 * sin(ang));
}
1 Like
3

In addition to the “bouncing ball” approach, you could take a path-based approach.

lerp() is a simple way to animate a 1D linear path, e.g. up-down

https://processing.org/reference/lerp_.html

To get bouncing on the path, one input is a triangle wave that varies from 0-1. You can use a counter or a scaling of millis() as your x-input, the output is the y-height varying from 0 to max (and your max is 1):

float y = max - abs(x % (2*max) - max);

For more see https://stackoverflow.com/questions/1073606/is-there-a-one-line-function-that-generates-a-triangle-wave

That bounces up and down, but you can also use cos() (or sin()) on the input if you want non-linear motion – e.g. slower at the top and bottom, faster in the middle.

https://processing.org/reference/cos_.html

PVector.lerp() is a simple way to animate an arbitrary 2D linear path

https://processing.org/reference/PVector_lerp_.html

To animate along a curve, use curvePoint() (or bezierPoint()) to find the x and y separately. If you only take one dimension, then this can give an elevator that slows at the top and bottom of its arc.

https://processing.org/reference/curvePoint_.html

4

Thanks for the feedback about how to create an animated “elevator” for my project. The Processing functions are well-crafted…particularly the attention to detail.