ICM Media Week 2: Color

Instructions: left slider controls the opacity of the strokes, right slider changes the reference image. You can save your work by pressing the "save painting" button which currently only works on the p5.js web editor - you can access the code here.

This week I was inspired by our class lecture featuring various modern artists who focus on color and composition to evoke specific emotional responses in their viewers. I studied a lot of the modern classics in my undergraduate studies and one of them was Mark Rothko. In all honesty, it's hard to be convinced by his work until you see it in person, and small color copies in text books don't do them justice. Years ago I had visited Rothko Chapel in Texas to get the full impact of his work. He wanted to be able to produce a religious/spiritual experience when viewing his paintings. I never got that far, but I did find them very meditative and reflective. The sheer scale and size of them alone are a large part of the experience, allowing the colors to fully engulf your vision.

Since this week was/is extremely stressful, I wanted to make something that would be calming to look at and fun to play with, similar to my experience seeing an actual Rothko painting. So I decided to find a way to make my own "DIY" Rothko painting.

What Worked

This sketch was quite easy to put together. I followed some of The Coding Train videos to help me set up a particle system that would be used to dynamically paint the image.

At that point I just had to find the reference images I wanted to use and to add a few buttons and sliders that allowed the user to change the way the colors and stroke painted on the canvas. I might also try allowing the mouse to have some control as well, which would give the user even more control over how the painting gets made.

I was pleasantly surprised I was able to use my newfound knowledge of arrays to create a slider that cycles the reference images, and it was very easy to implement into the code I already made for particle system. That was something I was proud of in this sketch.

What Didn't Work

I was originally a lot more ambitious this week, but due to the stress of the election and getting food poisoning I didn't have a lot of time to work on it. Originally I wanted the user to have more control when creating the painting and I didn't want to use pixel data from Rothko's actual paintings. But honestly I was pretty happy with the results and I found it to be a nice homage to his work - rather than a pastiche. Well, maybe this still is a bit of a pastiche.

What I Learned

I learned two COOL NEW FUNCTIONS this week!! I learned how to save an image of the canvas to your desktop using a handy little function called save(). Which you can see here:

let button;

function setup() {
  cnv = createCanvas(580, 830);
  button = createButton('save painting');
}
// Saves the canvas as an image
function myPainting() {
  save(cnv, 'myPainting.jpg');
}

I also learned about the floor() function, which allowed me to map the color value from the pixel in reference image to the line being drawn at the same location. It basically takes a number and rounds it down the nearest integer, then returns it. You can see the example from my code here:

 this.show = function() {

    noStroke();
    let pixelx = floor(this.x); //floor rounds down to the nearest whole number
    let pixely = floor(this.y);
    let col = img[slider2.value()].get(pixelx, pixely); //color is determined by pixel value
    stroke(col[0], col[1], col[2], slider.value()); //alpha is determined by slider value
    strokeWeight(random(3, 10))
    fill(col[0], col[1], col[2], slider.value());
    line(this.x, this.y, this.x, this.y + random(5, 30))

Overall I had a lot of fun making this sketch this week. p5.js is a pretty powerful tool and I'm liking it more and more every day!