Project-04: String Art

Examples:

//Xinyi Du 
//15104 Section B

var dx;
var dy;
var dx2;
var dy2;
var numInterval1 = 12; //number of intervals
var numInterval2 = 10; //number of intervals

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

function draw() {
    background(0);

    //the first series of strings
    stroke(189, 252, 83);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);

    push();
    translate(400, 0); //translate the orgin to top right corner
    rotate(radians(90)); //rotate to get the second series of strings in another color
    stroke(47, 109, 246);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();

    push();
    translate(400, 400); //translate the orgin to bottom right corner
    rotate(radians(180)); //rotate to get the third series of strings in another color
    stroke(106, 214, 129);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();

    push();
    translate(0, 400); //translate the orgin to bottom left corner
    rotate(radians(270)); //rotate to get the fourth series of strings in another color
    stroke(91, 196, 218);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();
}

//draw the small and grey central strings that follows the mouse
function string2(x, y) {
    var dx2 = (dist(x, y, width/2, y))/numInterval1; //strings horizontal interval
    var dy2 = (dist(x, y, x, height/2))/numInterval1; //strings vertical interval
    for (var i = 0; i < numInterval1; i += 1){ //use for loop to repeat the drawing process
        line(width/2, y+dx2*i, width/2+dx2*i+dx2, height/2);
        line(width/2, y, width/2, height/2);
        line(width/2, height/2, x, height/2);
    }
}

function string1(x, y) {
    //draw the bigger strings at one side of the canvas
    var dx = (height/2)/numInterval1; //strings horizontal interval
    var dy = (width/2)/numInterval1; //strings vertical interval
    for (var i = 0; i <= numInterval1; i += 1){ //use for loop to repeat the drawing process
        line(0, dy*i-dy, dx*i, width/2); 
        line(0, height/2, width/2, height/2)
        line(0, width/2+dy*i+dy, width/2-dx*i, height/2);
        
    }

    //draw the smaller strings that follows the mouse
    var dx2 = (dist(x, y, width/2, y))/numInterval2;
    var dy2 = (dist(x, y, x, height/2))/numInterval2;
    for (var i = 0; i < numInterval2; i += 1){ //use for loop to repeat the drawing process
        line(width/2+dx2*i, y, x, y+dx2*i+dx2);
        line(width/2, y, x, y);
        line(x, y, x, height/2);
    }

}