Project: 11

I really enjoyed creating this even though it took me a while to understand objects, I feel the birds and pagoda along with the colour tones were extremely soothing!

sketch

//Aadya BHartia
//Section A 
//abhartia@andrew.cmu.edu

/* the program shows a river and mountains as well as pagodas, the birds and pagodas along with the 
variation in landscape help the visuals become more interesting and dynamic */

//variables to store colurs
var c1;
var c2;
//storing birds in an array 
var birds = [];
//pagoda in an array
var pagodas = [];
//water speed
var waterSpeed = 0.0001;

function setup() {
    createCanvas(400, 400);
    c1 = color(218, 239, 252);
    c2 = color(240, 198, 196);
    frameRate(15);
    //create an initial collection of birds
    for(var i = 0; i<5; i++){
    	var birdX = random(width);
    	var birdY = random(0, height/3);
    	birds[i] = drawBird(birdX, birdY);
    }
    //create an initial collection of pagodas 
    for(var k = 0; k<2; k++){
    	var pagodaX = random(width);
    	var pagodaY = random(250, 300); 
    	pagodas[k] = drawPagoda(pagodaX, pagodaY);
    }
}

function draw() {
	gradient(c1, c2);
	drawMountain2(); //background mountains 
	drawMountain();//foreground mountains 
	//pagoda update functions 
	pagodaUpdate();
	pagodaAppear();
	pagodaDisappear();
	//water level
	drawWater();
	drawWater2();
	//birds in the sky
	birdUpdate();
	birdAppear();
	birdDisappear();
}

//background gradient from blue to light orange 
function gradient(c1,c2){
	noFill();
	noStroke();
	for(var i = 0; i<height; i++){
		var a = map(i, 0, height, 0, 1);
		var c = lerpColor(c1,c2,a);
		stroke(c);
		line(0, i, width, i);	
	}
}
//function to display water in foreground 
function drawWater(){
	var water1 = 0.001;
	var speedW1 = 0.0003;
	noStroke();
	fill(189, 210, 222);
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*water1 + millis()*speedW1;
		var y = map(noise(x), 0, 1, 260, 300);
		vertex(i, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}
function drawWater2(){
	//function to display second shade water in foreground  
	var water2 = 0.001;
	var speedW2 = 0.0001;
	fill(163, 198, 218);
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*water2 + millis()*speedW2;
		var y = map(noise(x), 0, 1, 290, 350);
		vertex(i, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}
function drawMountain(){
	var mount1 = 0.014;
	var speedM1 = 0.0008;
	//foreground mountain
	stroke(249, 224, 226); 
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*mount1 + millis()*speedM1;
		var y = map(noise(x), 0,1.5,height/6, height);
		line(i, y, i, height);
	}
	endShape(); 
	//shading for foreground mountain 
	for(var k = width/2; k<4*width/5; k++){
		var z = map(k, width/2,4*width/5,0, 255);
		stroke(246, 188, 192,z);
		line(0, k, width, k);
	}
}
function drawMountain2(){
	var mount2 = 0.009;
	var speedM2 = 0.001;
	//background mountain
	stroke(246, 188, 192); 
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*mount2 + millis()*speedM2;
		var y = map(noise(x), 0,1.5,20, 2*height/3);
		line(i, y, i, height);
	}
	endShape();
	//shading for background mountain	
	for(var k = width/4; k<2*width/3; k++){
		var z = map(k, width/4,2*width/3,0, 255);
		stroke(249, 224, 226,z);
		line(0, k, width, k);
	}
}

//pagodas
function pagodaMove(){
	//update speed of every pagoda 
	this.x1 -= this.speed; 
}
function pagodaMake(){
	noFill();
	stroke(80);
	strokeWeight(2);
	//making the pagoda 
	line(this.x1, (this.y1+50) , this.x1, (this.y1-40));
	line(this.x1+30, (this.y1+50) , this.x1 +30, (this.y1-40));
	strokeWeight(4);
	line(this.x1, (this.y1-35), this.x1+30, (this.y1-35));
	strokeWeight(6);
	line(this.x1-5, (this.y1-42), this.x1+35, (this.y1-42));
}
function pagodaUpdate(){
	// Update the pagodas's positions, and display them.
	for(var i = 0; i< pagodas.length; i++){
		pagodas[i].shift();
		pagodas[i].display();
	}
}
function pagodaAppear(){
	//with a tiny probablilty adding pagodas 
	if(random(0,1)<0.007){
		var pagodaX = width; 
		var pagodaY = random(250, 300 ); 
		pagodas.push(drawPagoda(pagodaX, pagodaY));
	}
}
function pagodaDisappear(){
	//removing pagodas which have reached the edge 
	var pagodasKeep = [];
	for(var i = 0; i<pagodas.length; i++){
		if(pagodas[i].x1 + pagodas[i].bredth > 0){
			pagodasKeep.push(pagodas[i]);
		}
	}
	pagodas = pagodasKeep;
}
function drawPagoda(pagodaX, pagodaY){
	var pagoda = { x1: pagodaX, y1: pagodaY, 
		speed: 4, bredth: 30,
		shift: pagodaMove, display: pagodaMake}
	return pagoda;	
}

//birds 
function drawBird(birdX, birdY){
	var bird = { x: birdX, y: birdY, 
		velocity: random(4,8), size: random(6,10),
		move: birdMove, show: birdMake}
	return bird;	
}

function birdMove(){
	//update speed of every birds 
	this.x -= this.velocity; 
	this.y -= this.velocity/random(5,10);
}
function birdMake(){
	noFill();
	stroke(80);
	strokeWeight(1);
	arc(this.x, this.y, this.size, this. size/2, PI, TWO_PI);
	arc(this.x+ this.size, this.y, this.size, this. size/2 ,PI, TWO_PI);
}
function birdUpdate(){
	// Update the birds's positions, and display them.
	for(var i = 0; i< birds.length; i++){
		birds[i].move();
		birds[i].show();
	}
}
function birdAppear(){
	//with a tiny probablilty adding birds 
	if(random(0,1)<0.1){
		var birdX = width; 
		var birdY = random(0, height/3 ); 
		birds.push(drawBird(birdX, birdY));
	}
}
function birdDisappear(){
	//removing birds which have reached the edge 
	var birdsKeep = [];
	for(var i = 0; i<birds.length; i++){
		if(birds[i].x + birds[i].size > 0){
			birdsKeep.push(birds[i]);
		}
	}
	birds = birdsKeep;
}

Leave a Reply