Project-04: String Art

string artDownload
// Sandy Youssef, syoussef
//Section D
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var numLine = 30;

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

function draw() {
    stroke("yellow");  // yellow lines 1
    line(0, 300, 50, 0);
    line(0, 0, 150, 150);
    dx1 = (50-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-300)/numLines;
    dx2 = (150-0)/numLines;
    dy2 = (150-0)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 300; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 1
    line(0, 0, 5, 300);
    line(50, 300, 190, 300);
    dx1 = (5-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (300-0)/numLines;
    dx2 = (190-50)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 50;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 2
    line(400, 200, 50, 0);
    line(0, 300, 300, 300);
    dx1 = (50-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 3
    line(400, 200, 250, 0);
    line(0, 300, 300, 300);
    dx1 = (250-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 4
    line(400, 200, 150, 0);
    line(0, 300, 300, 300);
    dx1 = (150-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  //green lines 2
    line(400, 200, 400, 0);
    line(0, 300, 300, 300);
    dx1 = (400-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

   
    stroke("green");  // green lines 3
    line(450, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-450)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 450; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  // green lines 4
    line(300, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-300)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 300; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 5
    line(150, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-150)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green"); // green lines 6
    line(150, 0, 0, 0);
    line(0, 0, 0, 300);
    dx1 = (0-150)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (300-0)/numLines;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    



    noLoop();
}

I tried to create a loose repetition effect. It took me a while to understand how the code works, but when I did, I was able to achieve what I had in mind.

Leave a Reply