ShanWang-Project-04-String-Art

In this project I first tried to create a gradient background with layers of lines like a spider web. Then I modified the code so that the central group of lines are accentuated with greater stroke weights.
At last, I created two groups of lines on the top left and down right corner of the canvas to give the entire composition a sense of enclosure.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-04

var ref1Size; //size of gap for reference 1
var color;
var colorControl = 30;
var weight;
var ref1Control = 3.5;
var ref2Control = 1.5;
var weightControl = 16;
var interval1 = 10;
var interval2 = 15;

function setup() {
    createCanvas(640, 480);
    c1 = color(200, 219, 216);
    c2 = color(99,112,145);
}
// create the function that generates the gradient
function gradient(x,y,wid,hei,c1,c2){
    noFill();
    for (var i = x; i<x+wid; i++){
        var inter = map(i,x,x+wid,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(i,y,i,y+hei);
    }
}
function draw() {
    noLoop();
    weight = 0.2;
    color = 220;
    ref1Size = width/80;
    //create background gradient
    gradient(0,0,width,height,c1,c2);
    //create background grid patterns and accentuate the shape in the middle
    //use nested loop to generate multiple curves
    for (var i = 1; i<7; i++){
        for (var a = 0; a<18; a++){
            if (i%4 == 4){
                color += colorControl*1.5;
                weight -= 0.01*weightControl;
                ref1Size += 0.5;
            } else if (i%4 == 3){
                color += colorControl*0.5;
                weight -= 0.03*weightControl;
                ref1Size += 2;
            } else if (i%4 == 2){
                color += colorControl*0.3;
                weight = 0.015*weightControl;
                ref1Size += 0.5;
            } else if (i%4 == 1){
                color += colorControl*0.5;
                weight += 0.002*weightControl;
                ref1Size -= 0.5;
            } else {
                color += colorControl;
                weight += 0.008*weightControl;
                ref1Size += 0.5;
            }
            strokeWeight(weight);
            stroke(color,color,color);
            line(0,(i+1)*ref1Size*ref1Control*0.75,width,height-(a+1)*ref1Size*ref2Control);
        }
    }
    //draw partial web on the top left corner
    for (var i = 0; i<40;i++){
        stroke(color+i*5);
        strokeWeight(0.4);
        line(0,height/2-interval1*i,i*interval1,0);
    }
    //draw partial web on the down right corner
    for (var i = 0; i<70;i++){
        stroke(color+i);
        strokeWeight(0.3);
        line(i*interval2,height,width,height-interval2*i*2);
    }
}