When you reload it changes the color of the bottom left quadrant.
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;
function setup() {
createCanvas(400, 300);
background(50);
strokeWeight(0.01);
stroke(255);
line(50, 150, 200, 250);
line(50, 150, 200, 50);
line(200, 50, 350, 150);
line(350, 150, 200, 250);
line(50, 150, 350, 150);
line(200, 50, 200, 250);
//line(50, 50, 150, 300);
//line(300, 300, 350, 100);
dx1 = (200-50)/(1.05*numLines); // top left line X
dy1 = (150-50)/(1.05*numLines); // "" Y
dx2 = (350-200)/(1.05*numLines); // top right line X
dy2 = (150-50)/(1.05*numLines); // "" Y
dx3 = (350-200)/(1.05*numLines); //bottom right line X
dy3 = (250-150)/(1.05*numLines); // "" Y
dx4 = (200-50)/(1.05*numLines); //bottom left line X
dy4 = (250-150)/(1.05*numLines); // "" Y
}
function draw() {
strokeWeight(0.3);
stroke(0, 255, 0); //Quadrant 1 Y Changing (Green)
var x1 = 50;
var y1 = 150;
var x2 = 200;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
y2 += dy2;
}
stroke(255, 0, 0);//Quadrant 2 Y Changing (Red)
var x3 = 350;
var y3 = 150;
var x2 = 200;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x3, y3, x2, y2);
y2 += dy2;
}
stroke(255, 0, 0); //Quadrant 3 Y Changing (Red)
var x3 = 350;
var y3 = 150;
var x4 = 200;
var y4 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x3, y3, x4, y4);
y4 -= dy4;
}
stroke(random(255), random(255), random(255)); //Quadrant 4 Y Changing (Random);
var x1 = 50;
var y1 = 150;
var x4 = 200;
var y4 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x4, y4);
y4 -= dy4;
}
stroke(77, 77, 255); //Quadrant 1 X Changing (Blue)
var x2 = 200;
var y2 = 50;
var x1 = 50;
var y1 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x2, y2, x1, y1);
x1 += dx1;
}
stroke(80, 200, 120);
var x2 = 200; //Quadrant 2 X Changing (Green)
var y2 = 50;
var x3 = 350;
var y3 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x2, y2, x3, y3);
x3 -= dx3;
}
stroke(0, 0, 255); //Quadrant 3 X Changing (Blue)
var x4 = 200;
var y4 = 250;
var x3 = 350;
var y3 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x4, y4, x3, y3);
x3 -= dx3;
}
stroke(random(255), random(255), random(255)); //Quadrant 4 X Changing (Random Color)
var x4 = 200;
var y4 = 250;
var x1 = 50;
var y1 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x4, y4, x1, y1);
x1 += dx1;
}
noLoop();
}