Link to the code: https://glitch.com/edit/#!/mlniw5workjoyce
For this week’s assignment, I made an interactive portrait based on the pixel related knowledge and body pix we have learned in class. First I went to the internet to look for inspiration.
The works are amazing, as the portrait is creatively comprised of various different parts. However, I found it pretty difficult to imitate the works above as I cannot import images to let them mirror the real world as Professor Moon has done in class utilizing letters to mirror. Therefore, my code is still based on the class code and I tried to modify it.
One of the important codes is:
let gridSize = floor(map(mouseX, mouseY, width, 5, 50));
With mouseX and mouseY, the user can interact with the portrait through mouses, see the pixels (rectangles) changing in size. I also tried to play with the brightness to make my portrait more like the real world (like the letter), however, there is some issue with the brightness. I got something like:
That’s too ugly! I think it is because of the index, where every pixel has its own rgba so the brightness function cannot work well. Therefore I tested it with the avg=(r+g+b)/3:
There is still a weird pattern. Thus I switched back to the normal pattern without brightness:
After finally deciding what pattern I should use, I basically tested with different shapes and colors. Now the main issue is… body pix is not working well, it almost doesn’t recognize my arms/hands. I tried to move further from the camera but it still didn’t work. Until sometimes I accidentally tried to play with the leg index…
It worked. I don’t know why the leg index would work well on recognizing gon my arms but it worked pretty well… Below is the screenshot and recording of my final project:
