var y1 = 0;
var y2 = 0;
var x1 = 0;
var x2 = 0;
var x3 = 0;
function setup() {
createCanvas(400, 300);
background(0);
for(var i = 0; i < 100; i++) { //for loop that is redrawing all of the lines
y1 = lerp(height, 0, i/100); //increments lines at specific ratios
x1 = lerp(0, width, i/100);
y2 = lerp(0, height, i/100);
x2 = lerp(width, 0, i/100);
x3 = lerp(0, width, i/25);
colorMode(HSB); // changes color values to those of saturation, not RGB
strokeWeight(0.25); //decreases thickness of line
stroke (280,map(100-i,100,0,60,0),100); //line of code that gradiates the color proportionally
line(width, height/3, x3 - 1400, height * 2);
colorMode(RGB); //color values back to RGB
line(i,(height/2)+height*sin(map(i,0,100,0,2*PI))*.25,5*i,(height/2)-height*sin(map(i,0,100,0,2*PI))*.25); //creates lines that draw along a sin curve
stroke(color(255));
strokeWeight(0.5);
line(x1 * i, y1, 0, 0);
strokeWeight(1);
stroke(color('#0B2838'));
line(width/2, y1, x2, height/2);
strokeWeight(2);
stroke(color('#1F2654'));
line(width/2, y2, x1, height/3);
strokeWeight(0.05);
stroke('pink');
strokeWeight(1);
line(width/2, height/2, x1, height * 0.125 - 50);
stroke(color('10'));
line(width/3, y2, x1, height/3);
stroke(color('#513B70'));
line(width/2 + 50, y2, x1, height/3);
strokeWeight(0.25);
stroke(color('#8E5D91'));
line(width/2, y2, x1, height/4);
strokeWeight(1);
stroke(color('#B589A0'));
line(width/2, y1, x2, height/4);
line(width/2, height/2, x1, -height/8);
}
}
I enjoyed doing this project as I really love looking at the play of negative space that tricks our eyes that these straight lines create a curved one. I also particularly enjoy experiencing and seeing the play of a color palette and how each color plays into the next.