Project 9 Portrait

The project uses transparency and the mouse IS Pressed function to achieve a variety of detail with the newly generated portrait. The new portrait can range from highly abstract to an almost monet like blurry vision.

Hold the mouse button to scramble the image.

Release the moue button to make the image clear

sketch
//tjchen 
//hand in 9 project 

var img;
var pts;// amount of divisions on the canvas
var steps;

function preload(){
    //loads teh image
    img= loadImage("https://i.imgur.com/68RyRgM.jpg");
}
function setup() {
    background(255);
    frameRate(10);
    createCanvas(480, 270);
    //center image on canvas
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    //generate random grid subdivision
    pts = int(random(1,40));
    print(pts); // for dbugging
}

function draw() {
    //generate grid
    for (let x = 0; x<width; x+=width/pts){
        for(let y = 0; y<height; y+=height/pts){
            //get color information from pixel
            let c = img.get(x,y);
            noStroke();
            //create the subdivided pixelated image 
            fill(c[0],c[1],c[2],10);
            square(x,y,width/pts);
        }
    }

    //hold mouse to rescramble the image 
    //release to unblur
    if(mouseIsPressed){
        pts = int(random(1,40));
    } 
}

Leave a Reply