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:
For this week’s assignment, I made an interactive scene where players can control the rain through different gestures. The recording is here.
Screenshot
After playing around with a few tutorials and coding templates that can imitate cat face/cute facial expressions, I started to think about what I should do. I was recalled by Shanghai’s summer, which is moist and can keep raining for a whole month. I was often trapped on the road between the subway station and the academic building, where I wished I can just rush into the rain without being soaked through. There are also certain religious rites in ancient China, where an important leader, sometimes the emperor will pray for the rain to God. Therefore, I decide to make two gestures and a rain class, where one gesture can stop the rain and another will make the rain bigger.
Firstly, I classed the rain I wanted to make, basically following what we have learned in class, including but not limited to how to class a ball and how to make the program execute the functions that I constructed:
Now there are many lines falling off right now. Learned from the article Building an App for Eye Filters with PoseNet , I decided to use the detection point of the eye and wrist. Then I met pretty many difficulties during the process of combining poseNet input with my code. The first is that as I want to create more rain (more lines falling off), I wrote:
for (let i = rains.length + 10; i >= 0; i++) {}
However, Professor Moon told me this is a situation that is always true, which may be the reason why my screen was always frozen. Moreover, as I was playing around with skeletons and all kinds of pushed particles, those additional codes made the execution process much slower.
I also had problems writing the function that works with the poseNet input. At first, I put the rain before the poseNet so the value is not input. Professor Moon helped me rewrite the function where the rain should stop, as he input new values instead of writing directly.
let wristPos = (wristL.y + wristR.y) / 2; let eyePos = (eyeL.y + eyeR.y) / 2;
There are some small problems as well, such as when I played with the filter of the blur, the accuracy of poseNet seemed to drop drastically. What’s more, the detection of poseNet will be much better if you stay far away enough from the camera (at least 1 meters), where even though I tried the different range of p.score, if I stay too close, the accuracy is still low.
After finishing the general frame, I functioned with the sun and the cloud to replace the ellipse at the eye/wrist position. For future improvement, I would like to add more funny gestures & class functions to improve the enjoyment of this scene. I also want to add music like it is shown in the post-edit video. There is some issue with the preload function and I am still trying to solve it.
Great thanks to Professor Moon who helped me a lot with clarifying concepts and correcting my coding errors on this assignment.
For the static image, I want to create something symmetrical and aesthetic.
First I tried to create a group of the ellipse in the center. After assigning them in the right order, I applied color and stroke on them.
Then I started to create rectangles outside of the ellipse. To make sure it looks good, I rotate them through degrees.
After that I wanted to create some ellipse in the corner, so I used push() and pop() to clean the effect of function translate().
After finalizing all the ellipse, I wanted to add a good background picture to it rather than the pure color background. I searched for references about how to import pictures and how to put it in the center. I added another two lines too.
Finally, I added two more ellipse parts to enrich the picture. Because I was writing the whole image in once and making sure their positions, so I didn’t use position representations like width/2 or height/2. The lines can also be achieved by using vertex(). I will pay attention to that and use them in the future.
Animation
Initially, I was creating something like the screenshot below using the code learned during the workshop. However, it doesn’t look really good. Therefore, I switched rect(x,y,50,50); with ellipse(0,0,x,y), where the website will start drawing from the center in a certain order.
However, the latest created shape on the top is influencing the visual effect a little. I asked Moon if the problem can be fixed, and Moon suggested that I can use noStroke() and create two same ellipses rotating in different directions to improve it, and it looks better! It’s like a dandelion.
But I don’t want it to keep growing, so I wrote an if statement following the if statement Moon wrote about the opacity.
if (x>3) {
x=x-random(0,5);
}
From ⬇️
if (frameCount > 100) {
alpha = alpha – 1;
}
Now it is a pretty fixed small dandelion. To create something outside of the dandelion, I tested ellipses, rectangles, and lines. Eventually, I created 3 ellipses and 2 lines in the outer range. I also applied a much wider color range for the dandelion, but with the cover of lines and ellipses, the dandelion’s color is not that obvious anymore. But it looks fine so I just leave it there.
However, the lines and ellipses will leave a circle in the center after many frame counts, which cannot be solved.
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:
