Ghalya Alsanea – Project 09 – Portrait

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//project-09

var img;
var WIDTH;
var HEIGHT;

var brightnessValues = [];  //stores the brightness values
var toggle = true;          //add a toggle for the for loop to help the code run faster

//x and y coordinate arrays for 4 shades
var curve1x = [];
var curve2x = [];
var curve3x = [];
var curve4x = [];

var curve1y = [];
var curve2y = [];
var curve3y = [];
var curve4y = [];

function preload() {
  img = loadImage("https://i.imgur.com/Aqg5q8V.jpg");

}

// getPixel: fast access to pixel at location x, y from image 
function getPixel(image, x, y) {
    var i = 4 * (y * image.width + x);
    return color(image.pixels[i], image.pixels[i + 1], image.pixels[i + 2]);
}

function setup() {
    //image is 480 x 480
    WIDTH = img.width;
    HEIGHT = img.height;
    createCanvas(WIDTH, HEIGHT);
    noFill();
    img.loadPixels();
}

function draw() {
    background(255);

    // Search and store brightness of each pixel. 
    //toggle: you only really need to load the brightness once, toggle can be re-toggled later
    if (toggle) {
    for (var i = 0; i < img.width; i++) {
        for (var j = 0; j < img.height; j++) {
            var b = brightness(getPixel(img, i, j));

            //sort vertices depending on brightness levels
            if (b < 0.04) {
                curve1x.push(i);
                curve1y.push(j);
            }
            if (b >= 0.04 & b < 10) {
                curve2x.push(i);
                curve2y.push(j);
            }
            if (b>= 10 & b < 40) {
                curve3x.push(i);
                curve3y.push(j);
            }
            if (b >= 40 & b < 100) {
                curve4x.push(i);
                curve4y.push(j);
            }
        }
    }
    toggle = false;

    }

    //LIGHTEST - light blue
    stroke(200, 220, 255, 50);
    drawCurve (curve4x, curve4y);
    //LIGHT -medium blue
    stroke(100, 120, 255, 50);
    drawCurve (curve3x, curve3y);
    //DARK - blue
    stroke(0, 0, 255, 50);
    drawCurve (curve2x, curve2y);
    //DARKEST - dark gray
    stroke(50, 100);
    drawCurve (curve1x, curve1y);
}

function drawCurve (x, y) {
    //originally I wanted to create a continous line through vertices,
    //but it was getting overcrowded, so to ket the sketch-like feeling
    //I used random circle sizes
    // beginShape();
    for (i = 0; i < x.length; i+=4) {
        circle(x[i], y[i], random(10));
        // curveVertex(x[i] + random(15), y[i] + random(15));
    }
    // endShape();
}

For this assignment, I used a portrait I took of my sister. I wanted to somehow show her personality through the portrait, hence using blue, her favorite color. Originally, I was inspired by the one-line contour drawings and set out to create those with 4 different continuous lines, each for 4 different shades of brightness.

I couldn’t figure out how to create a non-messy looking portrait, so instead I slowly shifted to using circles. I still wanted to retain the drawing-like feel, which can be shown in the final right now. Going back to showing her personality through the piece, I thought the varying sizes of the circles and varying capacities also shows her kind and loving personality.

• 

• 

•