var x1 = 1;
var x2 = 1;
var y1 = 1;
var y2 = 1;
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
// bottom section
for (var i1 = 5; i1 < 200; i1 += 10){ // start i1 at 5
strokeWeight(1);
stroke(255, 0, 255); // purple
x1 = 0.2 - i1;
y1 = width - i1 - 50;
x2 = width;
y2 += 25 - i1 / 15; // end point of line should grow towards end
line(x1, y1, x2, y2);
}
// top section
for (var i2 = 0; i2 < 300; i2 += 1){ // start i2 at 0
strokeWeight(1)
stroke(255, 0, 100); // pink
x1 = 0;
y1 = width - i2 * 10;
x2 = i2 + height;
y2 = i2 / 50;
line(x1, y1, x2, y2);
}
// right section
for (var i3 = 20; i3 < 300; i3 += 10){ // start i3 at 20
strokeWeight(0.5)
stroke(255, 150, 100); // orange
x1 = 0 - i3 * 10;
y1 = height - i3 * 30;
x2 = i3 * 0.5 + 300;
y2 = i3 + height / 2;
line(x1, y1, x2, y2);
}
// left section
for (var i4 = 0; i4 < 300; i4 += 5){ // start i4 at 0
strokeWeight(1);
stroke(100, 100, 255); // blue
x1 = 0; // start at 0
y1 = height - i4;
x2 += width - i4; // lines concentration increase at the end
y2 += i4 * 2;
line(x1, y1, x2, y2);
}
}
For this project, my goal was to create something more environmental and resembles landscapes/light through lines. I started by creating the bottom one first, and modified the rest based on the bottom one. I was trying to create a sense of depth through these two-dimensional strings, and although it took me a while to understand what I was doing, it was definitely a learning process.