Project 09: Computational Portrait (Custom Pixel)

/*
Sandy Youssef; 
section D; 
syoussef@andrew.cmu.edu;
Project-09;
*/

// loads portrait of my face
function preload () {
    face = loadImage ("https://i.imgur.com/47iZQND.jpeg");

}


function setup() {
    createCanvas(480, 480);
    background(220);
    face.resize(480,480); // resizes image proportionally to the canvas
    face.loadPixels(); // loads pixels data
}

function draw() {
        
    // pixels appear at the position of the mouse
    var ColorPixel = face.get(mouseX,mouseY);  // returns text that corresponds to the color of the image at the location of the mouse
    noStroke();
        
    // Array that contains words of a phrase. This allows the individual words to 
    //be displayed on the canvas as opposed to the phrase as a whole to 
    //create shorter sized "pixels"
    word = ["Believe", "In", "Yourself"];
    // loop that continues to iterate over the words 
    for(var i = 0; i < 3; i ++) {
        //draws text random size wherever your mouse is on the canvas
        // allows you to paint the portrait!
        fill(ColorPixel);
        textSize(random(1,10));
        text(word[floor(random(word.length))], mouseX,mouseY);
            

    }


    
}

// This process took me a while to figure out and understand. 
// I wanted it to be interactive in some way and I thought "what if you get to "paint" it?"
//  To my surprise, I was able to figure out the painting portion quite easily. I also wanted the 
//  pixels to be more than just squares or circles so I decided to use a phrase that I constantly need to be reminded of: "Believe in yourself"