Project 09 – Portrait

I had a lot of fun with this project once I got the preliminaries set up.  I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image.  But then I realized that that wouldn’t work because of the constant mouse movement.  So I decided to create a more fun portrait.  The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it.  I spent a lot of time on this image but I still want to continue working on it.

 beginning after one movement with the mouseafter scrolling over the image multiple times

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Assignment-09-B

var img;
var inloc = "http://i.imgur.com/XTKXPpa.png";
var distThreshold = 20;
var underlyingImage;


function preload() {
   img = loadImage(inloc);
   underlyingImage = loadImage(inloc);

   underlyingImage.loadPixels();
}

function setup() {
    createCanvas(400,300);     //sets up on the background image
    image(img,0,0); 
   filter(POSTERIZE,2);
}

function draw(){
    for (var y = 0; y < height; y +=40){
        for (var x = 0; x < width; x +=40) {
            if (nearMouse(x, y, distThreshold)) {
           var c = underlyingImage.get(mouseX,mouseY);
              stroke(c);           //the stroke color is determined on the pixel underneath
              strokeWeight(1);          //creates the last name of the subject, Khalouf
              textSize(45);   
              fill(255,255,255,20);
              text("Khalouf", x,y);
              push();
                 image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);

    var x = constrain(mouseX, 0, img.width - 1);     //redraws the image based on mouse X and Y
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller,x, y, 120, 120);
    fill(255,255,255,40);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image
    noStroke();
    strokeWeight(0);
    ellipse(x,y,x+120,y+120);
    pop();
            }
        }
    }
}

function nearMouse(x, y, d) {
    return dist(x, y, mouseX, mouseY) < d;
}