Morph 102 - Colour changing

In the movie Terminator 2, The T2 would fade from its liquid metal reflective form to its choice of skin, hair and clothes. Before we think about the 3D movement of points to achieve this. Lets think about the colours

Each 'pixel' of skin would have to fade from metal grey to its final colour.
So how do we go from $333 (grey) to $FA8 (light brown) or any other colour?

Simply put, how do we find a value between 2 other values.
We can use linear interpolation for this.
https://en.wikipedia.org/wiki/Linear_interpolation






So lets translate that to colours

R = R1 + (R2-R1)*t
G = G1 + (G2-G1)*t
B = B1 + (B2-B1)*t

where .. 0<=t<=1

R1 = Red of first colour
R2 = Red of second colour etc

or

R1 = LI(R1,R2,t)
G1 = LI(G1,G2,t)
B1 = LI(B1,B2,t)

Method LI:float(v1:float,v2:float,t:float)
  Return v1 + (v2-v1)*t
End

So lets now cross fade behind 2 images
' time is between 0 and 1. lets use Sin
t = Sin(timer)/2 + 0.5

For every pixel in each image
  src_argb = Pixel in 1st image
  dst_argb = Pixel in 2nd image

  Split argb of each pixel from each image

  A = LI(src_a,dst_a,t)
  R = LI(src_r,dst_r,t)
  G = LI(src_g,dst_g,t)
  B = LI(src_b,dst_b,t)

  new pixel = ARGB

Implementing the above gives following.









No pixels are moving yet, but we do have colours fading from one to to the other

CerberusX code for this example can be found here

Next we'll take a look at moving points

Next Chapter - 103 - https://devdevandmoredev.blogspot.com/2019/08/morph-103-moving-pixels.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

Comments