// Nadia Susanto
// nsusanto@andrew.cmu.edu
// Section B
// Project-09-Computational Portrait
var underImage;
function preload() {
//preloading image from imgur
//var myImage = "https://i.imgur.com/R80wzCp.jpg";
var myImage = "https://i.imgur.com/uezsOBb.jpg";
underImage = loadImage(myImage);
}
function setup() {
createCanvas(480, 480);
//resize the image so it fits the canvas
underImage.resize(480, 480);
background(0);
underImage.loadPixels();
frameRate(100);
}
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);
//gets colors from specific image location
var colorXY = underImage.get(ix, iy);
//random rectangles
stroke(colorXY);
strokeWeight(random(1, 10));
noFill();
rect(ix, iy, 20, 10);
}
//random ellipses when mouse is pressed
function mouseDragged() {
ellipse(mouseX, mouseY, random(5, 50), random(5, 30));
}
For my portrait picture I used a picture of myself in a bamboo forest in Japan. I decided to use this picture because it has many different shades of green to the image. Since there was only one main color, I wanted to incorporate different shapes. The main shape is a rectangle, and when the mouse is dragged it switches to ellipses.