Caroline Song – Project 09 – Computational Portrait

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 09

var imageUnderneath;
var imageColor;
var constrainX;
var constrainY;

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

function setup(){
    createCanvas(450, 450);
    background(0);
    imageUnderneath.loadPixels();
    frameRate(1000);
}

function draw(){
    var rectX = random(width); //rectangles are placed randomly along width of canvas
    var rectY = random(height); //rectangles are placed randomly along height of canvas
    var rectSize = 10; //size of rectangle
    var ellipseSize = 10; //size of ellipse

    //constrain rectangles to canvas size
    constrainX = constrain(floor(rectX), 0, width);
    constrainY = constrain(floor(rectY), 0, height);
    
    //get and fill colors according to picture underneath
    imageColor = imageUnderneath.get(constrainX, constrainY);
    noStroke();
    fill(imageColor);

    //ellipses are drawn instead of rectangles when key 'e' is pressed
    if(key == 'e' || key == 'E'){
        ellipse(constrainX, constrainY, ellipseSize);
    } else{
        rect(constrainX, constrainY, rectSize, rectSize);
    }
}

This project was very interesting, however, I didn’t know how to approach it at first. I wanted to have some sort of interactive element to my self-portrait project. In my final piece, I chose to switch the shapes that the code draws in, from rectangles to ellipses.