Category: Uncategorized

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.

sketch_project09

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-09*/

var originalImage;

function preload() {
    var myImageURL = "https://i.imgur.com/g3iK76T.jpg";
    originalImage = loadImage(myImageURL);
}
function setup() {
    createCanvas(480, 480);
    background(0);
    originalImage.loadPixels();
    frameRate(500);
}

function draw() {
    //defining the variables
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = originalImage.get(ix, iy);

    //drawing the random dashes
    strokeWeight(4);
    stroke(theColorAtLocationXY);
    line(px + random(-10, 10), py + random(-10, 10), px + random(-10, 10), py + random(-10, 10));

    //drawing the random ellipses
    fill(theColorAtLocationXY);
    ellipse(px, py, random(1, 8), random(1, 8));
}

I chose to make a portrait of my friend Chelsea. It was fun to experiment with the random sizes and positions of my ellipses and lines.