Project 10 – Generative Landscape

index

var NPOINTS = 100;
var starX = [];
var starY = [];
var sandX = [];
var sandY = [];
var birdX = 270
var birdY = 160
var low = 300
var high = 120
var a = width / 2;
var b = width / 2;
var c = width / 2;

function setup() {
    createCanvas(480, 480);

	//assigns new coordinate for each sand grain
	for (var i = 0; i < NPOINTS; i++) {
		sandX.push(random(0, 480));
		sandY.push(random(380, 480));
	};
}

function draw() {
	//sky gradient
	var col1 = color(47, 107, 177)
	var col2 = color(180, 197, 227)

	//rearranges values so that each line of sky has a different color
	for (var i = 0; i < height / 3 * 2; i++){
        var gradient = map (i, 0, height / 3 * 2, 0, 1);
        var newC = lerpColor(col1, col2, gradient);
        stroke(newC);
        line(0, i, width, i);
    }

	//bird's beak
	push();
	noStroke();
	fill(244, 198, 68);
	triangle(birdX + 8, birdY - 2, birdX + 8, birdY + 6, birdX + 17, birdY + 2);
	pop();

	//bird's head
	push();
	noStroke();
	fill(0);
	ellipse(birdX, birdY, 22, 20);
	pop();

	//bird's eye
	push();
	fill(255);
	strokeWeight(2);
	line(birdX + 1, birdY - 2, birdX + 4, birdY - 2);
	pop();


	//bird's back
	push();
	noStroke();
	fill(0);
	arc(birdX - 23, birdY + 2, 45, 30, 0, PI);
	pop();

	//sea
	noStroke();
	fill(123, 159, 189);
	rect(0, height / 3 * 2, width, height);

	//sand
	fill(211, 195, 182);
	arc(width / 2, height, width * 4, height / 7 * 3, PI, TWO_PI);

	//bird's wing
	noStroke();
	fill(0);
	quad(birdX - 30, birdY + 10, birdX - 35, birdY - 15, birdX - 21, birdY - 15, birdX - 5, birdY + 10);

	//moves bird according to mouse
	if (mouseY < 300 & mouseY > 120) {
		birdY = mouseY;
	} else if (mouseY < 120) {
		birdY = high;
	} else if (mouseY > 300) {
		birdY = low;
	};

	//makes sand move
	for (var i = 0; i < sandX.length; i++) {
		stroke(0);
		point(sandX[i], sandY[i]);
		sandX[i] = sandX[i] - 1;
		if (sandX[i] < 0) {
			sandX[i] = width;
		};
	};

}

For this project, I wanted to create a beach because I grew up living on an island. I initially wanted to create trees but ran out of time so I used sand as a way to represent a changing landscape.

My initial sketch on the top versus my final sketch on the bottom.

Leave a Reply