Project 09 – srauch – portrait

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);
}

Leave a Reply