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