Sarah Yae – Project 9 – Section B

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 9

var basepic;
var sqsize = 5;
var click = 0; 

//Load Image
function preload() {
    var myportrait = "https://i.imgur.com/ZUZbO4M.png";
    basepic = loadImage(myportrait);
}

//Translates original image 
function setup() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

//Makes certain pixels into rectangles after retrieving that pixel's color 
    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var color = basepic.get(x,y);
            fill(color);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

//Turns image into black and white once mouse pressed 
function mousePressed() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var r = basepic.get(x,y)[1]; //Retrieves a pixel's 1st value in its array 
            fill(r, r, r);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

Once you click on the image, the translated image turns black and white. I had a hard time figuring out how  to change the image black and white, but I used pixel array to make it work.