Week 09: Drawing and Interaction (Mouse)

Today we will talk about the history of drawing from the cave paintings from 41,000 years ago to the personal computer and all the other tools in between. We will then talk about how to use the mouse and code to produce your own drawing tools and how to interact with your p5js sketches with the cursor.

Lecture PDF

Coding Video Tutorial

Coding Examples
Mouse X / Mouse Y
P Mouse X / P Mouse Y
Mapping Mouse Location
Hover State
Mouse Pressed
Mouse Constrain
Mouse Distance
Mouse Easing
Mouse Speed
Save on Key Pressed
GUI with Buttons
datGUI Interface

1. Suggested: Read pages 205 – 213 and 237 – 243 in Processing, by Casey Reas and Ben Fry.
2. Create your own custom design software. Have at least two buttons to switch between two features. Different brush styles, colors, movements, etc. Use either the GUI with Buttons example of the datGUI Interface example as reference. Draw and export an example sketch to show the class next week.
3. Share your sketch and drawing on Slack next class period.
4. Watch the videos and go through the lecture slides for Week 10 and come to class next week with questions.