Intro:

This assignment is an opportunity to practice with images and camera pixel arrays, DOM interactions and libraries.

Getting Started and Submitting:

You’ll start by cloning our HW09 template into a repository called HW09. This already has starter code for the two exercises in this homework.

Since the computer is gonna be doing all the work of filling our screen, please use: createCanvas(windowWidth, windowHeight).

Like previous assignments, please enable GitHub pages on your GitHub repos and use Brightspace to submit GitHub links to your HW09 repository.

Evaluation

Each exercise in this assignment will be graded on a scale from 0 to 5, taking the following criteria into account:

• README: repository includes a README.md file with information about the design process.
• Compliance: work follows the requirements specified in the assignment description.
• Implementation: work shows evidence of understanding programming concepts and you are fully using them to express your ideas.
• Thoughtfulness: project demonstrates your personality and it’s not a straightforward re-implementation of someone else’s idea.
• Craft: code and results show care and consideration for presentation and professionalism, and work doesn’t look like it was rushed.

HW09A

Warm-up: Neon Mondrian (5 points)

In this exercise we will use our knowledge about colors, pixels and arrays to remix a painting by Piet Mondrian.

His Compositions in red, yellow, blue and black are often mentioned as examples of good color balance and composition, but we’re going to use programming to update its colors:

Getting started

We already have a p5js sketch that reads the image file, opens it, resizes it and displays it on the screen, making the image’s height be the same as the browser’s window height without distorting the image.

This code also initializes TWO copies of the image into TWO different variables, so we can manipulate one of them, while keeping the values of the original pixels in the other.

Now, you have to write a function (or functions) to replace each of the three colors (red, yellow and blue) with something different. The new “colors” can be anything: specific colors, random colors, patterns, another image, etc.

Add at least one DOM element to allow users to select at least one of the new target colors. This can be a slider or a color picker element, or something else.

The black and white colors of the painting can be modified as well, but that’s not a requirement.

Consider making one of the three colors transparent and adding another image or pattern “behind” the painting to create a kind of collage.

Tips and Tricks

Start by reviewing the images tutorial on the IDM tutorials site, and the code from week 07 and week 08, specially exercises 07.3, 07.4 and 08.00, 08.01 and 08.02 that talk about manipulating the pixel array and creating filters.

Think about how to detect a certain color: as you iterate through all of the pixels in an image, what information do we have? What do we check?

We might be able to detect some colors by just calculating the dominant channel in that pixel, but for other colors, we need some other way to determine if the pixel we are checking is “close enough” to the color we want to detect.

It will help to have variables that hold the RGB values of the three colors we want to detect. These can be JavaScript objects, or p5js Color objects:

let MONDRIAN_BLUE = { r: 20, g: 20, b: 220 };
// OR
let MONDRIAN_BLUE = color(20, 20, 220);

To check if two colors are “close enough” we have to compare each of their three channels, and if the red, green and blue values are all within some threshold, then we can consider the colors “similar”. For example, to see if two random colors have blue values that are “close enough”, we could do something like:

let SIMILARITY_VALUE = 20;

let colorA = color(random(255), random(255), random(255));
let colorB = color(random(255), random(255), random(255));

let blueA = blue(colorA);
let blueB = blue(colorB);

if (abs(blueA - blueB) < SIMILARITY_VALUE) {
  print("blue values are close enough");
} else {
  print("blue values are different");
}

Checking if the two colors are similar just requires extending this code to include the red and green channels as well.

Using a slider element can help fine-tune the SIMILARITY_VALUE for the detection algorithm.

Consider writing a function that takes two colors and returns true/false based on whether they are similar. This function’s arguments could be two p5.Color objects, six color channel values, or something in between:

function isSimilar(colorA, colorB){}
// OR
function isSimilar(redA, greenA, blueA, redB, greenB, blueB){}
// OR
function isSimilar(colorA, redB, greenB, blueB){}

HW09B

Make an art with the camera

This is a very open ended assignment where you get to do something creative and exploratory with the camera.

This can be some kind of mirror effect display, like we saw in exercise 08.10 and 08.11, or something that uses the ml5 library, like in 08.12.

It can be something that has a strong art or visual component (maybe create a camera based sketch for one of Yoko Ono’s instructions <?>), but this can also be something experimental in the field of non-traditional interfaces.

What kinds of new possibilities are afforded by allowing us to interact with our computers using our faces, hand motions or common household objects ? Are there new aspects of Interactivity ? Are there possibilities for more inclusive interfaces ?

The important thing is that it’s yours, and it demonstrates your personality and curiosities about interfaces, moving images and/or pixels.

The ml5 library is already included in the HW09B starter sketch. Take a look at the documentation if you plan on using some kind of ML detection.

WTF is posthumanism?

Keep this question in mind while you read the following:

This response will be different!

Start by reading the introduction to the book.

After you read the text, and only after, ask ChatGPT to write a 300-word response using prompts that get it to cover these questions:

• Short summary: in one or two phrases, what is the book about?
• Is there a phrase in the text that stands out or captures its main idea?
• Was there anything in the text that surprised you? What? Why?
• How is this related to programming?
• Is the text related to any of the other readings we’ve done so far?

Then, write a couple of phrases (100 words) as a response to the text generated by chatGPT. Include what you think it got right and what you think it got wrong, or if it exaggerated some ideas, or if it seems like it doesn’t have enough knowledge.

Include your prompts and all of the responses from Chat GPT in your submission, along with your response.

Please submit your response via Brightspace.

Alternatively, you may create a reading.md file in your HW09 repo and write your response in markdown. Just make sure to submit a link to the file using Brightspace.

Grading for this reading response will be assigned following these considerations: