Project 09 – Computational Portrait

/*
 * 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;
    }
}