Project 04 – String Art

/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Project 4: String Art
 * A dynamic string art with four separate string shapes
 * that changes based on mouse position.
 */

var angle = 0;
var posX = 0;
var posY = 0;
var cursorX;
var cursorY;
var loopCount = 0;
var numLines = 30;
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){
    stroke(255);
    strokeWeight(0.125);
    background(0);
    translate(width/2, height/2);

    push()
    cursorX = map(min(mouseX, width), -200, 200, 0, 400);
    for(let a = 0; a <= 360; a += 1){
        //rotates the canvas an increment of radians and adjusts canvas
        rotate(5);
        push();
        scale(4);
        posY = -a;
        line(-cursorX, posY, cursorX, cursorX);
        //draws lines normal to point offset after rotation
        pop();
    }
    pop();

    stroke(0, 255, 255);
    strokeWeight(0.75);


    //bottom right cyan string corner
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    var dx1 = (0-width/2)/numLines;
    var dy1 = (height/2-height/2)/numLines;
    var dx2 = (width/2-width/2)/numLines;
    var dy2 = (height/2-0)/numLines;
    var x1 = 0;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //bottom left string corner
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    rotate(PI); //rotates canvas to draw top two string corners

    //top left string part
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    dx1 = (0-width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (width/2-width/2)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //top right string part
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
}