http://peterjsucy.blogspot.com/2008/12/how-does-lenticular-printing-work.html

Inspiration

90s lenticular trend

How it works irl

https://www.explainthatstuff.com/lenticularprinting.html

Recreating that with pixels

We manipulated the RGB values of each pixel columns as the RGB value of the three images in different ratios for each point of view.

pixels[i + 0] = (tex.pixels[i + 0] * 126 / 255) + (man.pixels[i + 0] * 26 / 255) + (c * 103 / 255)
pixels[i + 1] = (tex.pixels[i + 1] * 126 / 255) + (man.pixels[i + 1] * 26 / 255) + (c * 103 / 255)
pixels[i + 2] = (tex.pixels[i + 2] * 126 / 255) + (man.pixels[i + 2] * 26 / 255) + (c * 103 / 255)

pixels[i1 + 0] = (tex.pixels[i1 + 0] * 140 / 255) + (col.pixels[i1 + 0] * 115 / 255)
pixels[i1 + 1] = (tex.pixels[i1 + 1] * 140 / 255) + (col.pixels[i1 + 0] * 115 / 255)
pixels[i1 + 2] = (tex.pixels[i1 + 2] * 140 / 255) + (col.pixels[i1 + 0] * 115 / 255)

pixels[i2 + 0] = (tex.pixels[i2 + 0] * 160 / 255) + (man.pixels[i2 + 0] * 47 / 255) + (col.pixels[i2 + 0] * 48 / 255)
pixels[i2 + 1] = (tex.pixels[i2 + 1] * 160 / 255) + (man.pixels[i2 + 1] * 47 / 255) + (col.pixels[i2 + 1] * 48 / 255)
pixels[i2 + 2] = (tex.pixels[i2 + 2] * 160 / 255) + (man.pixels[i2 + 2] * 47 / 255) + (col.pixels[i2 + 2] * 48 / 255)

We started with changing the Alpha values of the images instead of rendering the canvas - it didn't go down too well.

man.pixels[i+3] = 26;
tex.pixels[i+3] = 0;
col.pixels[i+3] = 126;

https://editor.p5js.org/rajshree.s/sketches/gObxzxREi - didn't work

The image would disappear after a few seconds. We spend a few days and a billion ways to fix it.

trust me, you do not want to go through it all

Finally, the Coding Lab helped 🙏

https://editor.p5js.org/rajshree.s/sketches/InyMnE65y - Previous draft with mouseX