sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300
var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;
var dx5;
var dy5;
var dx6;
var dy6;
function setup() {
createCanvas(400, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(66, 245, 236);
stroke(255); //white background lines
for (var p = 0; p <= 400; p += 10) {
line(p, 0, 1.5*p, 300);
line(1.5*p, 0, p, 300);
}
stroke(245, 66, 173); //top left pink lines
for (x1 = 0; x1 <= 400; x1 +=10) {
line(x1, y1, x2, y2);
y2 -= 10;
}
push();
translate(400, 0); //top right pink lines
rotate(radians(180));
for (x1 = 0; x1 <= 400; x1 += 5) {
line(x1, y1, x2, y2-200);
y2 += 5
}
pop();
stroke(0, 150, 0); //green triangle
line(330, 100, 100, 300);
line(330, 100, 320, 300);
dx3 = (100-330)/numLines;
dy3 = (300-100)/numLines;
dx4 = (320-330)/numLines;
dy4 = (300-100)/numLines;
var x3 = 330;
var y3 = 100;
var x4 = 330;
var y4 = 100;
for (var i = 0; i <= numLines; i+=1) {
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
stroke (255, 0, 255); //purple triangle
line(60, 100, 275, 300);
line(60, 100, 70, 300);
dx5 = (275-60)/numLines;
dy5 = (300-100)/numLines;
dx6 = (70-60)/numLines;
dy6 = (300-100)/numLines;
var x5 = 60;
var y5 = 100;
var x6 = 60;
var y6 = 100;
for (var j = 0; j <= numLines; j+=1) {
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
}
noLoop();
}
I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.