Minjae Jeong-project09

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-9


var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/4WraCGa.jpg";
    underlyingImage = loadImage(myImageURL);
    underlyingImage.resize(480,480);
}

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

function draw() {
    var px = random(width);
    var py = random(height);
    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);
    var size = random(10, 30); //random from 1-10
    ellipse(px, py, size, size); //draw circles!

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    textSize = random(10, 30);
    text("SQUARE", mouseX, mouseY); //draw "squares"
}

For this project, I used a photo of my roommate. One issue I could not solve was to adjust the size of the picture according to the canvas size, which is currently 3024 x 4032. Because of it, I do not think canvas is showing the whole image properly, which is why there are so many browns on canvas.