9.R Pixels II; Interactive Portrait

Link to the sketch:

https://glitch.com/edit/#!/cara-interactive-portrait?path=sketch.js%3A27%3A23

Working Process：

 

I choose Girl With A Pearl Earring as the portrait.

 

This is the first time that I use Glitch as the coding platform. Thus besides the technical problems, I also met some setup issues. The first little problem I encountered is that I spent some time figuring out how to import an image in Glitch, which generates a URL for the image automatically and I just kept using “assets/name-of-image”.

Soon after I found that the original size of the image was too large for the window. I googled the problem and found the property of image.resize in p5. At the first stage, I was also confused about the red wavy lines under some default functions saying they are not defined. And later it turns out that they didn’t matter with the code. 

I checked the instructions for this mini-project one by one, and I found myself was still confusing about the equation of let index = (x + y * img. width) * 4, which is the biggest obstacle for me to proceed with the project. I referred to the previous slides and the code training videos, and I also looked for examples in cclab-gallery to make it more clear for me. Before what the girl looks like now, I used text “+” to replace the image as well rectangles. But I found circles were the most suitable for this classic artwork. I later added some random colors and random sizes for the circle pixels so that it had a property like retro games, which is interesting. And I just played with the colors.

Having managed to run a basic required code, I also tried to do the challenging part. I’d like to use the mouse removes the pixels and make the image clear again. I tried the if property but it seems doesn’t work for me. I might turn to fellows when they are available.