Project 4: String Art

//Anthony Pan
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4; 
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14; 

var numLines = 30;


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

    //left of circle change in x/y
    dx1 = (280)/numLines;
    dy1 = (70)/numLines;
    dx2 = (120)/numLines;
    dy2 = (150)/numLines;

    //top of circle change in x/y
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;

    //top right of circle change in x/y
    dx5 = (250)/numLines;
    dy5 = (20)/numLines;
    dx6 = (40)/numLines;
    dy6 = (150)/numLines;

    //bottom of circle change in x/y
    dx7 = (70)/numLines;
    dy7 = (120)/numLines;
    dx8 = (20)/numLines;
    dy8 = (300)/numLines;

    //right of circle change in x/y
    dx9 = (220)/numLines;
    dy9 = (120)/numLines;
    dx10 = (80)/numLines;
    dy10 = (150)/numLines;

    //bottom right of circle change in x/y
    dx11 = (240)/numLines;
    dy11 = (10)/numLines;
    dx12 = (105)/numLines;
    dy12 = (60)/numLines;

    //bottom left of circle change in x/y
    dx13 = (80)/numLines;
    dy13 = (140)/numLines;
    dx14 = (20)/numLines;
    dy14 = (300)/numLines;


}

function draw() {
    //ellipse(width/2, height/2, 120, 120) //ellipse for reference

    //left of circle start points
    var x1 = 130;
    var y1 = 5;
    var x2 = 130;
    var y2 = 230;

    //top of circle start points
    var x3 = 0;
    var y3 = 100;
    var x4 = 250;
    var y4 = 85;

    //top right of circle start points
    var x5 = 273;
    var y5 = 5; 
    var x6 = 273;
    var y6 = 230;

    //bottom of circle start points
    var x7 = 125;
    var y7 = 210;
    var x8 = 400;
    var y8 = 210;

    //right of circle start points
    var x9 = 220;
    var y9 = 40;
    var x10 = 280;
    var y10 = 180;

    //bottom right of circle start points
    var x11 = 240;
    var y11 = 10;
    var x12 = 270;
    var y12 = 210;

    //bottom left of circle start points
    var x13 = 160;
    var y13 = 200;
    var x14 = 230;
    var y14 = 220;


    for (var i = 0; i <= numLines; i += 1) { 
        stroke(220, 20, 0);

        //creating red vortex around a circle

        line(x1, y1, x2, y2); //left of circle
        x1 += dx1;
        x2 -= dx2;
        y1 += dy1;
        y2 -= dy2;

        line(x3, y3, x4, y4); //top of cirlce
        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        line(x5, y5, x6, y6); //top right of circle  
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;

        line(x7, y7, x8, y8); //bottom of circle
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;

        line(x9, y9, x10, y10); //right side
        x9 += dx9;
        y9 -= dy9;
        x10 -= dx10;
        y10 += dy10;

        line(x11, y11, x12, y12); //bottom right
        x11 += dx11;
        y11 -= dy11;
        x12 -= dx12;
        y12 += dy12;

        line(x13, y13, x14, y14); //bottom left
        x13 -= dx13;
        y13 -= dy13;
        x14 += dx14;
        y14 += dy14;

    }

    noLoop();

}