## Sihand – Project Week 09 – Spiral

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

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

var myImageURL = "http://i.imgur.com/GJ7CafK.jpg";
}

function setup() {
portraitW = portrait.width;
portraitH = portrait.height;

//canvas size is identical to that of the portrait
createCanvas(portraitW, portraitH);
background(240);
}

function drawSpiral() {
//spiral starts at the middle of the canvas
translate(width/2, height/2);
var centerX = 0;
var centerY = 0;

//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
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;
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.

## Project 09 – Computational Portrait – sehenry

For this project I wanted to use a photo that looked really clear and artistic. So as I was scrolling through photos on my phone, I found a photo that my girlfriend took of herself and edited. I thought that the green background of the building would look really good split apart by many pixels. As I looked at the example on the deliverable page, I wanted to include a different shape and background to present itself as the picture comes together. So I decided to use small triangles while allowing the user to use their mouse to drag even smaller circles to reveal more detail in the face or clothing.

I enjoyed this project.

``````//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 09 Computational Portrait

//Global Variable

var rachelImg;

var rachelUrl = "http://i.imgur.com/z5nysOD.jpg" //Upload Picture
}

function setup() {
createCanvas(600, 500);
background(255); //white background
frameRate(1500);//Pixels Appear Fast
}

function draw() {

var rW = random(width); //Random x Loc
var rH = random(height); //Random y Loc
var posX = constrain(floor(rW), 0, width-25); //Will not appear past boundaries
var posY = constrain(floor(rH), 0, height-25);
var rachelColor = rachelImg.get(posX,posY) //Retrieve color pixels of image
noStroke();
fill(rachelColor);
rectMode(CENTER)
triangle(rW,rH, rW+4,rH-4, rW+8,rH); //draw triangles

}
function mouseDragged(){
var rachelColor = rachelImg.get(mouseX,mouseY) //Retrieve color of pixel where mouse is
noStroke();
fill(rachelColor);
ellipse(mouseX,mouseY,1,1) //Drags smaller, more defined pixels in shape of circle
}
``````

## Project 9: Computational Portrait

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.

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

var img;
var outlineWH = 30;

var imgURL = "http://i.imgur.com/8xc0iz2.jpg"
}

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

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

}``````