/* 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.