# Morph from one position to another - animation

**URL:** <https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112>\
**Category:** Coding Questions\
**Created:** [May 20, 2020, 7:53pm UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112 "2020-05-20T19:53:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkk16](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rkk16](https://discourse.processing.org/u/rkk16)\
**Post date:** [May 20, 2020, 7:53pm UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/1 "2020-05-20T19:53:55Z")

</div>

I’m aware of how to make certain features move using integers and increments but is there a tool to animate/morph from one position to the other ie if I draw an object at 30 degrees at position 200,300 - then the same object rotated at 60 degrees at position 200,400 - can it morph between the two to animate?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 20, 2020, 7:59pm UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/2 "2020-05-20T19:59:28Z")

</div>

Did you look at lerp()? It’s pretty cool.

You would not use a for loop but the fact that draw() loops.

Increment the amt parameter slowly.

Use lerp for x for y and for angle

See reference

---

<div class="post-metadata">

**Author:** ![rkk16](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rkk16](https://discourse.processing.org/u/rkk16)\
**Post date:** [May 20, 2020, 9:23pm UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/3 "2020-05-20T21:23:39Z")

</div>

Okay, will take a look. Thanks.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 21, 2020, 10:51am UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/4 "2020-05-21T10:51:16Z")

</div>

```auto

float amt=0;

void setup() {
  size(1960, 1000);
  background(0);
  delay(12);
  fill(255);
  noStroke(); 
  //
}//func

void draw() {
  //
  background(0); // clear screen

  float x=lerp( 133, 1300, amt );
  float y=lerp( 122, 900, amt );

  text("test for lerp(). ", 
    x, y);

  amt += 0.00414;

  if (amt>=1.0) {
    // noLoop(); // reached target
    amt=1;
  }
  //
}//func

```

---

<div class="post-metadata">

**Author:** ![rkk16](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rkk16](https://discourse.processing.org/u/rkk16)\
**Post date:** [May 21, 2020, 10:58am UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/5 "2020-05-21T10:58:03Z")

</div>

Hi Chris,

Thanks I managed to use lerp to interpolate between facial expressions (ie happy to sad would be lerp between an arc (for the lips) with a certain length, width and fill radian to another). I also managed to connect a slider which controls the level of interpolation (how happy or sad you want it to be). While this works for an interpolation between 2 states, my question is regarding how to do multiple states simulatenously? I want to have multiple sliders which allow a combination of interpolations. ie sliders for happy to sad, happy to angry, happy to disgust and you can be on 40% sad, 60% angry, 80% disgust and the lips adjust to interpolate a combination of the three interpolations. Appreciate your help/support!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 21, 2020, 11:12am UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/6 "2020-05-21T11:12:24Z")

</div>

This [post](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/5) is also continued here:

> [@Interpolation - lerp multiple cases](https://discourse.processing.org/t/interpolation-lerp-multiple-cases/21126):
>
> Hey guys, I’m using lerp to interpolate between facial expressions (ie happy to sad would be lerp between an arc (for the lips) with a certain length, width and fill radian to another). I also managed to connect a slider which controls the level of interpolation (how happy or sad you want it to be). While this works for an interpolation between 2 states, my question is regarding how to do multiple states simulatenously? I want to have multiple sliders which allow a combination of interpolations.…

`:)`

---

<div class="post-metadata">

**Author:** ![rkk16](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rkk16](https://discourse.processing.org/u/rkk16)\
**Post date:** [May 21, 2020, 10:36am UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/7 "2020-05-21T10:36:07Z")

</div>

Hey guys, I’m using lerp to interpolate between facial expressions (ie happy to sad would be lerp between an arc (for the lips) with a certain length, width and fill radian to another). I also managed to connect a slider which controls the level of interpolation (how happy or sad you want it to be). While this works for an interpolation between 2 states, my question is regarding how to do multiple states simulatenously? I want to have multiple sliders which allow a combination of interpolations. ie sliders for happy to sad, happy to angry, happy to disgust and you can be on 40% sad, 60% angry, 80% disgust and the lips adjust to interpolate a combination of the three interpolations.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 21, 2020, 11:03am UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/8 "2020-05-21T11:03:09Z")

</div>

You asked a similar question here:

> [@Morph from one position to another - animation](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/5):
>
> Hi Chris, Thanks I managed to use lerp to interpolate between facial expressions (ie happy to sad would be lerp between an arc (for the lips) with a certain length, width and fill radian to another). I also managed to connect a slider which controls the level of interpolation (how happy or sad you want it to be). While this works for an interpolation between 2 states, my question is regarding how to do multiple states simulatenously? I want to have multiple sliders which allow a combination of …

---

<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:** [May 21, 2020, 8:31pm UTC](https://discourse.processing.org/t/morph-from-one-position-to-another-animation/21112/10 "2020-05-21T20:31:51Z")

</div>

Check out list-based interpolations

> [@Varying scale at frameCount](https://discourse.processing.org/t/varying-scale-at-framecount/17896/3):
>
> One method is to use list-based interpolations float lerps( float amt, float... vals) { if(vals.length==1){ return vals[0]; } float unit = 1.0/(vals.length-1); return lerp(vals[floor(amt / unit)], vals[ceil(amt / unit)], amt%unit/unit); } So my time / vals will be like this: 0 1.5 100 1.5 200 1.5 300 1.5 400 1.5 500 2.0 So my amt, which ranges 0-1.0, will be time/500.0 and my vals will be new float[] {1.5, 1.5, 1.5, 1.5, 1.5, 2.0} With that, lerps() will return the correct result…

…and a related discussion using PVector

> [@\[Processing\] Unfolding columns](https://discourse.processing.org/t/processing-unfolding-columns/610/4):
>
> Thanks @dan850 + @jeremydouglass Yes. They’re all 3D shapes. They’re essentially two lists of vertices: one that is flattened onto a 3D plane, and one that has depth. I’m using shear, rather than rotate, to show the depth of the unflattened shape. That way, the top side of the shapes maintain the 90 degree angles, and when combined with ortho() mode, keeps lines parallel in an oblique projection. What I meant by 2D to 3D is the perceptual sense, that one state looks like it’s a 2D pattern and …