For this week’s homework, I worked with Shannen to explore shaders in p5.js. After porting one of my previous shaders to p5.js, I decided to create a shader that distorts an image using shaping functions.
The code for this sketch can be found here: https://editor.p5js.org/Bakaretsu/sketches/zxuKhPC0z
The images I distorted are of Morshu from the Legend of Zelda games. I was inspired by a recent hyper detailed render of him that was posted on the internet, and decided to have these 2 images morph into each other in some way.
I followed the example in the displacement video, and created an offset that changed based on the sin value of time. I multiplied the sin wave to make the warping effect more intense in the x and y directions.
To blend between the 2 images, I used the mix function and passed in time as the value to use to interpolate. This resulted in the 2 images blending between each other over time.
I combined that effect with the displacement shader to create the end result.