Month: October 2019

sketch

// Nadia Susanto
// nsusanto@andrew.cmu.edu
// Section B
// Project-09-Computational Portrait

var underImage;

function preload() {
    //preloading image from imgur
    //var myImage = "https://i.imgur.com/R80wzCp.jpg";
    var myImage = "https://i.imgur.com/uezsOBb.jpg";
    underImage = loadImage(myImage);
}

function setup() {
    createCanvas(480, 480);
    //resize the image so it fits the canvas
    underImage.resize(480, 480);
    background(0);
    underImage.loadPixels();
    frameRate(100);

}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    //gets colors from specific image location
    var colorXY = underImage.get(ix, iy);

    //random rectangles
    stroke(colorXY);
    strokeWeight(random(1, 10));
    noFill();
    rect(ix, iy, 20, 10);
}

//random ellipses when mouse is pressed
function mouseDragged() {
    ellipse(mouseX, mouseY, random(5, 50), random(5, 30));
}

For my portrait picture I used a picture of myself in a bamboo forest in Japan. I decided to use this picture because it has many different shades of green to the image. Since there was only one main color, I wanted to incorporate different shapes. The main shape is a rectangle, and when the mouse is dragged it switches to ellipses.

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.