Zee Salman-Project-09- Portrait

sketch

//Zee Salman
//SECTION E
//project 09

var picture;

function preload(){    
    var url = "https://i.imgur.com/J5xj43q.jpg"; 
    picture = loadImage(url); 
}

function setup() {
	background(255);
    createCanvas(360, 340);
    picture.loadPixels(); 
//rate of the pixels
    frameRate(8000); 
}

function mouseDragged(){
//size of the brush
    var Bmouse = random(11, 30);
//selecting the color
    var Dmouse = picture.get(mouseX, mouseY); 

//drawing with the mouse dragged    
    fill(Dmouse);
    ellipse(mouseX, mouseY, Bmouse, Bmouse);
}
    
function draw() {
//random  
    var x = random(width); 
    var y = random(height); 

//color for pixel 
    var cx = constrain(floor(x), 0, width - 1); 
    var cy = constrain(floor(y), 0, height - 1); 

    var selColor = picture.get(cx, cy); 

//color of the circles    
    noStroke(); 
    fill(selColor); 

//more focus on the person
    if (x > 60 & x < 200 && y > 0 && y < height){
        ellipse(x, y, 5, 5); 
    }

//closer to the person
    else if (x > 20 & x < 300 && y > 0 && y < height){
        ellipse(x, y, 7.5, 7.5); 
    }
    
//out of focus background
    else {
        ellipse(x, y, 9, 9); 
    }
 }

I really had fun with this project because I had the opportunity to test out and create different outcomes for different interactions. I also wanted it to still be a picture that has some sort of focus as well, so I created smaller dots/ellipses towards the figure and facial features. But, I still left room for abstraction with the interaction piece making it so that random sized dots create the pictures.