jooheek-Project09-ComputationalPortrait

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project09-ComputationalPortrait

//global variable for image
var susieImg;
var susieImgURL;

function preload() {
	//loading image
	susieImgURL = "https://i.imgur.com/ezOtPFw.jpg?1";
	susieImg = loadImage(susieImgURL);
}

function setup() {
    createCanvas(360, 480);
    background(255, 200, 200);
    //load image pixels
    susieImg.loadPixels();
    //at a frame rate of 30
    frameRate(30);
}

function draw() {

	//variables for drawing circles
	var pixelX = random(width);//for position of circles
	var pixelY = random(height);
	var imageX = constrain(floor(pixelX), 0, width-1);//position of image pixel that we need to get color from
	var imageY = constrain(floor(pixelY), 0, height-1);
	var pixelDiam = random(1, 20);//for size of circles
	var colorOfImgPixel = susieImg.get(imageX, imageY);//getting color of pixel at imageX & imageY

	//drawing circles positioned at random with random sizes
	//filled with color of pixel at that position
	noStroke();
	fill(colorOfImgPixel);
	rect(pixelX, pixelY, pixelDiam, pixelDiam);

	//drawing outlined circles at mouse position
	//with stroke outline color of pixel at mouse position

	var strokeEllipseSize = random(15, 25);
	var ellipseStroke = random(1, 5);
	var colorOfImgPixelAtMouse = susieImg.get(mouseX, mouseY);
	stroke(colorOfImgPixelAtMouse);
	strokeWeight(ellipseStroke);
	noFill();
	rect(mouseX, mouseY, strokeEllipseSize, strokeEllipseSize);
}

The portrait I used for this project is of my dear friend, Susie. I decided to make the image out of rectangles to kind of make it look very pixelated. I also made stroke rectangles following my mouse position so that there is a contrast of solid and outlined rectangles.