ICM Week2

The second week is getting more challenging but also more fun. I tried to animate the sketch I drew for last week.

https://alpha.editor.p5js.org/embed/SyqIfqs5Z

The first thing I did is to rewrite the entire codes using variables. I was having a very difficult time drawing with coordinate system last week; And with variables, I can set every relative to center point and make shapes that relative to each other. That makes life much easer.

Next, I want to animate the eye ball of my Doraemon. I wanted it to make circular move inside the rim of eye. I spent some time thinking of ways to do that before figuring out I can use “translate” and “rotate” function.

To make the drawing more interesting, I added some little balls bouncing on the canvas, yet they ended up making the canvas look very messy. While playing around with it, I learnt that I can use alpha to adjust the transparency of an element.

The next thing I do is to play around the background color. I mapped the change of color with the movement of my mouse. And I also applied alpha value to background.

The last thing I did — which is also the part I had most problem with, is to draw a balloon and have it move along with my mouse. In order to draw a balloon, I need to use the bezier function, which is a puzzle for me. I couldn’t figure out whats the right parameters for my bezier and how to use it with “mouseX, mouseY”. I got some help from Mathura on this. She told me that I had to set every parameters in a bezier function relative to “mouseX,mouseY” in order to animate it; and she also showed me to “cheat” with the Playground.  I would say that is super helpful.

playground.png

Another problem I encountered while working on this assignment is that I tried to declare an object involving “mouseX, mouseY” outside “function draw”.

screenshot1.png

And of course if doesn’t work. It took me a while to figure out though. Lesson learnt that I gotta be more careful about where I declare a variable in the future.

I also drew another animation just to experiment more with shapes and animation.

http://alpha.editor.p5js.org/embed/r1sFAggsb

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s