Aaron Lee-Project-09- Portrait

sketch

/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Project-09-Computational Portrait
*/
         
var theImage

function preload() {
   var imageLocation = "https://i.imgur.com/OVTGqnb.jpg"; //preload the theImage from link
   theImage = loadImage(imageLocation);
}

function setup() {
   createCanvas(240, 260);
   background(0);
   theImage.loadPixels();
   frameRate(1000);
   colorMode(RGB);
}

function draw() {
   var pixelX = random(0, width); //random x coordinate of a pixel
   var pixelY = random(0, height); //random y coordinate of a pixel
   var iX = constrain(floor(pixelX), 0, width - 1);
   var iY = constrain(floor(pixelY), 0, height - 1);
   var pixelColor = theImage.get(iX, iY);//getting color info for rectangle fill
   var rectLength = map(brightness(pixelColor), 0, 50, 0, 10);
   var imageatthemouse = theImage.get(mouseX, mouseY); //pixel at the mouse position

   fill(pixelColor);
   rectMode(CENTER);
   rect(pixelX, pixelY, 4, rectLength);
   noFill();
   stroke(imageatthemouse);
   rect(pmouseX, pmouseY, 10, 10);
}

I chose a portrait of myself with high frame rate in order to see quick change. The rectangles with random size and appropriate stroke give a balanced finished look at the end. The portrait is also user interactive with mouse that creates hollow rectangles.