Project 04 – String Art

//Stefanie Suk
//15-104 Section D

var ax1;
var ay1;
var ax2;
var ay2;      //variable for top left white strings 

var bx1;
var by1;
var bx2;
var by2;      //variable for top right white strings 

var cx1;
var cy1;
var cx2;
var cy2;      //variable for bottom right white strings 

var dx1;
var dy1;
var dx2;
var dy2;      //variable for bottom left white strings 

var fx1;
var fy1;
var fx2;
var fy2;      //variable for top bottom orange strings 

var gx1;
var gy1;
var gx2;
var gy2;      //variable for left right orange strings 

var numLines = 40;
var numLines2 = 50;

function setup() {
    createCanvas(400, 300);
    background(25, 44, 108);

    //base lines for top left white strings
    line(0, 300, 0, 0);
    line(0, 0, 400, 0);
    ax1 = (0-0)/numLines;
    ay1 = (0-300)/numLines;
    ax2 = (400-0)/numLines;
    ay2 = (0-0)/numLines;

    //base lines for top right white strings
    line(0, 0, 400, 0);
    line(400, 0, 400, 300);
    bx1 = (400-0)/numLines;
    by1 = (0-0)/numLines;
    bx2 = (400-400)/numLines;
    by2 = (300-0)/numLines;

    //base lines for bottom right white strings
    line(400, 0, 400, 300);
    line(400, 300, 0, 300);
    cx1 = (400-400)/numLines;
    cy1 = (300-0)/numLines;
    cx2 = (0-400)/numLines;
    cy2 = (300-300)/numLines;

    //base lines for bottom left white strings
    line(400, 300, 0, 300);
    line(0, 300, 0, 0);
    dx1 = (0-400)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (0-300)/numLines;

    //base lines for top bottom orange strings
    line(200, 0, 400, 0);
    line(200, 300, 0, 300);
    fx1 = (400-200)/numLines2;
    fy1 = (0-0)/numLines2;
    fx2 = (0-200)/numLines2;
    fy2 = (300-300)/numLines2;

    //base lines for left right orange strings
    line (0, 0, 0, 150);
    line(400, 300, 400, 150);
    gx1 = (0-0)/numLines2;
    gy1 = (150-0)/numLines2;
    gx2 = (400-400)/numLines2;
    gy2 = (150-300)/numLines2;
}

function draw() {

	//center pink strings
	for (var i = 0; i < 300; i += 8) {
		stroke(255, 161, 231); //pink
		strokeWeight(1);
		line (width/2, i + 0, i + width/2, height/2); //top right
		line(width/2, height - i, i + width/2, height/2); //bottom right
        line(width/2, i + 0, width/2 - i, height/2); //top left
        line(width/2, height - i, width/2 - i, height/2); //bottom left
	}

	//top left white strings
	var x1a = 0;
	var y1a = 300;
	var x2a = 0;
	var y2a = 0;
	for (var i = 0; i <= numLines; i +=1) {
		stroke(255);
		strokeWeight(1);
		line(x1a, y1a, x2a, y2a);
		x1a += ax1;
		y1a += ay1;
		x2a += ax2;
		y2a += ay2;
	}

	//top right white strings
	var x1b = 0;
	var y1b = 0;
	var x2b = 400;
	var y2b = 0;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1b, y1b, x2b, y2b);
		x1b += bx1;
		y1b += by1;
		x2b += bx2;
		y2b += by2;
	}

	//bottom right white strings
	var x1c = 400;
	var y1c = 0;
	var x2c = 400;
	var y2c = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1c, y1c, x2c, y2c);
		x1c += cx1;
		y1c += cy1;
		x2c += cx2;
		y2c += cy2;
	}

	//bottom left white strings
	var x1d = 400;
	var y1d = 300;
	var x2d = 0;
	var y2d = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1d, y1d, x2d, y2d);
		x1d += dx1;
		y1d += dy1;
		x2d += dx2;
		y2d += dy2;
	}

	//center circle yellow strings
	for (var e = 120; e <= 240; e++) {
		stroke(247, 241, 117);
		strokeWeight(1.5);
		noFill();
		ellipse(width/2, height/2, e, e);
		e += 4; //spacing
	}

	//top bottom orange strings
	var x1f = 200;
	var y1f = 0;
	var x2f = 200;
	var y2f = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		stroke(255, 134, 4, 70);
		line(x1f, y1f, x2f, y2f);
		x1f += fx1;
		y1f += fy1;
		x2f += fx2;
		y2f += fy2;
	}

	//left right orange strings
	var x1g = 0;
	var y1g = 0;
	var x2g = 400;
	var y2g = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		line(x1g, y1g, x2g, y2g);
		x1g += gx1;
		y1g += gy1;
		x2g += gx2;
		y2g += gy2;
	}

	noLoop();
}