Jamie Park – Project 04 – String Art

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104          Section E        Project 4

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

function draw(){
    background(0);

    //random number variable to assign value for colors and coordinate location
    var x = 100;
    var y = 170;
    var z = 50;

    //variable newX and newY to constrain mouseX and mouseY movement to the canvas
    var newX;
    newX = constrain(mouseX, 0, width);
    var newY;
    newY = constrain(mouseY, 0, height);

    //lines for the string art -- are color & mouse location-sensitive
    for (var i = 0; i < width; i+= 8){

        stroke(mouseY, mouseX, x); //central 2 curves that go from top to bottom
        strokeWeight(0.5);
        line(i, newX, newX, i);
        line(i, newY, y, i);

        stroke(mouseX, y, mouseY); //central 3 curves that go from left to right
        line(newX, i, i, z);
        line(i, newY, newX, i);
        line(i, y, newY, i);

        stroke(z, mouseY, mouseX); //bottom left corner lines that overlap
        line(y * 5, i, i, newX);
        line(i, newY, x * 5, i);

        stroke(mouseX, x, y); //top left corner lines that overlap
        line(-x, i, i, newY);
        line(newX, i, i, newX);

        stroke(z, y, mouseY); //very central subtle curve
        line(newY, i, i, y * 2);

        stroke(mouseX, mouseX, y); //top right coner line
        line(i, newX, newY, i);

        stroke(mouseX, mouseY, mouseY); //very left stroke that goes across the width of the canvas
        line(x, i, i, newY);
    }
}

Initially, I was a bit confused with how I should be coding this project. But I became confident after visiting Office Hours and talking to my friends. I added some fun to my code by manipulating colors and location of the curves based on mouseX and mouseY.