Ian Kaneko – 09 – Portrait

ikaneko Portrait

var img;
var gScale = 0.14; // Scale the image size down
var size = 5; // Size of all the circles and squares

function preload() {
    var portrait = "https://i.imgur.com/xb4QYap.jpg";
    img = loadImage(portrait);
}

function setup() {
    createCanvas(img.width * gScale, img.height * gScale);
    background(255);
    frameRate(60);
    img.loadPixels();

}

function draw() {
    //Draws small circles and squares. The circles are tinted red and the squares are blue

    var cx = random(img.width); 
    var cy = random(img.height);
    var dotColor = img.get(cx, cy);
    var db = brightness(dotColor); // Gets the grayscale value of the pixel

    noStroke();
    fill(db + 150, db + 100, db + 100); // Turns all of the circles a red/brown
    circle(cx * gScale, cy * gScale, size);
    


    var sx = random(img.width);
    var sy = random(img.height);
    var squareColor = img.get(sx, sy);
    var sb = brightness(squareColor);

    fill(sb + 100, sb + 100, sb + 150); // Turns the squares blue
    square(sx * gScale, sy * gScale, size);



    var gx = random((mouseX - 15) / gScale, (mouseX + 15) / gScale); // creates a circle within 30 pixels of the mouse
    var gy = random((mouseY - 15) / gScale, (mouseY + 15) / gScale);
    greenDotColor = img.get(gx, gy);
    var gb = brightness(greenDotColor);

    fill(gb + 100, gb + 150, gb + 100); // Turns these circles green
    circle(gx * gScale, gy * gScale, size);

}

For this project I used a quick picture I took of myself as the base. I played around a bit with what I could do with the colors. Using the brightness feature I basically turned the picture black and white, then added in contrasting colors. Red circles and blue squares will randomly appear to start filling in the picture. Green circles will begin to fill in the picture in an area close to your mouse.