var image;
function preload() {
// directly loading image through website (no URL variable)
image = loadImage("https://scontent.fagc2-1.fna.fbcdn.net/v/t31.0-8/c87.61.576.576/p720x720/27788553_1801115783266418_6212879640355992453_o.jpg?_nc_cat=110&_nc_ht=scontent.fagc2-1.fna&oh=cc9c38dd3d5a14dcb13a012cd0973bd2&oe=5C7EA0C1");
}
function setup() {
createCanvas(480, 480);
background(0);
image.loadPixels();
// makes the pixels load faster
frameRate(500000000000000);
}
function draw() {
var px = random(width);
var py = random(height);
var ix = constrain(floor(px), 0, width-1);
var iy = constrain(floor(py), 0, height-1);
var color = image.get(ix, iy);
noStroke();
fill(color);
// pixels are smaller to make the portrait more detailed
rect(px, py, 3, 3);
}
At first, I had trouble finding a photo that would fit well into the 480 by 480 canvas so I had to look through multiple photos on different websites to find a photo that would be the perfect size. However, once I found that photo, it was easy to make a computational portrait out of it. I used 3 by 3 rectangles as my surface treatment. Because I made my rectangles so small, I had to increase frame rate to 500 trillion for the portrait to be drawn faster. The final result is below!!