mjeong1-Project-09-Portrait

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Section A
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/sDyW7gl.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = mouseX;
    var py = mouseY;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    rect(px,py,random(5,10),random(5,10));
    rect(px+10,py+10,random(5,10),random(5,10));
    rect(px-10,py-10,random(5,10),random(5,10));
}

For this project I created a pixelated portrait that the user can control. Each set of rectangles are created on the position of mouse X and mouse Y. The viewer can control the number of rectangles and the position of rectangles that are drawn.