var spacing = 5;
function setup() {
createCanvas(300, 400);
}
function draw() {
background(0);
//botton right corner
for (i = 0; i < 100; i++){
stroke(251, 201, 137);
//limit mouseX
if (mouseX < 100){
mouseX = 100;
}
if (mouseX > 300){
mouseX = 300;
}
map(mouseX, 0, width, 0, 30);
line(0, height, mouseX * i, 5*i);
}
for (i = 0; i < 20; i++){
map(mouseY, 0, height, 0, 20);
//upper left corner
//color gradient
stroke(50, 200, mouseX);
line(0, i * spacing * 5, width - i * spacing * 3, 0);
//upper right corner
stroke(255, 255 - i * 3, 255 - i *10);
line(width - i * spacing, 0, width - i * spacing, height - i * spacing *5);
//red lines
//limit mouseY
if (mouseY > 50){
mouseY = 50;
}
stroke("red");
line(width - i * mouseY, 0, i * spacing, height);
}
//background white lines
for (i = 0; i < 50; i++) {
stroke(255);
line(width, height - i * spacing * 3, sq(i * spacing/6), height - i * spacing * 3);
}
}
I played around with different variables, compositions, color gradient to create a visually harmonious image.