http://peterjsucy.blogspot.com/2008/12/how-does-lenticular-printing-work.html
90s lenticular trend
.gif)
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
.gif)