rgroves – String Art – Section B

sketch

//Rebecca Groves
//rgroves@andrew.cmu.edu
//Section B
//Project 4 String Art

//sky - position of the ellipses
var x;
var y;

//spacing of the mountains
var m1 = 30;
var m2 = 25;
var m3 = 5; 

//lake spacing
var l = 1;
var k = 1.02; //constant to increase spacing by

//foreground hillsspacing
var f1 = 2;
var f2 = 2.2; 
var a = 260; //top of the back hill
var b = 310; //top of the middle hill
var c = 380; //top of the front hill

function setup() {
    createCanvas(600, 400);
    background(200, 210, 200);
    //sky
    for (var i = 0; i < 5000; i++) {
    	noStroke();
        ellipse(x, y, random(80), random(80));
        x = random(width);
        y = random((2/3) * height);
        if (dist(x, y, 150, 100) < 85) { //make the sky brighter near the sun
        	fill(random(230, 255), random(235, 255), random(225, 240), 75);
        } else {
            fill(random(180, 240), random(180, 255), random(220, 255), 50);
        }
    }
    noLoop(); // turn off looping
    //sun
    fill(255, 245, 180);
    ellipse(150, 100, 20, 20);
}

function draw() {
	//first row of mountains
	for (var i = 0; i < 35; i++) {
		stroke(210, 190, 180);
		strokeWeight(.25);
		line(200, 125, -300 + (i * m1), height);
		line(300, 130, -250 + (i * m1), height);
		line(475, 100, -50 + (i * m1), height);
	}

	//second row of mountains
	for (var i = 0; i < 50; i++) {
		stroke(160, 146, 160);
		strokeWeight(.5);
		line(50, 130, -400 + (i * m2), height);
		line(550, 140, 50 + (i * m2), height);
		line(350, 150, -600 + (i * m2), height);
		line(350, 150, 400 + (i * m2), height);
	}

	//front row of mountains
	for (var i = 0; i < 100; i++) {
		stroke(171 - i , 176 - i, 206 - i); //lighter on the side facing the sun
		strokeWeight(1);
		line(120, 165, -150 + (i * m3), (2/3) * height);
		line(450, 140, 200 + (i * m3), (2/3) * height);
		//reflections in the water
		stroke(120, 125, 170, 70);
		line(120, (4/3) * height - 165, -150 + (i * m3), (2/3) * height);
		line(450, (4/3) * height - 140 , 200 + (i * m3), (2/3) * height);

	}

	//lake
	for (var i = 0; i < 500; i++) {
		stroke(0, 255, 255);
		strokeWeight(.25);
		line(0, (2/3) * height + l, width, (2/3) * height + l);
		l = k * l; //geometrically increase the distance between lines
	}

	//foreground
	for (var i = -50; i < 55; i++) {
		strokeWeight(1);
		stroke(179 - (2 * i), 177 - (2 * i), 75); //brighter on the side facing the sun
		var m = map(i, -50, 40, -1, .5);
		line(375 + ((i + 50) * f2), 280, 420 + ((i + 50) * f1), a);
		a = a + m; //since m goes from negative to positive, this allows the hill to 
		           //slope upward and then downward
	}
		
	for (var i = -80; i < 60; i++) {
		strokeWeight(1);
		stroke(179 - (2 * i), 177 - (2 * i), 75);
		var m = map(i, -80, 60, -1, .5);
		line(310 + ((i + 80) * f2), 330, 350 + ((i + 80) * f1), b);
		b = b + m;
	}

	for (var i = -150; i < 100; i++) {
		strokeWeight(1);
		stroke(179 - (4 * i), 177 - (4 * i), 75);
		var m = map(i, -150, 100, -1, .5);
		line(210 + ((i + 150) * f2), height, 250 + ((i + 150) * f1), c);
		c = c + m;
	}
}

I liked how creating images with lines instead of solid shapes allows for a lot more visual interest. Without even trying to you can wind up with gradients and cool patterns from overlapping lines.