PROJECT-04 (string art)

// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(400, 300);
}

function draw() {
    var colX = map(mouseX, 0, width, 0, 250);
    var colY = map(mouseY, 0, height, 0, 250);
    // map mouse pos to color range val
    var bgCol = color(colX, colY, 125); // background color
    var cirCol = color(colY, colY, 125); // variable obj color
    background(bgCol);

    push(); // center diamond backround blob
    noStroke();
    fill(cirCol);
    beginShape();
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    curveVertex(mouseX, mouseY+(height-mouseY)/2);
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    endShape();
    pop();

    for (var i = 0; i < 25; i ++) { // border + diamond line art
        // border
        let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
        let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
        let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
        let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)

        // center diamond
        let x1s = map (i, 0, 25, mouseX/2, mouseX);
        // half from leftside to mouse
        let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
        // half from bottomside to mouse
        let x2s = map (i, 0, 25, 0, mouseX/2);
        // left to half of mouse
        let y2s = map (i, 0, 25, mouseY/2, mouseY);
        // half from topside to mouse
        let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
        // half from rightside to mouse
        let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
        // half from left to mouse
        
        // border
        line (x1, 0, width, y1); // top right
        line (width, y2, width-x2, height); // bottom right
        line (0, y2, x2, height); // bottom left
        line (width-x1, 0, 0, y1); // top left

        // diamond
        line (x1s, mouseY, mouseX, y1s); // top left
        line (mouseX, y2s, mouseX-x2s, mouseY); // top right
        line (mouseX, y2s, x3s, mouseY); // bottom right
        line (mouseX, y3s, x3s, mouseY); // bottom left
        line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
        // xtra line from cent to right
    }
}