Project 9: Portrait

portrait-cb
var myImg;

function preload() {
    var ImgURL = "https://i.imgur.com/6nqYPHi.jpg";
    myImg = loadImage(ImgURL);
}

function setup() {
    createCanvas(400, 400);
    background(0);
    myImg.resize(400, 400);
    myImg.loadPixels();
}

function draw() {
    //randomize positions of pixels and get color from image
    var x = floor(random(myImg.width));
    var y = floor(random(myImg.height));
    fill(myImg.get(x, y));
    pixel(x, y);

    //also draw pixels following mouse movement
    fill(myImg.get(mouseX, mouseY));
    pixel(mouseX, mouseY);
}

function pixel(x, y) {
    //custom star pixel
    push();
    noStroke();
    translate(x, y);
    //add random scale and rotation to each pixel drawn
    scale(random(.15, 1.85));
    rotate(random(radians(-90, 90)));
    beginShape();
    vertex(0, -5.39);
    vertex(1.55, -2.26);
    vertex(5, -1.75);
    vertex(2.5, 0.68);
    vertex(3.09, 4.12);
    vertex(0, 2.5);
    vertex(-3.09, 4.12);
    vertex(-2.5, 0.68);
    vertex(-5, -1.75);
    vertex(-1.55, -2.26);
    endShape(CLOSE);
    pop();
}

function mousePressed() {
    //reset the canvas to random color
    background(color(random(255), random(255), random(255)));
}

For my project, I chose a photo that my friend took of me at an art gallery installation called “Paraiso” in New York City. The installation consisted of a room with mirrors and many strings of stars hanging from the ceiling. I enjoyed seeing this artwork and wanted to reflect the stars and range of colors in the photo in my portrait, so I practiced using custom shapes to create a star-shaped pixel. To make the portrait more dynamic, I made the pixels to be randomly scaled and rotated. I also coded it so that the star pixels are drawn following the user’s mouse position. When the user clicks on the canvas, it resets to a random color.

Leave a Reply