Category: Project-09-Portrait

Project

/*Sharon Yang
Section C
junginny
Project-09
*/

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/ZnYAlHy.jpg"; //image of my boyfriend smiling
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(300);
}

function draw() {
    var px = random(width); //the coordinates of where shapes created are randomized
    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); //get the colors of the pixel

    noStroke();
    fill(theColorAtLocationXY);
    drawShape(px, py, 5, 10);
}

function drawShape(x, y, radius1, radius2) { //draw star shape
    var angle = TWO_PI/5;
    beginShape();
    for (var i = 0; i < TWO_PI; i += angle) {
    var starX = x + cos(i) * radius2;
    var starY = y + sin(i) * radius2;
    vertex(starX, starY);
    starX = x + cos(i+angle/2) * radius1;
    starY = y + sin(i+angle/2) * radius1;
    vertex(starX, starY);
  }
  endShape(CLOSE);
}

I have used an image of my boyfriend.  The project incorporated a very interesting concept. However, because I used the star shape, and also the image was quite blurry, it became really hard to make out of what the image is.

kzr project 09

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_09*/
var underlyingImage;
//making count variable, for end point and for switching point
var count = 0;

function preload() {
    var myImageLink = "https://i.imgur.com/UPry60m.jpg";
    myImage = loadImage(myImageLink);
}

function setup() {
    noStroke();
    createCanvas(480, 480);
    background(0);
    myImage.loadPixels();
}

function draw() {
    var posX = random(width);
    var posY = random(height);
    rectMode(CENTER);
    //front half uses createRect function
    if(count <= 5000) {
        var countMap1 = map(count,0,5000,100,20);
        createRect(int(posX),int(posY),countMap1 / 10);
        count++;
    }
    //back half uses detailedRect function
    else if(count <= 10000) {
        createDetailRect(posX,posY,2);
        count++;
    }
}
//making larger crosses at the beginning
function createRect(initialX, initialY, size) {
    var iX = constrain(floor(initialX), 0, width - 1);
    var iY = constrain(floor(initialY), 0, height - 1);
    var pixelColor = myImage.get(iX, iY);
    fill(pixelColor);
    for(var i = size; i > 0; i --) {
        var cCoord = map(i,0,size,size * 2,0);
        rect(initialX + cCoord,initialY,i,i);
        rect(initialX - cCoord,initialY,i,i);
        rect(initialX,initialY - cCoord,i,i);
        rect(initialX,initialY + cCoord,i,i);
    }
}
//making detailed shapes for the end
function createDetailRect(initialX, initialY, size) {
    var iX = constrain(floor(initialX), 0, width-1);
    var iY = constrain(floor(initialY), 0, height-1);
    var pixelColor = myImage.get(iX, iY);
    fill(pixelColor);
    for(var change = 0; change <= 12; change ++) {
        var side = map(change,0,12,1,0);
        rect(initialX + (change / 2),initialY,size * side,size * side);
        rect(initialX,initialY + (change / 2),size * side,size * side);
        rect(initialX + (change / 2),initialY + (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY,size * side,size * side);
        rect(initialX,initialY - (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY - (change / 2),size * side,size * side);
        rect(initialX + (change / 2),initialY - (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY + (change / 2),size * side,size * side);
    }
}

I started this project by making a function based on the example code in the project description. It was pretty cool modifying the code and seeing what shapes appeared, and I played around with making an overall count variable that caused the size to decrease, increasing the detail. If I had more time, I would have played around with constraining the detailing after the count was above 5000, to constrain it to areas that had not been filled in. Overall, though, I am pretty satisfied with this project.

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-09
*/
 
var nick;
var i = 17.5;
var circ = i / 2; 

function preload() {
    var myImageURL = "https://i.imgur.com/v0CY2zp.jpg";
    nick = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    nick.loadPixels();
    frameRate(10);
    noStroke();
}

function draw() {
        gridImg();
        bar();
        repaint();
}

function bar() {
    if(mouseIsPressed){
        fill(0, 45, 80);
        rect(0, 0, width, 2 * i);
    } else {
        fill(0, 80, 45);
        rect(0, 0, width, 2 * i);
    }
}

function repaint(){
    if(mouseIsPressed){
        for(var px = 0; px < width; px += i){
            for(var py = 2 * i; py < height; py += i){
                fill(random(0,20),random(50,90),random(50,110));
                ellipse(px + (i / 2), py + (i / 2), circ);
            }
        }
    }
}

function gridImg() {
    for(var px = 0; px < width; px += i){
        for(var py = 0; py < height; py += i){
            var ix = constrain(floor(px), 0, width - 1);
            var iy = constrain(floor(py), 0, height - 1);
            var theColorAtLocationXY = nick.get(ix, iy);
            fill(theColorAtLocationXY);
            rect(px, py, i, i);
            fill(random(0,20),random(50,110),random(50,90));
            ellipse(px + (i / 2), py + (i / 2), circ);
        }
    }
}

In the project brief, I was most excited by the work of Chuck Close. I was interested in the construction of his portraits and how he can create new colors simply by nesting circles within polygons. I wanted to find the overlap between systematic painting techniques and digital media. Knowing that Close uses complimentary colors to create his specific optical hues, I selected green and blue to compliment the pinks and rust oranges in the photo of my friend, Nick.

Once I created the gridded out and dotted portrait, I wanted to make it feel less static. To do this, I randomized each circle so that the colors are statistically more likely to be a shade of green, but when the viewer clicks on the portrait, these dots shift towards favoring shades of blue.

I genuinely enjoyed this project once I got the hang of it. Sending progress pictures of the portrait to my friend drove me to keep pushing myself forward.