color – Alan Winslow

Inversion Video

This week we were tasked with manipulating the color values of pixels in a sketch. I chose to work with a live video feed and an overlay.

To achieve this, I made two sketches first, the spiral background, and second, the inverted video feed with the banding.

For the video feed, I decided to only invert the colors of the red channel. The choice was purely aesthetic. I called a single band of pixels in either the x or y-axis and applied color manipulation to make the banding effect. I tried using an array so that I can move the band quickly later.

PROBLEMS:

- - Centering the video feed – Whenever I tried to translate, the video feed crash.
  - Layering the graphic below the video feed – To get a taste of what I was going for, I left the graphic on top but turned down its opacity.

Code:

// The world pixel by pixel 2021
// Daniel Rozin
// uses PXP methods in the bottom

import processing.video.*;
Capture ourVideo; // variable to hold the video
int diaMin = 10;
int diaMax = 1000;
int diaStep = 10;
float a, b, move;

void setup() {
size(880, 720);
frameRate(120);
ourVideo = new Capture(this, 640, 480); // open default video in the size of window
ourVideo.start(); // start the video
noFill();
stroke(55,3,34,40);
strokeWeight(diaStep/4);
}

void draw() {

if (ourVideo.available()) ourVideo.read(); // get a fresh frame of video as often as we can
background (25, 215, 55);
ourVideo.loadPixels(); // load the pixels array of the video
loadPixels(); // load the pixels array of the window
int [] l1 = {20, 60, 110, 140, 158, 210, 214, 340, 390, 415, 421, 591, 610, 630, 421, 455, 580, 631, 560};
int [] l2 = {23, 34, 111, 145, 153, 167, 180, 440, 443, 460, 230, 340, 212};
for (int x = 0; x<ourVideo.width; x++) {
for (int y = 0; y<ourVideo.height; y++) {
PxPGetPixel(x, y, ourVideo.pixels, ourVideo.width);
PxPSetPixel(x, y, 255-R, G, B, 255, pixels, width);
PxPSetPixel(l1[0], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[1], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[2], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[3], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[4], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[5], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[6], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[7], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[8], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[9], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[10], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[11], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[12], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[13], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[14], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[15], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[16], y, R, G, 255-B, 255, pixels, width);
PxPSetPixel(l1[17], y, R, G, 255-B, 255, pixels, width);

PxPSetPixel(x, l2[0], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[1], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[2], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[3], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[4], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[5], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[6], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[7], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[8], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[9], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[10], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[11], R, G, 255-B, 255, pixels, width);
PxPSetPixel(x, l2[12], R, G, 255-B, 255, pixels, width);
}
}
updatePixels(); // must call updatePixels once were done messing with pixels[]
a = sin(radians(move+10))*450;
b = cos(radians(move))*450;

translate(width/2, height/2);
for (float dia=diaMin; dia<=diaMax; dia+=diaStep) {
ellipse(-a, b, dia, dia);
ellipse(-a, -b, dia, dia);
ellipse(a, -b, dia, dia);
ellipse(a, b, dia, dia);
}
move++;
}

// our function for getting color components , it requires that you have global variables
// R,G,B (not elegant but the simples way to go, see the example PxP methods in object for
// a more elegant solution
int R, G, B, A; // you must have these global varables to use the PxPGetPixel()
void PxPGetPixel(int x, int y, int[] pixelArray, int pixelsWidth) {
int thisPixel=pixelArray[x+y*pixelsWidth]; // getting the colors as an int from the pixels[]
A = (thisPixel >> 24) & 0xFF; // we need to shift and mask to get each component alone
R = (thisPixel >> 16) & 0xFF; // this is faster than calling red(), green() , blue()
G = (thisPixel >> 8) & 0xFF;
B = thisPixel & 0xFF;
}

//our function for setting color components RGB into the pixels[] , we need to efine the XY of where
// to set the pixel, the RGB values we want and the pixels[] array we want to use and it’s width

void PxPSetPixel(int x, int y, int r, int g, int b, int a, int[] pixelArray, int pixelsWidth) {
a =(a << 24);
r = r << 16; // We are packing all 4 composents into one int
g = g << 8; // so we need to shift them to their places
color argb = a | r | g | b; // binary “or” operation adds them all into one int
pixelArray[x+y*pixelsWidth]= argb; // finaly we set the int with te colors into the pixels[]
}

ICM Final Project

My final project for ICM will be a continuation of my RGB conversion process script. In this script, I import an image, and the script displays the RGB value of every pixel that makes up the image. I was pleasantly surprised at the beautiful patterns that the numbers made. Each image drastically different depending on its original color pallet.

Script improvements and modifications:

Change the color of every pixel reading from black to the color it represents.
Change the font size/canvas size to proper proportions of printing.
Export the new images from my script.
Print the images – 20×24.
Sort the pixels by color value from light to dark.
Make a digital version that is interactive. Example: When you scroll over a value it increases in size.
Experiment with other ways in presenting this data.

Below are two examples of the data from one image.

ITP Winter Show Poster

I had a great time designing this poster for the ITP Winter Show. My original sketches morphed significantly, but I embraced the shift and came up with something I’m really excited about. I also learned that taking a step back in the design process and relaxing can up you up for new ideas. I struggled with what to put in the center of the poster playing with images and shapes, but nothing worked for me. It wasn’t until I took a break to watch an episode of The Great British Bake Off that the globe and wire idea came to my mind. Without finishing the show, I headed to my computer to finish the design.

Design Breakdown:

The background consists of random patterns that I drew and then pixelized. The primary purple color is the official NYU purple that I pulled from the school’s style guide. The other purples are variants on the NYU hue.

The globe in the center is wrapped in a thin wire. I was thinking about our program’s diversity and how we all can’t be together to share our work. The work is literally coming from all corners of the world. Technology (represented by wire) is bringing and holding us together.

I searched the Adobe font site for a futuristic style font that I think worked really well with the background pixelation.

Cornell Box

Over the holiday weekend, I asked some friends and family to name an object that reminded them of me. I really opened myself to some jokes with that question. All jokes aside, I got some sweet and fun answers. I took the responses and designed my Cornell Box.

To fill the box, I plan on scanning some of my personal objects and use found 3D objects. I also plan on scanning myself dancing.

This weekend I have started experimenting with Capture and Scandy Pro to 3D scan my personal objects. I’m running into problems getting clean scans. I’m finding the front-facing camera difficult to work with.

To scan me, I’m using in3D. This is also proving to be slightly difficult. I still haven’t been able to get a clean scan. To rig and put a motion to my character, I’m editing myself in Mixamo.

Color Of Me – The Secret Life of Color Review

For the Color Of Me exercise, I was drawn to a color pallet that is a little all over the place. Two colors are surprisingly similar, while one is almost a complete outsider. The colors are primarily warm and bright, but all in all, I think they go really well together.

To make my patterns, I first made a hand-drawn sketch that I imported into Photoshop. I then turned that sketch into a pattern that I further manipulated in the pattern tool. Originally, I wanted to use sharp lines in Illustrator but quickly tossed those for a loose hand-drawn feel better with the colors.

The Secret Life of Color Review:

I absolutely loved this podcast discussing the history of color. I personally take color for granted, whether it’s clicking on a color wheel or purchasing a tube of paint. I rarely do not have access to just the right shade of red, blue, or green. This, however, hasn’t always been the case, and this podcast playfully takes us down the vibrant history of our favorite pigments. To think if you weren’t in the right social class, you could be stripped of your lands if you wore the color purple. Or how the significance of the color blue completely changed after artists started depicting the Virgin Mary wearing it. The one thing that has always excited me about color and color use seems true throughout time; it is a powerful tool to express ourselves. Humans will go to great lengths and, unfortunately, to the demise of other beings to express their individualism. After listening to this podcast, I am thankful that the cost of color has come down so that the most vibrant colors are not restricted to the most wealthy.

One final thought that struck me was the comment that “Colors are culture creations.” We are constantly changing the meaning and representation of colors. In one generation, pink is considered the masculine color, and blue, the feminine color. Fast forward to another generation, and it’s the opposite. What this comment means to me is don’t feel obligated to follow the current culture of color. Create your own!

Expressive Words and Airline Ticket Redesign

This week we worked on expressive words and re-designing an airline boarding pass. Both projects sound simple, but I quickly noticed how slight adjustments drastically affect the overall composition and feel once I started. For the expressive words assignment, I spent a long time finding a font that matched the word’s feeling; for the airline, ticket spacing became critical. I was constantly sacrificing space for one piece of information to make another bolder. I thought a lot about standing in an airport and looking at my ticket. What information do I need the most? Boarding time, gate, zone, and seat stuck out. With that in mind, I gave that information the most priority.

Images and Pixels

The prompt for this assignment was to manipulate images or video on the pixel level. For a while now, I have been thinking about how we are inundated with images as a society. It would be difficult to go an entire day without seeing one. Does this make images less impactful? I think, to a certain extent, yes. Take Ansel Adams work in Yosemite as an example his black and white photographs shocked and awed people so much that they helped develop the National Park Service. Now we get a photo of Yosemite on our computer when we update operating systems. Does that image have the same impact as Ansel Adams? It’s technically perfect and aesthetically pleasing, but we’ve seen so many images of that same location that I think they’ve lost something. Don’t get me wrong I still believe that an image is one of the best storytelling devices, but sometimes it’s fun to experiment.

I wanted to take an image and break it down to its invidious R, G, B values per pixel for this project. With the hopes that we can take a fresh look at often photographed locations. To me, each one of these written values is a grain that we use to look at with a loop in the darkroom.

Here is the code:

The Results:

Entire Piece: https://editor.p5js.org/awinslow/present/dLGWTX_Qu

Zoomed in View:

____________________________________________

Entire Piece: https://editor.p5js.org/awinslow/present/dLGWTX_Qu

____________________________________________

Entire Piece: https://editor.p5js.org/awinslow/present/dLGWTX_Qu

Zoomed In View:

____________________________________________

Entire Piece: https://editor.p5js.org/awinslow/present/QXxllhi2D

I was pleasantly surprised at the patterns and movement in the numbers in each of the final pieces. I will be feeding more images into this program.

Design Analysis

I remember being blown away when I first saw the Moonlight movie poster at my local subway station. So let’s jump into breaking down this (in my opinion) beautiful poster.

At first glance, I’m drawn to the design’s simplicity—the portraits dominating the majority of the frame and are almost seamlessly stitched together. At a glance, you might miss that the images depict a man in three life stages youth, adolescents, and adulthood. This is confirmed with the small text at the top of the frame that reads, “This is the story of a lifetime.”

His eyes stare directly into the camera, almost encouraging the viewer to take his stare back.

By breaking the poster down with a grid, we can see that it’s framed with the classic rule of thirds composition with the subject’s eyes placed on and near the converging lines.

A second V-shaped grid breaks the portrait into thirds. The point of V emergences from the title and when drawn out resembles a light beam. Here too, the lines cut through the subjets eyes.

The negative space further highlights that the designer wanted the viewers to focus solely on the portrait. By having nothing else to look at, I’m drawn back to the eyes of the subject.

Three colors are used to distinguish the different life stages of the subject. The colors are all cool and resemble the color grading in the different stages of the actual movie.

Simple, clean, and small. The Underground Book font is used only to convey necessary information like the title and single line.