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.
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()
}