Katherine Hua – Project-09 – Portraits

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-09-Portrait */

var klaire; 
var x;
var y;
var dx;
var dy;
var color;

function preload() {
    var imageLink = "https://i.imgur.com/DijwpWY.jpg"; //link of image
    klaire = loadImage(imageLink); //loading image onto canvas
}

function setup() {
    createCanvas(500, 500);
    background(42, 57, 70);
    klaire.loadPixels(); //loading pixels of image 
    frameRate(500); //making it draw faster
    x = random(width); //randomizing x between constraints of width
    y = random(height); //randomizing y between constraints of height
    dx = random(-1,1); //randomizing direction
    dy = random(-1,1); //randomizing direction
}

function draw() {   
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    color = klaire.get(ix, iy); //getting pixel color according pixel position in comparison to pixel in image
    fill(color); //making color at this pixel position the same color as in the image's pixel position
    textSize(10);
    text("loading", x, y);


    x += dx * 5 ;
    y += dy * 5  ;
    //when the word "loading" hits the edge of the canvas, direction is changed randomly
    if (x > width || x < 0) {
        dx = -dx;
        dy = random(-1, 1);
    }  
    if (y > height || y < 10) {
        dy = -dy;   
        dx = random(-1, 1);     
    } 

    
}

For this project, I chose my portrait to be of my twin sister, Klaire (because I miss her). She goes to school on the west coast in California, so the only times we can see each other now are breaks. I chose to use text to create compute the portrait of her. I like how when all the text builds up, it begins to look like strokes of paint instead of text.

This is what is looks like at the very beginning. The text “loading” is drawn randomly across the canvas. Each time it hits a wall, it will change direction at a random angle and speed.

As more and more build on top of each other, the image starts coming together to create this.

This is the original portrait of Klaire. <3