selinal-Project-String Art-04

My process for creating these visuals was first to cement a series of curves in a “random” line and balance that series with other curves series based on the location and spread of the first.

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(400, 300);
    background(250, 220, 130); //faint yellowish background
    
    noStroke();
    fill(200, 220, 170, 120); //greenish arced shadow on right lower corner
    ellipse(400, 320, 550, 400);

    for(var line1x = 0; line1x < width; line1x += 15) { //initial red series of curves with increments of 15
    	fill(200, 210, 110, 120); //greenish light color to fill curve shapes
    	stroke(250, 70, 20); // red line
    	curve(line1x, line1x, line1x * 10, 100, line1x * 2.5, 200, line1x * 2, height); 

    	curve(line1x - 15, height*1.5, line1x * 10 + 20, 220, line1x/2, 50, line1x * 2, 0);

    	curve(line1x/5, 0, -line1x, 0, line1x, 75, line1x + 50, 200);

    	curve(line1x, -100, -line1x/5, 100, line1x*10, 0, line1x + 50, 200);
    }
    
    for(var line2x = 6; line2x < width; line2x += 15) { //yellow series of curves with increments of 15 but starting more right
    	noFill();
    	stroke(250, 200, 0);
    	strokeWeight(2);
    	curve(line2x, line2x, line2x * 10, 100, line2x * 2.5, 200, line2x * 2, height*2); //thicker top set

    	strokeWeight(1);
    	curve(line2x - 15, height, line2x * 10 + 20, 220, line2x/2, 50, line2x * 2, 0);

    	strokeWeight(.5);
    	curve(line2x/5, 0, -line2x, 0, line2x, 75, line2x + 50, 200); //diminishing bottom sets that overlap with red series and green fills

    	curve(line2x, -100, -line2x/5, 100, line2x*10, 0, line2x + 50, 200);
    }

    for(var line3x = 0; line3x < width; line3x += 20) { //linear series with larger increments of 20
    	stroke(255, 180, 10);
    	strokeWeight(1.5);
    	line(line3x, height +20, line3x*2.3, 200 - line3x/15); //evened out yellow lines on bottom of canvas

    	line(line3x, height+20, line3x*1.8, 180 - line3x/15);

    	line(line3x, height + 20, line3x * 2, 190 - line3x/ 15);

    	fill(200, 50, 0, 150);
    	ellipse(line3x*2, 190 - line3x/15, 10, 10); //ellipse series of red circles

    }
    for(var circle4 = 220; circle4 < width; circle4 += 30) { //ellipse series from right half of canvas to balance out exponential series of red circles
    	fill(200, 50, 0, 150);
    	ellipse(circle4, 190 - circle4/15, 10, 10);
    	ellipse(circle4, 210 - circle4/25, 10, 10);
    }
    for(var line4y = 0; line4y < height; line4y += 15) { //vertical curve series to balance out horizontal strokes
    	fill(200, 100, 10, 50); // orange color with 50 percent transparency
    	curve(width, line4y, 250, line4y, 100, line4y, 0, height - line4y);
    }
}

function draw() {
}