Category: Project-09-Portrait

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 09 - Computational Portrait

var siblingImage;

function preload() { // load image
    var siblingImageURL = "https://i.imgur.com/oi1ahe3.jpg";
    siblingImage = loadImage(siblingImageURL);
}

function setup() {
    createCanvas(320, 480); // same ratio as photo, 2:3
    background('white'); // white background
    rectMode(CENTER);
    siblingImage.loadPixels();
    frameRate(1000); // beginning frame rate
}

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);
    var theColorAtLocationXY = siblingImage.get(ix, iy);
    var psize = map(mouseY, 0, height, 1, 7); // size of rectangles based on y coordinate of mouse
    var pcorner = 1; // how curved the corners of the rectangle are
    var pdimenW = map(mouseX, 0, width, 4, 8); // As mouse moves to right, width increases, height decreases
    var pdimenH = map(mouseX, 0, width, 8, 4); // As mouse moves to left, height increases, width decreases

    noStroke();
    push()
    translate(px, py);
    if (mouseIsPressed) { // if mouse is pressed, rectangles are rotated 45 degrees
        rotate(PI / 4);
    }
    scale(psize); // rectangle size increases and decreases as mouse moves vertically
    fill(theColorAtLocationXY);
    rect(0, 0, pdimenW, pdimenH, pcorner, pcorner, pcorner, pcorner); //creates colored squares
    pop();
}

For this project, I chose a photo of my siblings and I when we were younger (I’m the one who’s lying on the floor half covered by a blanket). I wanted to create something that was fun and interactive, while also obscuring the contents of the photo a little, allowing you to view different layers of information, and conveying the emotions and silliness of that memory. The rectangles scale in size, width and height depending on the coordinates of the mouse, and when you click, the rectangles rotate 45 degrees.

• 

• 

• 

reshin-project-09

/*
Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 09 - Computational Portrait: Michelle
*/

var michelle;

function preload() {
//load image from imugr.com
    var myImageURL = "https://i.imgur.com/5AfjBeG.jpg";
    michelle = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    michelle.loadPixels();
    frameRate(200);
}

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);
    var theColorAtLocationXY = michelle.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    text("One FaceTime Away", px, py);
}

For this project, I decided to use a photo of one of my closest and best friends from home, Michelle. Ever since we met at orchestra camp, we didn’t get to see each other too often because we went to different high schools. Even now, she goes to school in Georgia now, so I don’t get to see her as often as I’d want. Both in high school and in college, we always remind each other that we’d be “One FaceTime Away,” and that became the basis and foundation of our time as best friends.

I found it fun to play around with what variable and pixel shapes I could change especially to literally compute an image that represented my friendship with Michelle.

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.