Xiaoying Meng – Project 09 – Portrait

sketch

// Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 9

var IMG;//store image
var x; //Grid X 
var y; // Grid Y

//load image
function preload(){
    var ImageURL = "https://i.imgur.com/MMbPIxn.png"
    IMG = loadImage(ImageURL);
}

function setup(){
    createCanvas(480,480);
    //Get pixels from image
    IMG.loadPixels();
}

function draw(){
    background(0);
    drawGrid();
}

function drawGrid(){
    //Creating Grid
    for( x=0; x<480; x=x+10){
        for ( y=0; y<480; y=y+10){
            //Colors from image at x,y location
            var theColorAtLocationXY = IMG.get(x,y);
            //Distance between mouse location and circle location
            var d = dist(mouseX, mouseY,x,y);
            //Change circle size according to distance
            var col = map(d,0,480,10,2);
            noStroke();
            fill(theColorAtLocationXY);
            ellipse(x,y,col,col);
        }
    }
}

I used my selfie as the source image. I wanted to create something grid base and also interactive. So I change the sizes of the circles based on the distance between circles and mouse.