Morph 103 - Moving pixels

Part 1

Now that we have cross faded the colours and learnt about linear interpolation, we will move onto moving points across the screen.

Thankfully this shouldnt be too scary as we will also be using linear interpolation for this.

Below is a visual for moving one point to another.

We will perform linear interpolation for both X and Y
pt(x,y) = p1(x,y) + ((p2(x,y)-p1(x,y))*t
or
tx = p1x + (p2x-p1x)*t
ty = p1y + (p2y-p1y)*t

Cerberus X code can be found here

Part 2

For this morph effect, we are going to move each pixels within polygons and cross fade the colours.
Each image would have a point map, where similar points on each image would represent the same feature on the other picture..  ie an eye or edge of hair.

Heres an example of a point map...

For his part we are going to ignore the faces and shape and talk about each polygon.

When we move the polygons, we are going to need to work out the new co-ordinates of each of the 4 corners.

I'm not worried about optimisation at the moment and dont care if we will be repeating calculations.

For each polygon we will work out the new positions of each of the 4 corners using linear interpolation.

For Each Polygon
  'p1 is the polygon for the first image
  ' p2 is the polygon for the second image
  Local x1:Float = LI(p1x1,p2x1,t)
  Local y1:Float = LI(p1y1,p2y1,t) 

  Local x2:Float = LI(p1x2,p2x2,t) 
  Local y2:Float = LI(p1y2,p2y2,t) 

  Local x3:Float = LI(p1x3,p2x3,t) 
  Local y3:Float = LI(p1y3,p2y3,t) 

  Local x4:Float = LI(p1x4,p2x4,t) 
  Local y4:Float = LI(p1y4,p2y4,t)

  DrawPolygon x1,y1,x2,y2,x4,y4,x3,y3

You can see the polygons moving in this CerberusX example

You now have a choice.
Morph 104 looks at how I progressed in 1991 processing each pixel, while Morph 105 looks at how we can optimise 30 years later...

Next Chapter - 104 - https://devdevandmoredev.blogspot.com/2019/08/morph-104-drawing-polygons.html
Skip to Optimisation - 105 - https://devdevandmoredev.blogspot.com/2019/08/morph-105-optimisation.html

Links to all chapters
Part 1 https://devdevandmoredev.blogspot.com/2019/08/morph-101-intro-to-morphing.html
Part 2 https://devdevandmoredev.blogspot.com/2019/08/morph-102-colour-changing.html
Part 3 https://devdevandmoredev.blogspot.com/2019/08/morph-103-moving-pixels.html
Part 4 https://devdevandmoredev.blogspot.com/2019/08/morph-104-drawing-polygons.html
Part 5 https://devdevandmoredev.blogspot.com/2019/08/morph-105-optimisation.html
Part 6 https://devdevandmoredev.blogspot.com/2019/08/morph-106-final-thoughts.html