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.

screen-shot-2016-10-28-at-11-36-32-pm beginningscreen-shot-2016-10-28-at-11-36-47-pm after one movement with the mousescreen-shot-2016-10-28-at-11-36-13-pmafter scrolling over the image multiple times


//Naomi Shimada
//Section D

var img;
var inloc = "";
var distThreshold = 20;
var underlyingImage;

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


function setup() {
    createCanvas(400,300);     //sets up on the background image

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
              text("Khalouf", x,y);
                 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);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image

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

Leave a Reply