Project-04: String Art

//i made mine a smile lol
var dx1;
var dy1;
var dx2;
var dy2;
var dy3;
var dy4;
var numLines = 50;

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 300);
    background(244, 195, 195); //baby pink color

    line(50, 50, 150, 300); //start line
    line(300, 300, 350, 100); //end line
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;

    line(50, 50, 150, 300); //start line
    line(300, 300, 350, 100); //end line
    dx3 = (150-50)/numLines;
    dy3 = (300-50)/numLines;
    dx4 = (350-300)/numLines;
    dy4 = (100-300)/numLines;


}

function draw() {
    fill(0,0,0);
    ellipse(300, 100, 10,10);
    ellipse(220, 100, 10,10);

    //lines going across canvas-parallel look
    for (var i = 0; i <=400; i +=20) {
        stroke(53,81,95); // grey blue color
        line(width - i, y, x, y + i*4);
        line(i, height, width, height - i*4);
        line(width - i, height, x, height - i*4);
        line(i, y, width, y + i*4);

    }

     //circle on outside
    for (var i = 0; i <=400; i +=20) {
        stroke(255,255,255); //white
        line(width - i, y, width, height - i);
        line(i, height, x, y + i);
        line(width - i, height, width, y + i);
        line(i, y, x, height - i);

    }
    // function given from instructions 
    var x1 = 0;
    var y1 = 0;
    var x2 = 350;
    var y2 = 350;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255,0,0); //red
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    noLoop();
    var x3 = 350;
    var y3 = 350;
    var x4 = 0;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        fill (255,0,0); //red
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}