Project 09 – Computational Portrait

sketch
/*
 * Eric Zhao
 * ezhao2
 *
 * Computational portrait that "draws" an image using
 * an existing image. Clicking the mouse changes the 
 * orientation of the randomly drawn rectangles in 
 * relation to the center.
 */

let img;
let smallPoint, largePoint;
let rotated = false;

function preload() {
    img = loadImage("https://i.imgur.com/uwh5nXO.jpg");
}

function setup() {
    createCanvas(400, 600);
    axisShort = 10;
    axisLong = 30;
    imageMode(CENTER);
    rectMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
}

function draw() {
    push();
    cursorX = constrain(mouseX, 0, width);
    cursorY = constrain(mouseY, 0, height);
    let pointillizeX = map(mouseX, 0, width, axisLong/2, axisLong);
    let pointillizeY = map(mouseX, 0, width, axisShort/2, axisShort);
    //changes width and length of rectangles drawn based on mouse position
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix, 128);

    //orients rectangles around center of canvas
    translate(width/2, height/2);
    x = x-width/2;
    y = y-height/2;
    rotate(atan2(y, x));
    if(rotated == true){
        rect(dist(x, y, 0, 0), 0,
            pointillizeY, pointillizeX, pointillizeY/2);
    } else {
        rect(dist(x, y, 0, 0), 0, 50,
                pointillizeY, pointillizeY/2);
    }
    pop();
}

function mousePressed(){
    //slightly greys out existing composition 
    push();
    fill(255, 192);
    rect(width/2, height/2, width, height);
    pop();
    //changes rectangle orientation b/t parallel and perpendicular
    switch(rotated){
        case true:
            rotated = false;
            print(rotated);
            break;
        case false:
            rotated = true;
            print(rotated);
            break;
    }
}

I wanted to see if there was a way to unify the pointillism example code to make the developing composition feel more cohesive. My portrait draws random strokes (rounded rectangles) of varying width and height based on the mouse position, all oriented towards the center of the canvas. Clicking on the canvas causes the underlying content to be slightly greyed out and the orientation of the rectangles will change (from the short side facing the center to the long side facing the center and vice versa).

Picture is of my friend trying to be fancy while drinking bagged Earl Grey tea, a very unfancy beverage.

Leave a Reply