amy zhang

~ the projects ~

here is my collection of p5.js projects created during my creative computation class

description

animated optical illusion of a storm

use movement of light lines over dark lines to simulate lightning flash

move mouse left and right to move light lines

click and drag to move tornado

reflection

I was really confused (uninspired) by the optical illusions rubric. I started out by making a different sketch which uses perspective and moving ellipses as an optical illusion of driving on a road: (https://editor.p5js.org/zhana059/sketches/azRkbubgb)

But, I could not figure out if it fit the assignment quite right so I decided to create something else, too. I looked at examples of optical illusions and the animated optical illusions were the most interesting to me. I wanted to create something similar with still and moving lines of varying thickness. I decided to try with clouds. I use semi-transparent circles to make the clouds then added stripes over the clouds and made stripes move with my mouse. The resulting effect reminded me of lightning flashes and I had just read about hurricanes, so I decided to create a storm.

I added lightning bolts that would appear with the optical illusion flashing. I also added thunder sounds to occur a little bit after the lightning bolts to simulate a real storm. Then, I noticed that I had not used nested loops, yet, and decided to add a tornado as a tribute to my Chicago/midwest roots. I struggled with figuring out how to make the twister start at the bottom and make ellipses that grew bigger as they went to the top of the sketch. I remembered my first sketch and decided to play around with the nested loop for the running road to try and see if I could make it upside down and more tornado-like.

After creating the tornado, I tried to make it move with mouseX, but that made the sketch visually too chaotic -- I had the tornado in front of all the objects in the sketch which made it seem like the main subject and also distracted from the flashing illusion. To make the sketch less chaotic, I put the twister behind everything and only made it move with the mouse when the mouse is pressed.

The flashing visuals could be used in the real world at live music venues for lighting effects or as part of an alarm system. My sketch could be used a way to teach kids about storms or as exposure therapy for people afraid of storms.