Xiaoyu Kang – Project 09 – Computational Portrait

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-09

var baseImage;

function preload() {
	//loadimage
    var imageURL = "https://i.imgur.com/WFLOSwy.jpg";
    baseImage = loadImage(imageURL);
}

function setup() {
    createCanvas(500, 320);
    background(0);
    baseImage.loadPixels();
    frameRate(150);
}

function draw() {
	//define location
    var x = random(width);
    var y = random(height);
    //define color
    var ix = constrain(floor(x), 0, width - 0.1);
    var iy = constrain(floor(y), 0, height - 0.1);
    var ColorXY = baseImage.get(ix, iy);

    //draw circle
    noStroke();
    fill(ColorXY);
    ellipse(x, y, 6, 6);

    //draw square
    noStroke();
    fill(ColorXY);
    rect(x + random (-2, 2), y + random (-2, 2), 3, 3);

    //draw bigger circle when mouse is pressed
    var ColorMouse = baseImage.get(mouseX, mouseY);
    if (mouseIsPressed){
        fill(ColorMouse);
        ellipse(mouseX, mouseY, 10, 10);
	}
}

For this project, I used my friend Claire’s photo to generate the portrait. I used an combination of circle and suqare shapes appearing at random location to create the final image. I also wrote the code that when the mouse clicks, a bigger circle appears at the mouse location.