Category: SectionB

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.

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.

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//project-09

var img;
var WIDTH;
var HEIGHT;

var brightnessValues = [];  //stores the brightness values
var toggle = true;          //add a toggle for the for loop to help the code run faster

//x and y coordinate arrays for 4 shades
var curve1x = [];
var curve2x = [];
var curve3x = [];
var curve4x = [];

var curve1y = [];
var curve2y = [];
var curve3y = [];
var curve4y = [];

function preload() {
  img = loadImage("https://i.imgur.com/Aqg5q8V.jpg");

}

// getPixel: fast access to pixel at location x, y from image 
function getPixel(image, x, y) {
    var i = 4 * (y * image.width + x);
    return color(image.pixels[i], image.pixels[i + 1], image.pixels[i + 2]);
}

function setup() {
    //image is 480 x 480
    WIDTH = img.width;
    HEIGHT = img.height;
    createCanvas(WIDTH, HEIGHT);
    noFill();
    img.loadPixels();
}

function draw() {
    background(255);

    // Search and store brightness of each pixel. 
    //toggle: you only really need to load the brightness once, toggle can be re-toggled later
    if (toggle) {
    for (var i = 0; i < img.width; i++) {
        for (var j = 0; j < img.height; j++) {
            var b = brightness(getPixel(img, i, j));

            //sort vertices depending on brightness levels
            if (b < 0.04) {
                curve1x.push(i);
                curve1y.push(j);
            }
            if (b >= 0.04 & b < 10) {
                curve2x.push(i);
                curve2y.push(j);
            }
            if (b>= 10 & b < 40) {
                curve3x.push(i);
                curve3y.push(j);
            }
            if (b >= 40 & b < 100) {
                curve4x.push(i);
                curve4y.push(j);
            }
        }
    }
    toggle = false;

    }

    //LIGHTEST - light blue
    stroke(200, 220, 255, 50);
    drawCurve (curve4x, curve4y);
    //LIGHT -medium blue
    stroke(100, 120, 255, 50);
    drawCurve (curve3x, curve3y);
    //DARK - blue
    stroke(0, 0, 255, 50);
    drawCurve (curve2x, curve2y);
    //DARKEST - dark gray
    stroke(50, 100);
    drawCurve (curve1x, curve1y);
}

function drawCurve (x, y) {
    //originally I wanted to create a continous line through vertices,
    //but it was getting overcrowded, so to ket the sketch-like feeling
    //I used random circle sizes
    // beginShape();
    for (i = 0; i < x.length; i+=4) {
        circle(x[i], y[i], random(10));
        // curveVertex(x[i] + random(15), y[i] + random(15));
    }
    // endShape();
}

For this assignment, I used a portrait I took of my sister. I wanted to somehow show her personality through the portrait, hence using blue, her favorite color. Originally, I was inspired by the one-line contour drawings and set out to create those with 4 different continuous lines, each for 4 different shades of brightness.

I couldn’t figure out how to create a non-messy looking portrait, so instead I slowly shifted to using circles. I still wanted to retain the drawing-like feel, which can be shown in the final right now. Going back to showing her personality through the piece, I thought the varying sizes of the circles and varying capacities also shows her kind and loving personality.

• 

• 

•