Fanjie Mike Jin- Project 09- Portraits

53

/*  Fanjie Mike Jin
    fjin@andrew.cmu.edu
    Section C
    Project-09*/

var baseimage

function preload() {
//load in the picture of myself
    var myImageURL = "https://i.imgur.com/gIuXiAy.jpg";
    baseimage = loadImage(myImageURL);
}

function setup() {
//drawing the image
    createCanvas(500, 500);
    background(0);
    baseimage.loadPixels();
// makes the pixels load faster
    frameRate(1000);
}

function draw() {
//Enable mouse interactions to gerate stroke elements
    var mousecolor = baseimage.get(mouseX, mouseY);
    var x = random(width);
    var y = random(height);
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    var color = baseimage.get(ix, iy);

    noStroke();
    fill(mousecolor);
//paint the canvas with the mouse using smaller ellipses
    ellipse(mouseX,mouseY,random(4,20),random(4, 20));
    fill(color);
//Use polygons as pixels with the randomized number of sides and dimensions
    polygon(x,y,random(4,20),random(4,9));

}
//draw the polygons
function polygon(x, y, r, n) {
    var angle = TWO_PI / n;
    beginShape();
    for (var i = 0; i < TWO_PI; i += angle) {
        var a1 = x + cos(i) * r;
        var a2 = y + sin(i) * r;
        vertex(a1, a2);
    }
    endShape(CLOSE);
}

// reset the canvas to blank once the mouse is clicked 
function mousePressed() {
    clear();
}

In this project, I am trying to make the portrait in a rigid pointillism style as I really like the impressionist paintings. By varying the size of the randomized polygons, I am managing to simulate the feelings of that the protrait is being painted by rigid brushstrokes. Also, at the same time, I am able to make some touches to the image as the mouse interaction is enabled to digitally draw part of the portrait.