Lingfan Jiang – Project 09 – Portrait

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-09

var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/U0XImSh.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    //translate the origin a little to make the canvas filled
    translate(-20, -20);
    background(187, 230, 235);
    underlyingImage.loadPixels();
}

function drawStar(sx,sy){
    push()
    translate(sx - 20, sy - 20)
    var nPoints = x.length;

    //draw stars based on the two arrays stated at the beginning
    //also use random function to let the stars have slightly different shapes
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var ssx = x[i] + random(-3, 3);
        var ssy = y[i] + random(-3, 3);
        scale(0.85)
        vertex(ssx,ssy);
    }
    endShape(CLOSE);
    pop()
}


function draw() {
    //create random points width the size of (500, 500) 
    //to make sure the stars can reach the edge
    var px = random(width + 20);
    var py = random(height + 20);
    var ix = constrain(floor(px), 0, width + 20);
    var iy = constrain(floor(py), 0, height + 20);
    //get color from the underlying image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //draw stars based on px, py
    drawStar(px, py);
}

This is a very interesting project which reminds me of the first portrait project we did for the course. It is amazing how much I learned along the way.

For this project specifically, I decided to use the star shape we learned how to do earlier as my pixel. The result turns out very good in the end.