Week 10: Interaction and Image Import

We are meeting over Slack this week.

Lecture

This week, our focus remains on interaction, with a particular emphasis on keyboard and click events. Additionally, we’ll delve into the history of keyboards to understand their evolution. Later, we’ll pivot our attention to importing digital images into p5.js and explore the distinctions between film and digital photography.

• Lecture PDF
• Lecture Video on YouTube
• Lecture video 2 on YouTube

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

Coding Examples

Coding Examples (Keyboard)

• keyTyped
• keyIsPressed and keyCode
• keyCode and mapping
• Key Coded applied to motion

Coding Examples (Images)

• loadImage
• Image Filters
• Get Pixel Data
• Pointillism
• Image Sequence/Animation

In Class

1. We will review the homework you did - 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. Be ready to share!
2. Happy spring break! We will be ending class earlier this week. No other in-class assignment is due. But please review and do your homework for next week!

Homework

1. Suggested Reading: pages 95 – 97, 223 – 235, 315 – 324 and 337 – 364 in Processing, by Casey Reas and Ben Fry.
2. Use what we learned in class to produce an interactive piece using images and either keyboard input or mouse input. You must show that you can use an image in your sketch.
3. Share your sketch on Slack next class period.
4. Watch the video and review lecture slides for Week 11.

back