Alice Fang – Project 9

after one image is formed, click for another!

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-09
*/

var friend = []; // picture of friend!
var state = 0; // indicates which picture

function preload() {
	var imgURL = [];
	imgURL[0] = "https://i.imgur.com/62FXNHg.jpg"; // full body
  	imgURL[1] = "https://i.imgur.com/ieqrCP3.jpg"; // torso
  	imgURL[2] = "https://i.imgur.com/e4nON6h.jpg"; // portrait

  	for (var i = 0; i < imgURL.length; i++) {
  		friend[i] = loadImage(imgURL[i]);
  	}
}

function setup() {
  createCanvas(270, 400);
  background('lightyellow');
  imageMode(CENTER);
  noStroke();
  friend[state].loadPixels();
}

function draw() {
	// select pixels from center of canvas outwards
	var pX = randomGaussian(width / 2, 75);
	var pY = randomGaussian(height / 2, 75);
	
	// constrain to canvas
	var cX = constrain(floor(pX), 0, width - 1);
	var cY = constrain(floor(pY), 0, height - 1);

	// get color from pixel
	var col = friend[state].get(cX, cY);

	fill(col); 
	textSize(16 - (state * 4));
	text("美", cX, cY);
}

function mousePressed() { // change image
	background('lightyellow'); // 'refresh' canvas
	state = state + 1;
	if (state > 2) state = 0;
}

This is a picture of my friend Meijie that I took for a photo class last semester! Originally, the shape I used for the color was an ellipse, and I spent a lot of time playing around with image ‘resolution’ compared to the underlying image. When I changed it to the character 美, which is ‘beauty’ in Chinese, and also part of her name, I didn’t like how large the character was and the lack of detail it created in the image. Because of that, I explored with changing the image from a full body shot, to a torso shot, to a closer crop of her face; I couldn’t decide which one I liked better so I decided to use all three! As the image zooms in, the resolution becomes sharper!