//Elizabeth Wang
//Section E

var underlyingImage;

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

function setup() {
    createCanvas(480, 480);

function draw() {

    var x = random(width); //finds random x value on canvas
    var y = random(height); //finds random y value on canvas
    var ix = constrain(floor(x), 0, width - 1);
    var iy = constrain(floor(y), 0, height - 1);
    var color = underlyingImage.get(ix, iy); //gets color

    fill(color); //calls for color from image
    var rw = random(1, 15); //random width of rectangles
    var rh = random(1, 15); //random height of rectangles
    rect(x, y, rw, rh); //rectangles

function mouseDragged() { //when user presses and drags mouse over image, makes a bunch of random cirlces
    var colorAtMouse = underlyingImage.get(mouseX, mouseY);
    var ew = random(5, 25); //random width of ellipses
    var eh = random(5, 25); //random height of ellipses
    ellipse(mouseX, mouseY, ew, eh);

“NYC #33″ 36″x36” Oil – Jeremy Mann

For this project, I was initially inspired by the style that one of my favorite painters, Jeremy Mann, uses. To me his paintings visually express an almost pixelated and futuristic-esque view of cities, and I wanted to add that sharpness and softness into this project as well.

Portrait Photo used for this project

I ended up choosing a more artsy portrait of one of my good friends. I felt that the green and white of the flower would make the final piece more visually interesting since most likely they won’t be 100% discernible.

Final product when using mousePressed and waiting for random rectangles to cover the entire canvas.

Overall I am pretty satisfied with the results. I achieved the sharpness I wanted from the small rectangles, and the softness that the user is able to put in themselves using mousePressed.

Leave a Reply