Project – 04 – String Art

/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

//* INSPIRED BY ORIGAMI FORTUNE TELLING GAME *//

var db2;
var dd2; 
var x; 
var y; 
var numLines = 30; 

function setup() {
    createCanvas(400,400);

    x = width; 
    y = height; 

    // Outer Square Outline 
    //leftmost, upwards slope line 
    line(200,0,0,200); 
    //rightmost, upwards slope line
    line(200,0,400,200); 
    //leftmost, downwards slope line
    line(0,200,200,400);
    //rightmost, upwards slope line  
    line(400,200,200,400); 

	// Middle Square Outline 
	// left vertical
    line(100,100,100,300); 
    // right vertical 
    line(300,100,300,300); 
    // top horizontal 
    line(100,100,300,100); 
    // bottom horizontal 
    line(100,300,300,300); 

    // Setting variables for spacing between lines 
	db2 = (250-50)/numLines;
	dd2 = (250-50)/numLines; 
	df2 = (50-250)/numLines; 

}

function draw() {

	background(255); 

	// Setting initial values & variables for lines of outer square
	var b2 = 0; 
	var d2 = 0; 
	var f2 = 400; 
	var h2 = 400; 

	// Setting inital values & variables for lines of inner square 
	var i2 = 100; 
	var j2 = 100;
	var k2 = 100;
	var l2 = 100;
	var m2 = 100;
	var n2 = 100;
	var o2 = 100; 
	var p2 = 100; 

	for (var i = 0; i <= numLines; i += 1){
	// Lines connecting canvas to outer square 
	stroke(168,179,236); 
	strokeWeight(1); 

		line(x/2,y,x,f2); 
		f2 += df2; 
		line(x/2,y,0,h2); 
		h2 += df2; 
		line(x/2,0,0,b2); 
		b2 += db2; 
		line(x/2,0,x,d2); 
		d2 += db2; 

	// Lines connecting outer square to inner square  
	stroke(168,179,236); 
	strokeWeight(1); 

		line(0,y/2,100,i2);
		i2 += db2; 
		line(x,y/2,300,j2); 
		j2 += db2; 
		line(x/2,0,k2,100); 
		k2 += db2; 
		line(x/2,y,l2,300); 
		l2 += db2;

	// Lines inside smallest innermost square 
	stroke(120,129,178); 
	strokeWeight(1); 

		line(x/2,y/2,100,m2); 
		m2 += db2; 
		line(x/2,y/2,300,n2); 
		n2 += db2;  
		line(x/2,y/2,o2,100);
		o2 += db2; 
		line(x/2,y/2,p2,300); 
		p2 += db2; 

	// Colored circles 
	noStroke(); 
	fill(253,87,120); 
	ellipse(200,50,25); 
	fill(255,178,100)
	ellipse(350,200,25); 
	fill(169,255,166); 
	ellipse(200,350,25); 
	fill(81,104,255); 
	ellipse(50,200,25); 

	// Dynamic element that follows the mouse 
	//bottom "triangle"
   for(var a = 0; a < 400; a += 15) {
    	var d = 0; 
    	d += a; 
        stroke(255);
        strokeWeight(0.5);
        line(mouseX, mouseY, d, 400);
	}

    //top "triangle"
    for(var a = 0; a < 400; a += 15) {
    	var dd = 0;
    	dd += a;
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,dd,0);
	}

	//right "triangle"
    for(var a = 0; a < 400; a += 15) {
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,396,a);
	}

	//left "triangle"
	for(var a = 0; a < 400; a += 15) {
     	var dd2 = 0; 
    	dd2 += a;
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,0,a);
    }
    }
}