Category: Uncategorized

Sarah Choi – Project – 09 – Computational Portrait

project-09

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-09

var underImage;

function preload() {
    var image = "https://i.imgur.com/YcBwEXw.jpg";
    underImage = loadImage(image);
}

function setup() {
    createCanvas(350, 400);
    underImage.resize(350, 400);
    background(0);
    underImage.loadPixels();
    frameRate(20);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var xx = constrain(floor(px), 0, width-1);
    var xy = constrain(floor(py), 0, height-1);
    var colorXY = underImage.get(xx, xy);

    stroke(colorXY);
    strokeWeight(random(5, 20));
    noFill();
    ellipse(xx, xy, 20, 10);
}

function mouseDragged() {
    rect(mouseX, mouseY, random(5, 20), random (5, 40));
}

For my project, I chose a portrait of my father when he was living in New York, and we would go on father-daughter adventures. This was one of the most memorable days I had with him, which is why I wanted to depict my father through one computational project. Because of this, I loaded the pictures with ovals as shown in the original picture below, my father was always a huge fan of vintage oval-shaped sunglasses. On top of that, I wanted to use the drag function to use rectangular shapes to fill the canvas. It reminded me of the jazz music being played in the living room every Sunday morning.

Hyejo Seo-Project 09 – Portrait


sketch

/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project - 09 - Portrait
*/
var myPicture;

function preload() {
    var myImageURL = "https://i.imgur.com/1g3A3AE.jpg";
    myPicture = loadImage(myImageURL);
}
function setup() {
    createCanvas(myPicture.width, myPicture.height);
    background(0);
    // loading pixels
    myPicture.loadPixels();
    // setting the rate letter 
    frameRate(200);

}

function draw() {
    var px = random(width);
    var py = random(height);
    var xx = constrain(floor(px), 0, width);
    var xy = constrain(floor(py), 0, height);
    // getting color of each pixel 
    var theColorAtXY = myPicture.get(xx, xy);
    noStroke();
    fill(theColorAtXY);
    // writing the letter R in each pixel randomly
    textSize(20);
    textFont('Avenir');
    text("R", px, py);  

}

For this project, I decided to use a picture of my bestfriend, Raphael. I set the frame rate fairly high so the letter “R” fills up fast enough. This was an interesting project overall, and I got more comfortable with playing around with pixels. 

Shannon Ha – Project 09 – Portrait

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 09 - Variable Face

//pre load my underlying image
var underlyingImage;
var frameSpeed = 15;
function preload() {
    var myImageURL = "https://i.imgur.com/AAXi1mS.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(344, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    underlyingImage.loadPixels();
    framespeed = map(mouseX, 10, width, 2, 150);
    frameRate(frameSpeed);
}

function draw() {
//randomly select a pixel on the canvas
    var randomX = random(width); //x-coordinate
    var randomY = random(height); //y-coordinate
    var ix = constrain(floor(randomX), 0, width-1);
    var iy = constrain(floor(randomY), 0, height-1);
//loads the color from the base image so the rectangles coordinate with the colors of the base image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

//creates rectangles at different sizes.
    noFill();
    stroke(theColorAtLocationXY);
    strokeWeight(random(1,3));
    rect(randomX, randomY, random(5,20), random(5,20));

//creates circles according to position of mouse.
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    strokeWeight(1);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 15, 15);
}

(20 seconds)
(30 seconds)
Nearly finished render (1 – 1:30 minutes)
The actual photo!

For this project, I chose a portrait of my sister to recreate and explored how to randomize the dimensions of of a rectangle to create variable portrait. I tested different shapes both filled and unfilled to see which has a better effect for the end result and I realized that the filled shapes some times makes the face look too blurred out so I used stroke instead to retain some texture in the image and to distinguish facial features better. It was a fun project to do because it was interesting to see how different shapes produce different textures and effects on the image.

Shariq M. Shah – Project 09 – Portrait

shariqs-09-project

// Shariq M. Shah
// Project 09
// Section C

var underlyingImage;

function preload() {
    //changing example image
    var myImageURL = "https://i.imgur.com/hpfafgd.jpg[/img]";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

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

    noStroke();
    fill(theColorAtLocationXY);
    //making size of "pixels" geometries proportional to distance from CENTER
    ellipse(px, py, 0.05 * dist(px, py, width/2, height/2), 0.05 * dist(px,     py, width/2, height/2));

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    noFill();
    //drawing ellipses based on mouse location
    ellipse(pmouseX, pmouseY, 10, 10);
    //placing "mom" text at each ellipse
    textSize(0.03 * dist(px, py, width/2, height/2));
    text('mom', px, py);
}

In this project, I used a picture of my mom from when we went on a family trip to Chicago this summer. I used small ellipses and text that change in size based on their distance from the center to develop the computational portrait of my mom. In addition, small empty ellipses are drawn with colors of the picture as the user moves the mouse. The drawn ellipses, the “pixel” ellipses, and the text make up the overall computational portrait of my mom. She’ll love seeing this when I go back for Thanksgiving break.

My mom in Chicago.

Shariq M. Shah – Looking Outwards 09


The Looking Outwards that I found particularly interesting was Tai Manheim’s exploration of the work of Stamen, an artificial intelligence tool used to analyze wealth and poverty at an urban scale. The project was developed by Stamen and researchers at Carnegie Mellon University and it implements neural networks to develop machine learning frameworks that take in information on infrastructure in various neighborhoods and subsequently uses the information to make predictions on the average income of the areas. I found Tai’s explanations of the digital techniques and data structure networks that make this project possible to be highly informative and intriguing. With a project of this scope, there are inevitably associations and unintended associations made between income, race, crime, and location which can be used negatively for increased surveillance and policing strategies. This raises issues on the interface between Artificial Intelligence, machine learning, and politics, as the impressions and conclusions derived from a project like this may be based on hard data, but can be used negatively. There are also clear design incentives as to how residential areas can be organized better according to the data found from a project like this.

https://stamen.com/work/penny/

https://courses.ideate.cmu.edu/15-104/f2019/2019/10/06/taisei-manheim-looking-outward-07/

Sarah Kang-Project-09-Computational Portrait

portrait

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-09-computational-portraits

var underlyingImage;

function preload() {
    var myImg = "https://i.imgur.com/kLHusSC.jpg";
    currImage = loadImage(myImg);
}

function setup() {
    createCanvas(244, 480);
    background(0);
    currImage.loadPixels();
    frameRate(100);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var imgW = random(2, 20);
    var imgH = random(2, 20);
    var txtsize = random(1, 10);

    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = currImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, imgW, imgH);

    fill(theColorAtLocationXY);
    textSize(txtsize);
    textFont('Arial');
    text("chicken parm", mouseX, mouseY);

    /*var theColorAtTheMouse = currImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    line(pmouseX, pmouseY, mouseX, mouseY);*/
}

This was the most recent portrait picture I had on my phone, from when I visited my best friend from home last weekend. I thought the random ellipses made nice compositions and texture with the color areas and palettes in this picture. “chicken parm” is also what we had for breakfast in this picture.

After a few minutes
my best friendd

Sarah Kang-Looking Outwards-09

Baby Groot, Guardians of the Galaxy Vol. 2, Framestore, 2017

For this week’s post, I found Youie Cho’s looking outwards post in week 5 to be particularly interesting because it had Baby Groot, my favorite Guardians of the Galaxy character. The artwork in focus is the computer graphics work of Framestore, a collective of film, advertising, and content artists. Like Youie, I’m also inspired and impressed by the attention to detail and careful development in putting Baby Groot’s animated character into the context of the movie, down to the details of its walking patterns and speed. I especially love how Framestore extensively researched the characteristics of babies and children when imagining Baby Groot’s character. Being aware of the these “behind-the-scenes” processes in Baby Groot’s character development enables viewers to make a more humanistic connection to the character in the movie and makes Baby Groot even more lovable.

YouieCho-LookingOutwards-05
Youie Cho’s original Looking Outwards Post

Monica Chang – Project – 09 – Portrait

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 09 - Computational Portrait

function preload() {
    var myImageURL = "https://i.imgur.com/3WVgXfE.jpg";
    itMe = loadImage(myImageURL); //uploading my image
}


function setup() {
    createCanvas(360, 480);
    background(0);
    itMe.loadPixels(); //pixelates the image
    frameRate(4000); // rate of generating pixels
}

function draw() {
    var px = random(width);
    var py = random(height);
    var size = random(3, 8);
    var offset = 15;

    var cx = constrain(floor(px), 0, width-1);
    var cy = constrain(floor(py), 0, height-1);
    var imgColor = itMe.get(cx, cy);

    noStroke();
    fill(imgColor);
    ellipse(px, py, size);
    textSize(size);
    textFont("Georgia");
    text("M", px + offset, py);
}

Original Image of myself. Self-Portrait.
Mid-drawing of computational portrait.

I chose to approach this project with a self-portrait.

I think this was one of the easiest but one of the more fun projects we have done this semester. Just like all the other projects, this was very open-ended which allowed me to explore different options comfortably although I struggled to find what else I could do to the image. This also gave me a chance to look at some beautiful photos I had abandoned.

Margot Gersing – Project 09

mgersing-09

//Margot Gersing - Project 09 - mgersing@andrew.cmu.edu - section E

var img; //original image
var sizeOne; //pixel size one
var sizeTwo; //pixel size two


function preload() {
    img = loadImage('https://i.imgur.com/Tx6sITJ.jpg?2'); //preload the image
}

function setup() {
    createCanvas(500, 761); //cnavas side of the image
    sizeOne = 1; //setting pixel size one to one
    sizeTwo = 20; //setting pixel size two to 20
    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels(); //pixelate the image
    frameRate(10000); //fast frame rate to load pixels faster

}

function draw() {
    //map the pixels size from 1 to 20, based on mouse postion
    var size = map(mouseY, 0, height, sizeOne, sizeTwo);
    var sizeW = map(mouseX, 0, width, sizeOne, sizeTwo);
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    var pix = img.get(x, y);
    fill(pix, 128);
    ellipse(x, y, size, sizeW); //pixel is a ellipse based on the mapped size from mouse position
}

My grandmother, 11 or 12 (1940s)

For this project I decided to do a portrait of my grandmother when she was 11 or 12. I really like this photo of her and how it serves as a view into the past. It’s interesting to use such an old photo (1940s) in such a modern context and project.

I decided to have the pixels size dependent on the mouse position. This way you can control the way the image looks. The timing of when and where your mouse is also affects how the image will turn out.

variations on the image dependent on the mouse location and time.

Xiaoyu Kang – Project 09 – Computational Portrait

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-09

var baseImage;

function preload() {
	//loadimage
    var imageURL = "https://i.imgur.com/WFLOSwy.jpg";
    baseImage = loadImage(imageURL);
}

function setup() {
    createCanvas(500, 320);
    background(0);
    baseImage.loadPixels();
    frameRate(150);
}

function draw() {
	//define location
    var x = random(width);
    var y = random(height);
    //define color
    var ix = constrain(floor(x), 0, width - 0.1);
    var iy = constrain(floor(y), 0, height - 0.1);
    var ColorXY = baseImage.get(ix, iy);

    //draw circle
    noStroke();
    fill(ColorXY);
    ellipse(x, y, 6, 6);

    //draw square
    noStroke();
    fill(ColorXY);
    rect(x + random (-2, 2), y + random (-2, 2), 3, 3);

    //draw bigger circle when mouse is pressed
    var ColorMouse = baseImage.get(mouseX, mouseY);
    if (mouseIsPressed){
        fill(ColorMouse);
        ellipse(mouseX, mouseY, 10, 10);
	}
}

For this project, I used my friend Claire’s photo to generate the portrait. I used an combination of circle and suqare shapes appearing at random location to create the final image. I also wrote the code that when the mouse clicks, a bigger circle appears at the mouse location.