Month: October 2019

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.