sketch
// 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++;
}
}