• RESOURCES FROM CLASS:
  • Pixels Part 2: Color
  • push() pop()
  • Mirror
  • Slit-scan
  • Slit-scan video
  • Time Delay
  • Color Theory Examples
• DO:
  • Work in pairs. Due next week. Manipulate an image or video at the pixel level. No sound. The image should change over the course of the minute. What is revealed? What is lost? Use the properties of color to focus our attention.
  • Demo your experience in class:
    • If the change happens through user interaction, plan out the interaction ahead of time so the change is both intentional and repeatable. We will experience each project 2x.
    • Use the p5 editor's fullscreen link to show your project fullscreen. You can access it through the File >> Share menu.
    • Use createCanvas(windowWidth, windowHeight);
    • Position and size screen elements in relation to the canvas width and height.
    • If your image is not big enough to fill the entire screen, be mindful about the color you select for the canvas.
    • Look at Rothko's Cat for sample code.
  • Create a blog post documenting your work. Address / include the following:
    • Choose 2-5 words to describe how the image changes over time. Think about how the words answer the questions: What is is revealed, what is lost?
    • Links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
  • Consult resources from syllabus for inspiration. Pixels Week 1 | Pixels Week 2
• READ AND WATCH:
  • Sound Videos Focus on: Loading + Playing, Timing, Jumps + Cues, Amplitude Analysis, Mic Input, Sound Viz | Code
  • Chapter 13 through Ex. 13.3 of Getting Started with p5.js book - Ebook (free with NYU Library login)
  • More sound stuff

https://editor.p5js.org/alannabean/sketches/7V1JP4Qqd

https://editor.p5js.org/alannabean/sketches/rs1kv27Jv

changing lens, comparison, scope, magnified view, focus, details, bigger picture, perspective

Last week Ranjani and I got together to talk through this assignment and start playing with pixel manipulation. In our first attempt, we captured live video and used the resulting RGB information to make an adjustable pixel mirror. It didn’t precisely fulfill the terms of the assignment, but we learned a lot about using the slider function in P5, plus it made us more comfortable getting and setting colors using RGB mode.

This week, we met up to talk about what might be revealed by manipulating the colors in an image. The two of us landed on wanting to capture the feeling of a sunset, and the movement of clouds revealing the sky.

In order to accomplish this, we used the background image of a sunset, put a layer of color on top, and coded a pixelated “lens” through which to look at the image. This sketch is in HSB mode so that we can more easily gradate the colors and specify a range. We used the map() function to tie saturation to mouseX, brightness to mouseY, and hue to time (although that seems to only be working intermittently), and constrained the colors so they would map to those in the image.

The slider also makes an appearance here. Its value is tied to the size of the “lens,” which reveals the full image of the sunset. We really liked how the action of toggling the slider makes the “sun” appear to rise and set, and changes the scope of the user’s interaction with the image; you can glimpse a tiny corner or the enter thing. This was a fun surprise as we worked on the sketch together.

As far as what is revealed and what is lost: on a literal level, as the sunset is revealed, the fill is lost. The lens, along with the changing context color, allows us to focus on individual details and shades in the image that might be lost in viewing the bigger picture. We love the idea of using this as a game interface, where you try and find hidden images or clues within the revealed picture — maybe a map!

Some inspiration:

Moving clouds - https://editor.p5js.org/car1a/sketches/JFTZ8Tzhk

Spotlight - https://editor.p5js.org/icm4.0/sketches/MLgJGDH1h

Magnifying glass - https://editor.p5js.org/pattvira/sketches/g9R9rYcvZ

Magnifier - https://editor.p5js.org/monicawen/sketches/DvqmouYiR (this was particularly helpful for the lens code)