//maddy cha
//section e

var underlyingImage;

function preload() {
    //loads picture of friend in trash can
    var trashCan = "";
    underlyingImage = loadImage(trashCan);

function setup() {
    //tells user what to do
    text("drag mouse to start",180,height/2);

function mouseDragged(){
    //will start drawng pixel rectangles at 0
    var rX = 0;
    //will start drawing pixel rectangles in row at mouseY
    var rY = mouseY;
    var imageX = constrain(floor(rX), 0, width-1);
    var imageY = constrain(floor(rY), 0, height-1);
    //take color of image at mouseX, mouseY
    var imageColor = underlyingImage.get(imageX, imageY);
    var incriment = 10;

    if (mouseDragged){
        incriment += 10;
    //draws pixels at random width and height from 1-10
    var rWidth = random(1,10);
    var rHeight = random(1,10);
    //for loop allows for pixels to be drawn through entire width
    //rectangles are updated with new color depending on imageX and imageY
    for(var i = imageX; i < width; i++){
        imageColor = underlyingImage.get(imageX, imageY);

For this project, I decided to use an image of my friend sitting in a trash can.

I started with a similar approach as the sample code, using rectangles at random widths and heights of the color of the background image. I decided that I wanted to display the image using the mouseDragged function, but was concerned with the issue that it would take too long for the image to appear if I had it load rectangle by rectangle. In order to combat this, I decided to load the image in the form of rows. I had issues at first with my rectangle rows all being the same color as the pixel loaded at mouseX, mouseY, but I was able to resolve this by updating the color as mouseX and mouseY updated.

Leave a Reply