Week 6, Pixel Data
Learning Objectives
Students will be able to:
- Understand how raster image data is represented in memory.
- Describe the relationship between vector images, raster images, p5.js drawing api, and pixel access.
- Implement per-pixel image generation.
- Implement per-pixel image processing.
- Use an image as a data input.
- Use p5’s
get()andset()function to read and write pixel values. - Use p5’s
pixel[]array to work with pixel data directly and faster.
Materials
Schedule
| Duration | Time | Purpose | Format | Name |
|---|---|---|---|---|
| 30 | 3:50 | Review+Engage | Discussion | Homework Review |
| 10 | 4:20 | Study | Lecture | 01 Pixels |
| 20 | 4:30 | Activate | Code | Pixel Writing Challenges |
| 10 | 4:50 | Study | Code Lecture | Challenges Discussion |
| 20 | 5:00 | Activate | Code | Pixel Processing Challenges |
| 10 | 5:20 | Study | Code Lecture | Challenges Discussion |
| 15 | 5:30 | Study | Lecture | 04 pixels[] |
| 25 | 5:45 | Activate | Code | setQuick +Grass Example Live Code |
| 20 | 6:10 | Study | Lecture | Vector vs Raster |
Lecture Notes
Next few weeks look at different paradigms of drawing.
Pixels, Turtle Graphics, Vector
Drawing API vs Pixels, Vector vs Raster, Absolute vs Relative Positioning, Immediate Mode vs Retained Mode
01 Pixels
Raster video pipeline, memory mapping
Vector Monitors
Homework Review
Groups
| Group | Question |
|---|---|
| 1 | Xia, Aakanksha, Sue Choose your favorite take on the dot challenge. Discuss. |
| 2 | Jack, Patricia, Ting Choose your favorite take on the line challenge. Discuss. |
| 3 | Earl, Carla, Dahee Choose a work that you like, but are unsure how it was made. Describe what you see. |
| 4 | Leah, Kirsten, Bella Choose a set of sketches that show interesting progression from one to the next. Discuss how the sketch changed in each post. |
| 5 | Madison, Rik, Patrick Choose a work that combines computational and manually-created form. Discuss. |
| 6 | Allysa, Mario, Julian Choose a 😂, 😍, or 🤓. Discuss. |