PROJECT-09(portrait)

// SEAN CHEN
// 15-104 A

var img;
var widthSml = 4; // width parameters
var widthBig = 10;
var lengthSml = 2; // length parameters
var lengthBig = 10;
var mode = 1; // modes keeper

function preload() { // preload image
  img = loadImage('https://i.imgur.com/HNOE05S.png?1');
}

function setup() {
  frameRate(300);
  createCanvas(480, 788);
  imageMode(CENTER);
  background(255);
  img.loadPixels();
  mode = int(random(1, 4)); 
}

function rotAng(x, y) { // calculating rotation angle
    var distX, distY, ang;
    distX = mouseX - x;
    distY = mouseY - y;
    ang = atan(distX/distY);
    if (mode == 1) { // changing line mapping rotation
        return PI - ang; 
    } else if (mode == 2) {
        return PI / 2 - ang;
    } else if (mode == 3) {
        return ang;
    }
}

function border() { // instructions text
    push();
    stroke(0);
    fill(255);
    rectMode(CENTER);
    textAlign(CENTER);
    rect(width/2, 20, 200, 35, 10);
    noStroke();
    fill(0);
    text('double click to change modes!\n*hold for text rendering*', width/2, 17.5);
    rect()
    pop();
}

function draw() {
    let thickness = map(mouseX, 0, width, widthSml, widthBig);
    let len = map(mouseY, 0, height, lengthSml, lengthBig);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    push(); 
    var rot = rotAng(x, y);
    translate(x, y);
    rotate(rot);
    if (mouseIsPressed) { // render in rotated text
        fill(pix, 128);
        textSize(thickness); // size based on mouse
        textAlign(CENTER);
        text('face', 0, 0)    
    } else { // rotate in rotated lines
        rotate(radians(90));
        stroke(pix, 128);
        strokeWeight(thickness); // thickness based on mouse
        line(0, -len, 0, len); // length of line based on mouse
    }
    pop();
    border();
}

function doubleClicked() { // changing mode
    if (mode == 3) {
        mode = 1;
    } else {
        mode++;
    }
}