Kristine Kim-Project 09- Portrait

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project 09: computational portrait

var newimage;

function preload(){
//loads image from imugr.com
    var OGimage = "https://i.imgur.com/nYi2hyU.jpg[/img]"
    newimage = loadImage(OGimage);
}

function setup(){
    createCanvas(480,320);
    background(181, 209, 255);
    newimage.loadPixels();
    frameRate(20);
}

function draw(){
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width -1);
    var iy = constrain(floor(py), 0, height -1);
//retrieve colors at a certain location from the image
    var pixelcolorT = newimage.get(ix,iy);
//retrieve colors at mouseX and mouseY location from the image
    var pixelcolorE = newimage.get(mouseX, mouseY)

//draws ellipses controlled by mouseX and mouseY
//draws random diameters
    noStroke();
    fill(pixelcolorE);
    ellipse(pmouseX, mouseY, random(5,15), random(5,15));

//draws text "Miss" and "you" with colors retrieved from OGimage
//and random placements

    fill(pixelcolorT);
    text("Miss", px,py);

    fill(pixelcolorT);
    text("you", py, px);

}

For my project, I used an image of a picture I took of one of my students that I served in Mexico this summer. I played around with different background colors. To add diversity into my project, I added 3 different elements into my piece, two texts and ellipses that drew with random diameters between 5 to 15. A problem I ran into was that my OGimage was bigger than my canvas size so my code was drawing only white ellipses. I went into photoshop and rescaled my image to 480 x 320 pixels and that solved the problem.