Category: Project-09-Portrait

sihand – pixel portrait

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Project Week 09: pixel portrait

var sAngle = 5;
var sRadius = 1;
var sFrameCount = 0;
var ellipseW = 5;
var portraitW;
var portraitH;

function preload() {
	var myImageURL = "http://i.imgur.com/GJ7CafK.jpg";
	portrait = loadImage(myImageURL);
}

function setup() {
    portraitW = portrait.width;
    portraitH = portrait.height;
    
    //canvas size is identical to that of the portrait
    createCanvas(portraitW, portraitH);
    background(240);
    portrait.loadPixels();
}

function drawSpiral() {
    //spiral starts at the middle of the canvas
    translate(width/2, height/2);
    var centerX = 0;
    var centerY = 0;
    var x = cos(radians(sAngle)) * sRadius;
    var y = sin(radians(sAngle)) * sRadius;

    //capture the color of the pixels
    noStroke();
    var theColorAtLocationXY = portrait.get(width/2 - x, height/2 + y);
    fill(theColorAtLocationXY);
    
    ellipseMode(CENTER);
    ellipse(centerX - x, centerY + y, ellipseW, ellipseW);
    
    //pixel dimensions
    sAngle = sAngle + 3; //the angle between rays of pixels
    sRadius = sRadius + 0.05; //the density of the spiral
    sFrameCount = sFrameCount + 1; //count of number of pixels
    ellipseW = ellipseW + .0003; //the increase in pixel size

    //when there are more than a certain number of pixels, start over
    if (sFrameCount > 10000) {
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        ellipseW = 5;
        background(240);
    }

    print(frameCount);

}



function draw() {
	drawSpiral();
}

I experimented with a few images on pixel sizes, pixel distance, and spiral “density”. Overall, portraits with a focus in the middle work best for two reasons 1) when the distance between pixels is small,  more details are “smudged” towards the periphery; 2) when the distance is larger, the pixels are further apart towards the periphery, therefore depicting fewer details. Below are some screenshots.

For this portrait project, I chose to feature a picture I took of my youngest sister eating a donut.

I wanted to play with varying shape and size of pixels, so I created a program that starts out with drawing large rings of the image, and then with each click of the mouse, the rings incrementally decrease in size (until a certain point). Additionally, in order to play with shape, rectangles instead of rings are drawn when the user moves the mouse across the canvas (and the rectangles also decrease in size as the mouse is clicked).

Below are two renditions of what the image could ultimately look like. Of course, there are many more possible images that could be generated, since the presence of rings or rectangles and their respective sizes are controlled by the user’s command of the mouse.

sketch

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 9
*/

var img;
var outlineWH = 30;

function preload(){
    var imgURL = "http://i.imgur.com/8xc0iz2.jpg"
    img = loadImage(imgURL);
}

function setup() {
    createCanvas(400, 533);
    background(0);
    img.loadPixels();
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var ColorXY = img.get(ix, iy);

    stroke(ColorXY);
    strokeWeight(2);
    noFill();
    ellipse(ix, iy, outlineWH, outlineWH);//draws circles that appear to make the image complete
    rect(mouseX, mouseY, outlineWH, outlineWH);//draws squares according to mouse movement
   }

function mousePressed() {
    if (outlineWH == 30) {
        outlineWH = 25;
    } else if (outlineWH == 25) {
        outlineWH = 20;
    } else if (outlineWH == 20) {
        outlineWH = 15;
    } else if (outlineWH == 15) {
        outlineWH = 10;
    } else if (outlineWH == 10) {
        outlineWH = 5;
    }
    //the size of the circles and squares decreases by 5 with each click

}