Here is my “glass door” portrait. You can change the fidelity of it by moving the mouse up and down. By moving your mouse all the way to the bottom of it, the full portrait is revealed.
sketch
//Sam Rauch, section B, srauch@andrew.cmu.edu, project 09
//this code makes a "glass door" picture of me with colored ellipses, like you're looking
//at me through one of those textured glass doors. It samples the image
//color at each pixel location (though it skips every other y row to help it run a bit faster)
//and draws a circle there. The circle size is tied to mouseY, so when the mouse is higher up,
//the circles are larger and the image is lower-fidelity, but it gets higher fidelity as the
//user moves the mouse down the image.
var samImg;
var uploadImg;
var dotArray = [];
var first = 0;
function preload(){
uploadImage = "https://i.imgur.com/nTNXyHg.jpg";
}
function setup() {
createCanvas(400, 533);
background(220);
samImg = loadImage(uploadImage);
frameRate(1);
}
function draw() {
background(50);
image(samImg, 0, 0);
if (first == 0){ // define all the dot objects; run once at start of draw
for (var y = 0; y < 533; y+=2){ //fill array with dots all over canvas
for (var x = 0; x < 400; x++){
var clr = samImg.get(x, y);
dotArray.push(makeDot(x, y, 20, clr))
}
}
first ++;
}
var sizeTicker = map(mouseY, 0, height, 45, 3); //set dot size to move with mouseY
shuffle(dotArray, true);
for(var i = 0; i < dotArray.length; i++){ //draw dots in array
dotArray[i].size = sizeTicker;
dotArray[i].drawDot();
}
}
//dot object and draw function
function makeDot(xpos,ypos,siz,clr){
var dot = {x: xpos, y:ypos, size:siz,
color:clr,
drawDot: drawDotFunction}
return dot;
}
function drawDotFunction(){
stroke(this.color);
//print(this.color)
strokeWeight(this.size);
point(this.x, this.y);
}