Project 09 Ellan Suder

I don’t have any paper sketches, but I have some screenshots of the earlier versions. I wanted to make it “print” from left to right and go down to a new row once it reaches the end (width). When it reaches the end of the canvas (width, height), it moves back to 0,0 and starts printing the image again.

• 

• 

I wanted to add some interactivity using mousePressed. Every time the mouse is clicked:

1. A number between 1 and 20 is added to the step and size arrays.
2. i increases by 1, so that it accesses the newly generated elements in the arrays.

• 

• 

• 

• 

computational portrait (please click!)

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-09
*/

var underlyingImage;
var rectX = 0;
var rectY = 0;
var i = 0;
rectstep = [5];
rectsize = [5];

function preload() {
    var myImageURL = "https://i.imgur.com/frUuo2H.png";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10000);
}

function draw() {
    var theColorAtLocationXY = underlyingImage.get(rectX, rectY);

    noStroke();
    fill(theColorAtLocationXY);
    rect(rectX, rectY, rectsize[i], rectsize[i]);
  
    rectX += rectstep[i];
  
//rectX return to 0 when hit edge of canvas
    if (rectX >= width)
    { 
      rectX = 0;
      rectY += rectstep[i];
    }
//restarts when hits end of canvas
    if (rectY >= height)
    { 
      rectX = 0;
      rectY = 0;
      background(0);
    }
}

function mousePressed() {
    var r = random(1,20);
    
    rectstep.push(r);
    rectsize.push(r);
    i += 1;
}