Project 09: Computational Portrait

This whole portrait is a picture of me sitting on a ledge outside of CFA, comprised of tinted covers of some of my favorite albums of music. It really took some experimentation to get the number of blocks correct, since with too many it would crash the program and with too few you couldn’t really notice the image. Tint() also wasn’t very happy with the original covers, so I had to edit them to make sure the colors would appear correctly. Finally, I added a random component to their generation just to add something interesting as they loaded in.

portrait

var pic;
var pixel = []
var covers = []



function preload(){ ///loads the album covers from the imgur posts
  var coverFile = []
  pic = loadImage("https://i.imgur.com/9if5OBK.jpg") ////some of my favorite albums to play on guitar and listen to
  coverFile[0] = "https://i.imgur.com/vh9pN9D.png"
  coverFile[1] = "https://i.imgur.com/ojxUjeG.png"
  coverFile[2] = "https://i.imgur.com/udq9ixk.png"
  coverFile[3] = "https://i.imgur.com/CgaJ3WV.png"
  coverFile[4] = "https://i.imgur.com/JjaAoNi.png"
  coverFile[5] = "https://i.imgur.com/BBocb2g.jpg"
  coverFile[6] = "https://i.imgur.com/qx4C4pJ.jpg"
  coverFile[7] = "https://i.imgur.com/hrqxmIj.jpg"
  for (var e = 0; e < coverFile.length; e++) {
        covers[e] = loadImage(coverFile[e]);
    }
}


function drawPixel(){ ///draws and colors each album cover
  tint(pic.get(this.x, this.y))
  image(covers[this.selection], this.x, this.y, 20, 20)
}




function makePixel(pixSelect, pixX, pixY){ ///creates the individual pieces of the portrait
  p = {x: pixX, y: pixY, selection: pixSelect,
    drawFunction: drawPixel
  } 
  return p
}



function setup(){ ///loads each pixel of the image, creates a square, and sends it to an array
  createCanvas(480, 480)
  frameRate(100)
  pic.loadPixels()
  noStroke()
  for (i = 0; i <= 24; i++){
      for (k = 0; k <= 24; k++){
          var p = makePixel(round(random(0, 7)), i * 20, k * 20, )
          pixel.push(p)
          }
      }
}

function draw(){  ///draws in squares randomly, up to 448, total number of the image
  var p = pixel[round(random(0, 448))]
  p.drawFunction() 
}