Jenna Kim (Jeeyoon Kim) – Project 09 – Portrait

jeeyoonk09

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 9: Portrait
*/

//GLOBAL variable for the IMAGE
var jen;

// preloading image ON THE CANVAS
function preload() {
    jen = loadImage("https://i.imgur.com/gvGuJiN.jpg?1"); 
}

function setup(){
	//canvas setting
	createCanvas(600, 400);
	background(255);
	jen.loadPixels(); //draw image
	noStroke();
	imageMode(CENTER);
	frameRate(150);
} 
function draw(){
	// starting from the first half of the page and then the left
	var jx = random(width);
	var jy = random(height);
	//constraining to canvas
	var jjx = constrain(floor(jx), 0, width - 15);
	var jjy = constrain(floor(jy), 0, height - 15);
	//picking color from the image
	var C = jen.get(jjx, jjy);

	//drawing rectangular pixels
	noStroke();
	fill(C);
	rectMode(CENTER);
	rect(jx, jy, random(5, 10), random(5, 10));

	//when mouse is pressed, pink circles are created
	if (mouseIsPressed){
		noStroke();
		fill("pink");
		ellipse(jx, jy, 5, 5);

	}
}

For this project, I used a portrait of my friend Jenny. I randomized simple rectangular forms to complete Jenny’s portrait. Looking at others’ portraits and trying different codes for my project, I was amazed by how many variations you can use to create a
pixelated portrait. When you click on the screen, pink circles come up because I personally like the pink sky in the back and I wanted the pink color to show up on other parts of the portrait too. It’s fun to look at the pink circles disappear as more rectangular shapes show up.