Xu Xu – Project 09 – Computational Portrait

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project-09
var cX = 250;
var cY = 250;
var vX = 3;
var vY = 5;

var currentImage;

function preload(){
	var myImage = "https://i.imgur.com/Bo3UtYO.jpg";
	currentImage = loadImage(myImage);

}

function setup(){
	createCanvas(500,500);
	background(0);
	currentImage.loadPixels();
	frameRate(50);
}

function draw(){
	var ix = constrain(floor(cX), 0, width);
	var iy = constrain(floor(cY), 0, height);
	var xyColor = currentImage.get(ix, iy);



	if(cX >= width || cX <= 0){
		vX = -vX;
	}

	if(cY >= height || cY <= 0){
		vY = -vY;
	}

	cX += vX;
	cY += vY;

	noStroke();
	fill(xyColor);
	circle(cX, cY, random(5,20));

	var xyColorMouse = currentImage.get(mouseX, mouseY);
	if(mouseIsPressed){
		noStroke();
		fill(xyColorMouse);
		circle(mouseX, mouseY, random(5,10));
	}
}

For this project I used the cosplay image of my friend, and I wanted the circles to appear in lines rather than random dots, so it looks like something is actually “printing” the image. The circles being printed tend to be larger, and the circles drawn by the mouse are smaller so more details of the photo can be observed manually.

• 

• 

•