Animation, Motion and Interaction

I struggled with completing my sketch this week when it came to adding in animation, motion, and interaction in p5.js*. Part of being at ITP is learning from failures, so I hope by next week I’ll have an updated post (and correct code)!

The assignment asked us to work in pairs to create a rollover, button, or slider from scratch. We split off and I tried to complete this on my own, hoping we could then tie our sketches together.

I wanted to create a simple “Googly Eye” using two circles or ellipses that would randomize the colors of the shapes when the user’s mouse hovered over the circles. I wanted to add in a mouseIsPressed function that would randomize the colors of the background when the user’s mouse clicked on the circles. I tried to use variables and conditional logic as we had learned in class, but I could not get the “iris” to appear over the “eyeball.” Ideally, the iris could be draggable by the user’s mouse. I was sadly left with an incomplete sketch that looks like the void…

Link to sketch and code in the p5.js Web Editor

I reviewed the examples on github and from class, and replayed Daniel Shiffman’s videos, but I think I am fundamentally misunderstanding some concepts here. I look forward to office hours 😉 and trouble shooting the code in class. Stay tuned for an interactive Googly Eye soon.

Leave a Reply

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

You are commenting using your 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