Erin Fuller Project-09-Portrait

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 09

var img;

function preload() {
    img = loadImage("https://i.imgur.com/4QKnX6El.jpg"); //imgur image link
}

function setup() {
    createCanvas(480, 480);
    noStroke();
    background(0);
    img.loadPixels();
}

function draw() {
    var imgW = img.width; 
    var imgH = img.height;

    for (var i = 0; i < imgW; i++) { //searches x pixels
        for (var j = 0; j < imgH; j++){ //searches y pixels
            var c = img.get(i, j); //gets colors for all pixels
            var val = brightness(c); //gets brightness from colors
            var s = map(val, 0, 255, 0, 20); //maps brightness to circle size
            
            var pix = img.get(i, j); // gets color at each pixel
            fill(pix); //colors pixels
            
            if (i%12 === 0 & j%12 === 0) {
                ellipse(i, j, s, s); //draws ellipse at every 12th pixel
            } 
        }
    }
}

I used a picture of my friend Mae (original photo shown below) as a base for my computational portrait. To create the resulting computational image, I pointillized the photo by drawing the circles every 12 pixels (in both x and y-direction). Each circle uses the color of the pixel at the center of each ellipse, but the size is determined by the brightness of the pixel. Therefore, as you can see she is wearing a black shirt, so those circles are much smaller than her face.

With a better photo, a more frontal headshot photo, I think the generated image may have a more successful result.