Alec Albright – Project 09 – Portrait

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 09

var original; // original image
var words; // bank of words to be displayed

function preload(){
    // original image URL
    var imageURL = "https://i.imgur.com/pfJvLUW.jpg";
    // load original image
    original = loadImage(imageURL);

    // populating the words array
    words = ["Years", "from", "now", "our", "past", "will", "be", "a", "story"];
}

function setup(){
    createCanvas(384, 480);

    // resize image to fit in constraints
    original.resize(384, 480);
    // load pixels
    original.loadPixels();

    background("black");
    frameRate(20);
}

function draw(){
    // initializing random places to place words
    var px = random(width);
    var py = random(height);

    // to be used for finding the color from the original image
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);

    // getting color from original image
    var theColorAtLocationXY = original.get(ix, iy);

    // text size dependent on mouseX
    textSize(map(mouseX, 0, 384, 8, 14));


    // displaying words dependent on where they're placed
    // top row
    if(py < 160) {
        // "years"
        if(px < 128) {
            fill(theColorAtLocationXY);
            text(words[0], px, py);
        // "from"
        } else if(px >= 128 & px < 256) {
            fill(theColorAtLocationXY);
            text(words[1], px, py);
        // "now"
        } else {
            fill(theColorAtLocationXY);
            text(words[2], px, py);
        }
    // middle row
    } else if(py >= 160 & py < 320) {
        // "our"
        if(px < 128) {
            fill(theColorAtLocationXY);
            text(words[3], px, py);
        // "past"
        } else if(px >= 128 & px < 256) {
            fill(theColorAtLocationXY);
            text(words[4], px, py);
        // "will"
        } else {
            fill(theColorAtLocationXY);
            text(words[5], px, py);
        }
    // bottom row
    } else {
        // "be"
        if(px < 128) {
            fill(theColorAtLocationXY);
            text(words[6], px, py);
        // "a"
        } else if(px >= 128 & px < 256) {
            fill(theColorAtLocationXY);
            text(words[7], px, py);
        // "story"
        } else {
            fill(theColorAtLocationXY);
            text(words[8], px, py);
        }
    }

    // fill in dots depending on where the mouse is
    var mouseColor = original.get(mouseX, mouseY);
    noStroke();
    fill(mouseColor);
    ellipse(mouseX, mouseY, 5);
}

In approaching this project, I immediately knew I wanted to create a portrait of my long-time girlfriend, displaying our favorite quote: “Years from now, our past will be a story”. I wasn’t quite sure how to go about displaying the quote, so I decided to section off areas of the canvas for each specific word so it read like a book from left to right and top to bottom. Once this was ironed out, the difficult part was implementing text size so that the quote was readable but also allowed for a decently quick creation of the image. Thus, I used this as an opportunity to implement a cool feature, so I mapped text size to the x coordinate of the mouse.