Week 09: Drawing and Interaction (Mouse)

We are meeting over Slack this week.

Lecture

This week, we’ll delve into the history of drawing, spanning from ancient cave paintings of 41,000 years ago to the advent of the personal computer and everything in between. Following this journey through time, we’ll explore the fascinating intersection of mouse technology and coding, empowering you to craft your own drawing tools and interact seamlessly with your p5js sketches using the cursor.

• Lecture PDF
• Lecture Video on YouTube
• Extra slides by Prof Antonius

By the end of the week, please cover these coding examples and helpful links:

Coding Examples

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

In Class

1. We will review the homework you did - Choose one of your static designs from the last 7 weeks and use the draw loop to add some motion to it. Be ready to share!
2. Please check out these two examples. One shows you how mouseIsPressed works. The other shows you how to draw a line from your previous mouse location to your current mouse location. Using these two examples, can you create a simple drawing program where you draw only when you press the mouse? Can you make your drawing program even more exciting?
3. mouseIsPressed
4. pmouseX and pmouseY

In Class Rubric

• 80/100 - Student shared a link to their p5js of a drawing tool with the mouse.
• 20/100 - Student was present and engaged during discussion and feedback of each other’s work.

Homework

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 for keyboard interaction and for images and go through the lecture slides for Week 10 and come to class next week with questions.

Homework Rubric

• 80 / 100 - Student used p5js to update their drawing program into one with two buttons to swtich beteween features.
• 20 / 100 - Student submits the link to their p5js sketch to Slack on time before the next class.

back