//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.