Jenni Lee — Project 09 — Portrait

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project - 09
*/

var underlyingImage;

function preload() {
  var myImageURL = "https://i.imgur.com/VBTpoj5.jpg"; // i uploaded my own photo to http://i.imgur.com and get this link
  underlyingImage = loadImage(myImageURL);
}

function setup() {
  createCanvas(720, 480);
  background(0);
  underlyingImage.loadPixels();
  frameRate(2000); // make frame rate high to updare the image faster
}

// this function/routine is to get the pixel value of (x, y)
function getPixel(image, x, y) {
  var pix = 4 * (y * image.width + x);
  return color(image.pixels[pix], image.pixels[pix + 1], image.pixels[pix + 2]);
}

var iClickCurrent = 0,
  iCurrentEffect = 0,
  iPrevEffect = 0;

function draw() {
  if (iClickCurrent == 0) {
    drawGraduallyUsingEffects();
  } else { // display the final result at once instead of waiting for gradual update
    drawAtOnceUsingEffects();
  }
}

function drawGraduallyUsingEffects() {
  var px = random(width); // get a random x position
  var py = random(height); // get a random y position
  var ix = constrain(floor(px), 0, width - 1); // constrain it within canvas
  var iy = constrain(floor(py), 0, height - 1); // constrain it within canvas
  var theColorAtLocationXY = getPixel(underlyingImage, ix, iy);

  if (iCurrentEffect == 0) {
    fill(theColorAtLocationXY);
    text("i am jenni", ix, iy); // using text to update the image
  } else if (iCurrentEffect == 1) {
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(ix, iy, 10, 10); // using circle
  } else if (iCurrentEffect == 2) {
    noStroke();
    fill(theColorAtLocationXY); 
    rect(ix, iy, 10, 10); // using rect
  }
}

function drawAtOnceUsingEffects() {
  var i = 0;
  // noprotect
  for (var iy = 0; iy < underlyingImage.height; iy += 5) {
    for (var ix = 0; ix < underlyingImage.width; ix += 5) {
      var theColorAtLocationXY = getPixel(underlyingImage, ix, iy); // get the color of the current pixel and drive an effect
      if (iCurrentEffect == 0) {
        fill(theColorAtLocationXY);
        text("i am jenni", ix, iy);
      } else if (iCurrentEffect == 1) {
        noStroke();
        fill(theColorAtLocationXY);
        ellipse(ix, iy, 10, 10);
      } else if (iCurrentEffect == 2) {
        noStroke();
        fill(theColorAtLocationXY);
        rect(ix, iy, 10, 10);
      }
    }
  }
}

function mousePressed() {
  iClickCurrent = (iClickCurrent + 1) % 2;
  if (iClickCurrent == 0) {
    while (iCurrentEffect == iPrevEffect) { // make sure the effect doesn't repeat
      iCurrentEffect = floor(random(0, 3)); // get random selection of effect
    }
    iPrevEffect = iCurrentEffect;
    loop ();
  }
  else {
    noLoop ();
  }
  background(0);
}

For this portrait project, I applied 3 effects onto a photo of myself from when I was in elementary school. The 3 effects I used were squares, ellipses, and the phrase “I am Jenni.” It was fun to choose a photo and customize the effects.