This week I created a sketch that has all of the following elements:
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
I decided to make a drawing where you can fly a kite. The full code is available here.
I first started by making a rough drawing. I wanted to have moving clouds and a kite controlled by your cursor.
I started off with the clouds, which I started by creating one and using hard coded numbers.
And then I thought it was too repetitive to draw the ellipses individually. I also wanted more clouds, and I didn't want to draw each one individually. I decided to use loops to create many clouds and I also used the random() function a few times, which is in the setup() function, to create slightly different cloud shapes when you run the code each time.
Next, I needed the clouds to move in the breeze, so I needed to increment the clouds' position along the x-axis. I wanted the clouds to move continuously across the screen, so I needed to reset the clouds' position after it hit a certain point.
I then added in the kite so that it would follow the cursor.
I cleaned everything up by adding someone who is holding the kite, and also hiding the cursor using the noCursor() function. I wanted to make the drawing more detailed, so I changed the clouds' transparency and made the kite get lighter as it approaches the sun.
I did have some ideas I wanted to include, like more animated elements, but I was having trouble figuring out how to make something move in more curved pathways. Next time, I definitely want to make a drawings with more interactivity. Hopefully, I can achieve that using some if then statements next week.