Kevin Riordan Project-04-String-Art-Section C

kzr-project-04

/*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.