Carly Sacco – Project – 09 – Portrait

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 09: Computational Portrait

var myPic; //variable to reference my photo

function preload() {
	var origPic = "https://i.imgur.com/B5emP43.jpg"
	myPic = loadImage(origPic); //loading the image to the variable
}

function setup() {
	createCanvas(360, 480);
	myPic.loadPixels();
	frameRate(150); //how quickly the arc will be added
}

function draw() {
	//these variables link the pixels with the image
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
	//pixel color from the picture
	var pcolor = myPic.get(ix, iy);
	
	noStroke();
	fill(pcolor);
	//the two separate arcs used added together would be a complete circle
	arc(px, py, random(-15, 15), random(-15, 15), HALF_PI, PI); 
	arc(px, py, random(-15, 15), random(-15, 15), PI, HALF_PI);

	//the mouse can be used for more detailed filling in of the image
	var mouseColor = myPic.get(mouseX, mouseY);
	fill(mouseColor);
	ellipse(mouseX, mouseY, 8, 8);
}
	

After I chose this photo I thought to match the texture of the greenery in the background it would be fun to fill in the image with slightly jagged, but also rounded pieces. I used arc to do this and had two so that added together it would be a complete circle, but since they’re not there was more variation. I did, however make the mouse fill in with circles to get a more accurate filling in for details for the photo.

Leave a Reply