![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_04*/
function setup() {
createCanvas(400,300);
background(255);
}
function draw() {
var x1;
var x2;
var y1;
var y2;
//criss cross and grid lines
strokeWeight(0.1);
for (var i=0; i<=800; i+=10) {
stroke(200);
line(0,i,i,0);
stroke(200);
line(0,height-i,i,height);
stroke(220);
line(i,0,i,height);
line(0,i,width,i);
}
stroke(0);
//bottom left
x1=0;
x2=0;
y1=0;
y2=300;
strokeWeight(0.2);
for (var length1=0; length1<=1; length1+=0.02) {
x2=lerp(0,400,length1);
y1=lerp(0,300,length1);
line(x1,y1,x2,y2);
}
//top left
for (var length2=0; length2<=1; length2+=0.02) {
x2=lerp(0,400,1-length2);
y1=lerp(0,300,length2);
line(x1,y1,x2,height-y2);
}
//bottom right
for (var length3=0; length3<=1; length3+=0.02) {
x1=lerp(0,400,1-length3);
y2=lerp(0,300,length3);
line(x1,y1,width-x2,y2);
}
//top right
x1=0;
y1=0;
x2=400;
y2=0;
for (var length4=0; length4<=1; length4+=0.02) {
x1=lerp(0,400,length4);
y2=lerp(0,300,length4);
line(x1,y1,x2,y2);
}
//setting variables back to normal
x1=0;
y1=0;
x2=0;
y2=0;
for (var lengthC=0; lengthC<=1; lengthC+=0.025) {
x1=lerp(0,200,lengthC);
y2=lerp(0,150,lengthC);
stroke(25);
line(2*x1-width/2,height/2,width/2,height/2-(y2*2));//top left
line(width/2,(y2*2)-height/2,2*x1+width/2,height/2);//top right
line(2*x1-width/2,height/2,width/2,height/2+(y2*2));//bottom left
line(width/2,1.5*height-(y2*2),2*x1+width/2,height/2);//bottom right
}
//inside curves setting variables back to normal
x1=0;
y1=0;
x2=0;
y2=0;
strokeWeight(0.3);
//curves go in a clockwise direction around
for (var lengthIm=0; lengthIm<=1; lengthIm+=0.03) {
x1=lerp(0,200,lengthIm);
y2=lerp(0,150,lengthIm);
//dark gray lines
stroke(50);
line(x1,y1,width/2-x2,y2); //top left quadrant upper curve
line(width/2,height/2-y2,x1+width/2,y1); //top right quadrant upper curve
line(width/2+x1,height/2,width,height/2-y2); //top right quadrant lower curve
line(width/2+x1,height/2,width,height/2+y2); //bottom right quadrant upper curve
line(width/2,height/2+y2,width/2+x1,height); //bottom right quadrant lower curve
line(x1,height,width/2,height-y2); //bottom left quadrant lower curve
line(0,height-y2,x1,height/2); //bottom left quadrant upper curve
line(0,y2,x1,height/2); //top left quadrant lower curve
}
x1=0;
y1=0;
x2=0;
y2=0;
strokeWeight(0.4);
for (var lengthIn=0; lengthIn<=1; lengthIn+=0.03) {
x1=lerp(0,200,lengthIn);
y2=lerp(0,150,lengthIn);
//doing lines going the other way now on the outside
stroke(100);
line(0,height/2-y2,x1,0); //top left
line(width/2+x1,0,width,y2); //top right
line(width/2+x1,height,width,height-y2); //bottom right
line(0,height/2+y2,x1,height); //bottom left
}
x1=0;
y1=0;
x2=0;
y2=0;
strokeWeight(0.2);
for (var lengthIo=0; lengthIo<=1; lengthIo+=0.03) {
x1=lerp(0,200,lengthIo);
y2=lerp(0,150,lengthIo);
//doing even lighter lines in the center now
stroke(150);
line(x1,height/2,width/2,height/2-y2); //center left
line(width/2,y2,width/2+x1,height/2); //center right
line(width/2,height-y2,width/2+x1,height/2); //bottom right
line(x1,height/2,width/2,height/2+y2); //bottom left
}
}I started by doing each group of lines in its own for loop, and then resetting the variables after each loop. Once I finished the first four outside line curves, I realized I could just put the rest of the smaller curves inside one for loop, so I did that at the end. But that didn’t make it layer right, so I split the big loop up into three for loops to layer each differently colored group correctly. Overall, I got comfortable with for loops and the lerp function, which I did not understand at all before this project.
