https://editor.p5js.org/Valerie-Lin/full/Z4g5jjms-

• Reality
• Self-expression
• Transformation

For this project, our goal was to explore how an image could transform over time using arrays and pixel in p5.js. We wanted to create a visual dialogue between reality and self-expression, using two images of Van Gogh — a real photograph and his painted self-portrait.

https://editor.p5js.org/Valerie-Lin/sketches/Z4g5jjms-

At first, I wrote a version where the pixels of the two images changed randomly. I used an array to store all pixel indexes and then used the shuffle() function to make the transformation order unpredictable. This created a random “painting” effect, where the real photo gradually turned into the painting in a scattered way.

Then, Cody modified the code to achieve a smoother, more emotional transition. Instead of random pixel changes, the transformation now begins from the edges and gradually moves toward the center. This effect was created by calculating each pixel’s distance from the center using the dist() function, then sorting the pixel order based on that distance. The result looks like the painting slowly “emerges” from the surroundings.