​

var img;

​

function preload() {

  // load all 3 images w/a for loop

  img=loadImage("XP1.jpg")

}

//here I create the initial image that will slowly devolve

function setup() {

  createCanvas(400, 300);

  background(255);

  rectMode(CENTER);

  //Icreated a push() pop() to be able to not effect the rectangle resize later in my code

  push();

  img.resize(400, 300);

  image(img, 0, 0);

  pop();

  //slowed the framerate to devolve and draw rectangles slower

  frameRate(3);

  img.resize(200, 0);

  //image(img,0,0)

​

  noStroke();

}

​

function draw() {

  noStroke();

  // noprotect

  //taking the pixel value of the image and applying it to rectangles in a random fashion

  for (var x = 0; x < 200; x += 3) {

    for (var y = 0; y < 200; y += 3) {

      //var pxCol = img.get(10, 10);

      var pxCol = img.get(x, y);

      pxCol[0] = pxCol[0];

      //print(pxCol);

      fill(pxCol);

      rect(x * 2, y * 2, random(1, 8));

      //ellipse(x,y,5,5);

    }

  }

  //noLoop();

}

​