Project 04-String Art

var dx2;
var dy2;
var dy3;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noStroke();
    line(200, 50, 200, 250);    //vertical guide line
    line(100, 50, 300, 250);    //diagonal guide line
    dx2 = (200)/numLines;
    dy2 = (200)/numLines;
    dy3 = (300)/numLines;
}

function draw() {
    background(0);

    // outer ring
    push();
    translate(200, 150); //origin in the middle
    for (let i = 1; i <= 200; i += 1) {
        rotate(2);      //rotating around the origin
        stroke(184, 156, 46, 70)
        line(-50, -130, 200, -150);
    }

    pop();
    //  the middle square
    var x1 = 100;
    var y1 = 250;
    var x2 = 100;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        stroke(111, 162, 179, 150);
        line(x1, y1, x2, y2);
        line(x1+200, y1-200, x2, y2);
        x2 += dx2;
        y2 += dy2;
    }

    var x1 = 100;
    var y1 = 150;
    var x2 = 200;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        //biggest diamond
        stroke(40, 77, 89);
        line(x1-100, y1, x2, y2-100);
        line(x1-100, y1, x2, y2+100);
        line(x1+300, y1, x2, y2-100);
        line(x1+300, y1, x2, y2+100);

        //smallest diamond
        stroke(111, 162, 179);
        line(x1, y1, x2, y2);
        line(x1+200, y1, x2, y2)
        y2 += dy2;
    }
    noLoop();
}