Project 09: Computational Portrait

For my image, I noticed that the background lights were blurry, and I wanted to implement that in the code with mousPressesed. So each time you use you press the mouse, a filter is applied to the whole canvas and the whole canvas gets a bit blurry. Additionally, I wanted there to be a difference in shapes for the background and the person.

asuSketch

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  


var img;
var stars = [" ★ ", " ☆ "," ✪ "," ✦ ", " ✧ "]
var faces = ['( ͡• ͜ʖ ͡•)', '( ͡ᵔ ͜ʖ ͡ᵔ)', '( ͡~ ͜ʖ ͡°)', '( ͡◡_⦣ ͡◡)']

function preload() {
    img = loadImage("https://i.imgur.com/spqIDsb.jpeg")
}

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    img.loadPixels();
    img.resize(480, 480);                              //resize image to canvas
    frameRate(50000);
    background(0);
}

function draw() {
    //pick random x and y
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    
    //pull pixel color from that x and y
    var pixelColor = img.get(x, y);
    
    //fill using the pixel color
    fill(pixelColor);
    

    if (x>((width/2)-50) & x<((width/2)+50) && y>height/2 && y < height) {        //setting the faces smilies to be next where the actaul face is 
        strokeWeight(5);
        textSize(random(5, 20));                    // smaller near face
        text(random(faces), x, y);                  
      } else {
        textSize(random(5, 20)); 
        text(random(stars), x, y);                  //draws stars everywhere else 
    }

}


function mousePressed() {

        filter(BLUR,3);                   // when mouse is pressed, it blurs the layer 
}