My nature of code final project turned out to be a very different thing from what I expected from the very beginning, but I kinda like it.
I got my inspiration from two pictures that were very popular online. When the same picture is viewed by different people, different effects were triggered. So I really want to make filters that allow people to see different things behind the filters.
One big part of my project is the circle packing part. It is mainly pixel manipulation. First, it read the pixel values from the image I loaded. Then, I write another function to generate certain shapes matching the pixel color and the position of the original image. I can actually choose the shape of what is filled in the position of the image. One thing worth noticing is that the pixel density should always be set to one. At first, I really wanted to create different scenes of Shanghai, such as raining scene or night scene, so I chose a picture that shows the famous attractions of Shanghai. I adjusted the color of the picture, one is for the rainy scene and one is for the night scene.
For the night scene, I decided to add stars to the sky. I really wanted to apply the trail effect to the night scene, but since I already had the pixel version of Shanghai night, I didn’t know how to make adjust the transparency of the layer underneath the stars. After talking to Moon, he taught me to create another graphic for the star, so I can adjust the alpha value of the background of the graphic I created. Also, I learned more about the blend mode in p5.js. The effect was just amazing. Everything turned out to be great.
For the rainy scene, firstly I added some random grey particles to make it seem foggy. Next, I used the flocking system to make the raindrops to be parallel with each other. To make it more like a rainy scene, I created puddle function to make small circles when the raindrops fell on the ground. I also used the create slider function in p5 dom library to add filters on the canvas. I used two sliders in total, one for controlling the size of the ellipse and another is the transparency.
The biggest problem I met in the process is actually the speed of my system, especially when the raindrops were falling down, the speed was just super slow. I tried to put all my code into open framework to make it smoother, but my codes are sort of complicated and I got so many errors. After talking to Moon, he suggested me to splice out the particles when they reach certain values. When I learned the splice thing I thought it was just for making the scene less messy, and until then I knew that splicing out particles contributes a lot to make the system run faster.
When I was designing this project at the very beginning, I want to create the world behind filters, so I wanted everything to be dark at first, and when the filter is on, different scenes will be revealed only at the place where the filter is. After talking to Moon and Jiwon, I tried the mask function in p5.js and also the color erase method to imitate the feeling of the filter, but both of them didn’t turn out to look good, so I had to give up. After splicing particles out, I found out the effect was surprisingly good because all the pixels are shining and moving, and it was better with the filters on!
I was going to do a third scene of the city, then Moon suggested to try something else, maybe something with the really high comparison. So I downloaded a cartoon face from google and used blobs to make the contrasts.
To keep the system running at a fast speed, I actually have to do the splicing thing on almost every image I loaded. It worked well on some of the pictures, but for other pictures, I cannot recognize what the original picture is when it is “translated” into pixels.
For further exploration, I really wanted to do the mask thing. Instead of just color filters, I wanted to apply more to it. Also, I want the pixel manipulating thing can be applied to almost every picture, so I may have to adjust my code in the circle packing part.
I went through a lot of struggles during the process of making this process. Although this is not I wanted at the beginning, I still very like the visual I created. For the next step, I really want to make a real filter which can reveal and hide scenes from people’s eyes. Last but not least, I just want to thank Moon and other fellows for all the help they provided! They have been really kind and useful to me. I really learned a lot from Nature of Code!