Project 04 – String Art

//Jenny Wang
//Section B

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 numLines = 15


function setup() {

    createCanvas(400, 300);
    background("black");

    var cx = width/2 //center x
    var cy = height/2 //center y
    //draw ellipse
    noStroke();
    fill(110);
    ellipse(cx,cy,110,110);
    fill(180);
    ellipse(cx,cy,80,80);
    fill(230);
    ellipse(cx,cy,50,50);

    stroke("blue")
    line(cx,cy,width/2,0);//line 1 
    line(cx,cy, width, height/2);//line2
    line(cx,cy,width/2,height);//line 3
    line(cx,cy, 0,height/2);//line4

    //Q1
    dx1 = (cx-cx)/numLines;
    dy1 = (cy-0)/numLines;
    dx2 = (width-cx)/numLines;
    dy2 = (cy-cy)/numLines;

    //Q2
    dx3 = (cx-cx)/numLines;
    dy3 = (cy-height)/numLines;
    dx4 = (width-cx)/numLines;
    dy4 = (cy-cy)/numLines;

    //Q3
    dx5 = (cx-cx)/numLines;
    dy5 = (cy-height)/numLines;
    dx6 = (0-cx)/numLines;
    dy6 = (cy-cy)/numLines;

    //Q4
    dx7 = (cx-cx)/numLines;
    dy7 = (cy-0)/numLines;
    dx8 = (0-cy)/numLines;
    dy8 = (cy-cy)/numLines;
}

function draw() {
    //Q1.1
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("lightblue")
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //Q2.1
    var x3 = width/2;
    var y3 = height;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("pink")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    //Q2.2
    var x3 = width;
    var y3 = height/2;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("white")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    //Q2.3
    var x3 = 0;
    var y3 = height/2;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("grey")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    //Q3.1
    var x5 = width/2;
    var y5 = height;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("lightgreen")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    //Q3.2
    var x5 = 0;
    var y5 = height/2;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("white")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    //Q3.3
    var x5 = width;
    var y5 = height/2;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("grey")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    //Q4.1
    var x7 = width/2;
    var y7 = 0;
    var x8 = width/2;
    var y8 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(224,199,166)
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
 
    noLoop();
}