Project-04: String Art

var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 20;

function setup() {
    createCanvas(400, 300);
    background(0);

    //setting up star shaped template
    rectMode(CENTER);
    fill(50);
    noStroke();
    // stroke(255,0,0);
    push();

    translate(200, 150);
    rotate(radians(45));
    rect(0, 0, 200, 200);

    pop();
    translate(200, 150);
    rect(0, 0, 200, 200);

    //increments
    dx1 = (100-100)/numLines;
    dy1 = (250-200)/numLines;
    dx2 = (340-200)/numLines;
    dy2 = (151-291)/numLines;

}

function draw() {
    stroke(255);
    // reference: line(100, 50, 100, 250);
    // reference: line(200, 291, 340, 151);

    //line1_top left to bottom center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 291;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }

    //line 2_bottom left to right center
    var x1 = 100;
    var y1 = 250;
    var x2 = 340;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += -dx2;
        y2 += -dy2;
    }

    //line3_bottom right to top center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += -dy2;
    }

    //line 4_top right to left center
    var x1 = 300;
    var y1 = 50;
    var x2 = 60;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

     //line 5_top left to top center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += -dy2;
    noLoop();
    }

     //line 6_bottom right to bottom center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 290;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }


    
}