Project – String Art

// String Art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var numLines = 200;
var glowSize = 0;
function setup() {
    createCanvas(400, 300);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
    
  
}

function draw() {
	var voidX = width/2 - 40;
	var voidY = height/2 - 40;
	background(0);
	fill(220);
	stroke(220);
	rect(0,0,width,height); // room wall
	stroke(255,0,0);
	fill(0);
	circle(voidX, voidY, 125); //sinister void
	noStroke();
	fill(255,0,0,20);
	circle(voidX, voidY, 140 + glowSize); //glow around void
	fill(100);
	rect(0, height/2 + 70, width, height); //room floor
	//wall lights
	fill(255,255,0,70);
	circle(50,0,30);
	circle(120,0,30);
	circle(190,0,30);
	circle(260,0,30);
	circle(330,0,30);
	fill(255,255,0,100);
	circle(50,0,40);
	circle(120,0,40);
	circle(190,0,40);
	circle(260,0,40);
	circle(330,0,40);
	//reflection on floor
	fill(255,255,0,20);
	ellipse(190,height/2 + 90,300,10);
	fill(255,255,0,45);
	ellipse(190,height/2 + 90,200,5);
	//if user clicks in void eye and string art appears
	if (mouseIsPressed & abs(mouseX - voidX) <= 62.5 && abs(mouseY -voidY)<=62.5){
		//eye
		fill(255);
		noStroke();
		circle(voidX,voidY,60);
		fill(255,0,0);
		circle(voidX,voidY,20);
		fill(0);
		circle(voidX,voidY,10);
		//string art
		noFill();
		strokeWeight(.1);
		stroke(255,0,0);
		line(width, 0, 0, 10);
		line(10,0,width,30);
		line(40,height,100,0);
		line(300,0,350,height);
		line(230,0,200,height);
		dx1 = -width/numLines;
		dy1 = 10/numLines
		dx2 = (width-10)/numLines;
		dy2 = -height/numLines;
		dx3 = 60/numLines;
		dy3 = -height/numLines;
		dx4 = 50/numLines;
		dy4 = height/numLines;
		dx5 = -30/numLines;
		dy5 = height/numLines;
		var x1 = width;
		var y1 = 0;
		var x2 = 10;
		var y2 = 0;
		var x3 = 40;
		var y3 = height;
		var x4 = 300;
		var y4 = 0;
		var x5 = 230;
		var y5 = 0;
		for(var drawLine = 0; drawLine <= numLines; drawLine += 1){
			line(x1,y1,x2,y2);
			line(x1,y1,x3,y3);
			line(x1,y1,x4,y4);
			line(x1,y1,x5,y5);
			line(x2,y2,x3,y3);
			line(x2,y2,x4,y4);
			line(x2,y2,x5,y5);
			line(x3,y3,x4,y4);
			line(x3,y3,x5,y5);
			line(x4,y4,x5,y5);
			x1 += dx1;
			x2 += dx2;
			x3 += dx3;
			y1 += dy1;
			y2 += dy2;
			y3 += dy3;
			x4 += dx4;
			y4 += dy4;
			x5 += dx5;
			y5 += dy5;
		}

	}
	if(glowSize == 60){
		glowSize = 0;
	} else {
		glowSize += 1;
	}
}