# Animation for a quadrilateral polygon assistance

**URL:** <https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679>\
**Category:** Coding Questions\
**Created:** [February 24, 2019, 5:59am UTC](https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679 "2019-02-24T05:59:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NationalRex22](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NationalRex22](https://discourse.processing.org/u/NationalRex22)\
**Post date:** [February 24, 2019, 5:59am UTC](https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679/1 "2019-02-24T05:59:59Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 24, 2019, 7:11am UTC](https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679/2 "2019-02-24T07:11:26Z")

</div>

-a- you could pack it first:

```auto
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:

```auto
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

```auto
int posy;
float ang,speed=0.01;

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

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 25, 2019, 10:43pm UTC](https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679/3 "2019-02-25T22:43:27Z")

</div>

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](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](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](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](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](https://processing.org/reference/curvePoint_.html)

---

<div class="post-metadata">

**Author:** ![NationalRex22](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NationalRex22](https://discourse.processing.org/u/NationalRex22)\
**Post date:** [February 25, 2019, 11:18pm UTC](https://discourse.processing.org/t/animation-for-a-quadrilateral-polygon-assistance/8679/4 "2019-02-25T23:18:05Z")

</div>

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.