Bettina-Project09-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Sectin C
// Project 9: Pixelated Image

var img;

function preload() {
    img = loadImage("https://i.imgur.com/H1lewvj.jpg");
}

function setup() {
    createCanvas(320,480);
    imageMode(CENTER);
    background(255);
    img.loadPixels();
}

function draw() {
      scale(.5,.5); //image is double size of canvas, just scaling down to fit
      var x = floor(random(img.width));
      var y = floor(random(img.height));
      var col = img.get(x, y); //retrives RGBA value from x,y coordinate in image
      //fill(col);
      var weight = 640/(brightness(col));
      stroke(col);
      strokeWeight(weight);
      strokeCap(SQUARE);
        //ellipse(x,y,30);
      line(x, y, x-25, y-25);
      }

I wanted to build off the brightness indicators we learned last week with the eye-tracking project. In art, darker colors have more weight, so I made the thickness of the strokes depend on the darkness. I chose diagonal lines to mimic the motion in the original picture, in which my friend stands within the famous LACMA spaghetti installation. Initially, I tried drawing each line in order by calling each pixel by row and column. However, that method not only was inefficient (taking at least 10 seconds to compile) but the order felt rigid. Instead, I call each pixel randomly. Not only is it more efficient, but the audience can watch the image unfold and the randomness adds a sense of movement to the piece that honors the original photo.

Top: An early iteration. Below: Screenshot of what the final image may look like.