ICM – Alan Winslow

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.

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.

Objects and Arrays

After going over the week’s tutorials, I felt confused. I understood the fundamentals but couldn’t think of a project to do. I re-watched the tutorials and searched the web for some inspiration but was blocked. Finally, I just started sketching in my notebook, reminding myself to think of a simple program that I could test things out. It’s not the most exciting script, but I came up with a thatch type grid with ever repeating colorful ellipses.

Here is my primary sketch.

After a great deal of trial and error, I was able to hobble my way to a completed sketch based on my drawing with a few modifications.

I wanted half of the ellipses to go up and a half to go down.
I wanted the lines to turn around once they’ve reached the opposite side.

Because I tried so many different approaches and saved them separately, my final code became really confusing, with oddly named variables and useless code.

It was important for me to work on this alone to figure out what I really need to work on. This proved to a very frustrating challenge.

Below are the sketches I saved throughout this process.

Warning, they are full of errors.

Leaves falling animation

This week our assignment was to either re-work or create a new script using functions to compartmentalize our code. I like starting from scratch so that I can redo things I’ve already learned while adding new features. So here we go! The leaves are changing here in NYC, so I thought, why not do a Fall theme.

To start, I wanted to make static leaves of varying colors. I created a function called “leaf” within it; I drew the leaf shape, gave them random fall colors, and placed them randomly throughout the frame.

I was happy with what I had so far, but I wanted to add some animation or movement to the piece. Ideally, I wanted the leaves to change color and fall. To tackle this, I started researching how to make the leaves change over time. First, I tried LerpColor. Below is the description from the P5JS reference page.

“Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp() but necessary because otherwise, numbers outside the range will produce strange and unexpected colors.”

I couldn’t get this to work for me and thought it had to do with the fact that I called noLoop() at the beginning of my script. Next, I tried using an if statement and framerate(). Again, I couldn’t seem to get it to work.

I needed another set of eyes on my problem, so I reached out to Peiling Jiang at the Coding Lab. We had a great hour-long conversation, and since I had already started reading about classes and arrays, he thought we could incorporate them into my project.

Slowly with his incredible patients, we made our way through the project. First, we made a class for leaf rather than just a function. Inside that class, we could do everything I wanted to do from having the leaves color change to make them fall based on the script’s framerate.

All in all, it was a success, and a big thanks go out to Peiling for help.

p5js – Self Portrait and Looking Ahead

Being completely new to coding, I was unsure how to start my first assignment, making a sketch using primitive shapes and color tools. After watching the tutorials and reading all the documentation, I knew I had to jump in, make a ton of mistakes, and learn by trial and error. The p5js reference documentation quickly became my friend.

The first problem I encountered was understanding how the X-axis and Y-axis worked. Frustrated on how to lock down locations, I started to research online. Eventually, I stumbled upon a former ITP student blog post on this very assignment.

Vidia spoke about how she found an Image Map Generator site that would plot the drawing’s edge coordinates. I played around on this site for a while but couldn’t get it to work; I would like to explore it more once I have more experience under my belt.

Back to my sketch, I started placing shapes and moving them around to get a better grasp of coordinates. Since I was drawing a face and wanted symmetry, the second feature fell into place much quicker.

The next problem I struggled with for a long time was producing an arc. I couldn’t wrap my head around how to specify the angles in radians. With a little research, I found if I placed. angleMode(DEGREES); at the beginning of my sketch, I could work in degrees instead of radians, which made a lot more sense to me.

The final problem I encountered was working in the proper order. I originally drew the entire sketch and waited to color and remove strokes at the end. Quickly finding out that color was applied to everything below.

Final Note: I found that organization and notes are essential. I ended up breaking each section of the face-up with comments so I could go back later and make corrections.

Rough Draft Sketch:

Final Sketch:

Code Example:

My final code: Assignment 1

This exercise has got me thinking about the types of projects I would like to work on this term. I have been working as a photographer during my entire career and have always been drawn to public art and interactive art. The two main reasons I like this style of work is because, for one, I find public art more disarming and accessible. Two, I find that interactive work gets a level of engagement, both active and passive, that static art doesn’t.

In the past, I would have to hire developers to help me achieve my vision. Eventually, this would work, but it came with a host of problems, including:
1) I would have to secure more grant funding to cover the costs of bringing on help.
2) Without proper training, I only had a basic understanding of the technologies available and how to work with them. This left me feeling that I wasn’t pushing my work as far as I could.

This term, I am looking forward to grasping the necessary computation skills to make me a better teammate and explore new techniques to create more dynamic public art.

My work has been focused primarily on putting visuals to scientific research. I would like to continue down this track but also make purely visual pieces this term. For these reasons, I think I’m particularly drawn to these three pieces:

HintFM : Wind Map
Jill Hubley: NYC Trees
TeamLab: Universe of Water Particles Falling from the Sky