# Lingfan Jiang – Project 09 – Portrait

``````// 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;

var myImageURL = "https://i.imgur.com/U0XImSh.jpg";
}

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

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.