Project 11 – Moving Landscape

//Aarnav Patel
//aarnavp@andrew.cmu.edu
//Section D

var r = 140;
var g = 200;
var b = 230;
var cloudR = 255;
var cloudG = 255;
var cloudB = 255;
var sunX;
var sunY = 0; 
var sunR = 255;
var sunG = 247;
var sunB = 197;
var sunSize = 50;


var airBalloons = [];
var clouds = [];
var sceneCount = 0;
var bPics = ["https://i.imgur.com/El159Qi.png", "https://i.imgur.com/Inz2K7i.png", "https://i.imgur.com/IjQkLRr.png"]
var balloons = []

function preload() {
	//load the images
	for (var i = 0; i < bPics.length; i++) {
		balloons.push(loadImage(bPics[i]));
	}
}

function setup() {
    createCanvas(480, 200);
    sunX = width;
  	frameRate(10);

}

function draw() {

	var sky = color(r, g, b);
	fill(sky);
	rect(0, 0, width, height);


	//sky color change
	if (r < 255) {
		r += 0.1

	} 
	if (g > 150) {
		g -= 0.1;

	} 
	if (b > 87) {
		b -= 0.1;

	}

	//sky grandient
	for (var i = 0; i < 50; i+= 0.5) {
		stroke(r + i, g + i, b + i);
		var amount = map(i * 2, 0, 100, height * 0.75, height);
		line(0, amount, width, amount);
	}

	//SUN 
	if (sunR > 242) {
		sunR -= 0.1;
	}
	if (sunG > 60) {
		sunG -= 0.1;
	}
	if (sunB > 10) {
		sunB -= 0.1;
	}

	noStroke();
	fill(sunR, sunG, sunB);
	ellipse(sunX, sunY, sunSize, sunSize)

	sunX -= 0.25;
	sunY += 0.1;
	sunSize += 0.01;


	//cloud color change
	if (cloudR >= 244) {
		cloudR -= 0.05;
	}
	if (cloudG >= 223) {
		cloudG -= 0.05;
	} 
	if (cloudB > 208) {
		cloudB -= 0.05;
	}
	generateClouds();
	generateAirBalloons();


	updateClouds();
	updateBalloons();
	sceneCount++;

}

function makeCloud(stormCloud) {
	var cloud = {
		cX: random(0, 1.5 * width), cY: random(0, height), cDx:0, 
		cW: random(100, 300), 
		isStorm: stormCloud,
		show: drawCloud, 
		move: moveCloud, 
	}
	return cloud;
}


function drawCloud() {
	noStroke();
	var xInterval = this.cW / 8; //makes sure the x points never exceed the assigned cloudWidth
	var xPoint = this.cX
	var yPoint = this.cY

	//foreground clouds are lightest
	if (this.cW > 200) {
		this.cDx = 5;
		fill(cloudR, cloudG, cloudB, 255);
	} else if (this.cW > 100){	//midGround are slightly opaque
		fill(cloudR, cloudG, cloudB, 200)
		this.cDx = 3;
	} else {
		fill(cloudR, cloudG, cloudB, 100);	//background are most opaque
		this.cDx = 1;
	}
	//checks if its storm cloud
	if (this.isStorm) {
		fill(200, 255);
		
	}


	//generating points for the lowPoly Clouds
	var y = [yPoint, yPoint - 15, yPoint - 20, yPoint - 15, yPoint, yPoint + 15, yPoint + 20, yPoint + 15];
	//Y points are fixed
	var x = [xPoint];
	for (var i = 0; i < 8; i++) {
		if (i < 4) {
			xPoint += xInterval
		} else {
			xPoint -= xInterval
		}
		x.push(xPoint);
		

	}


		//gives animating effect
		for (var i = 0; i < x.length; i++) {
			x[i] += random(-5, 5);
			y[i] += random(-5, 5);
		}



	//draw cloud based on array made
	beginShape();
	for (var i = 0; i < x.length; i++) {
		vertex(x[i], y[i]);
	}
	endShape(CLOSE);

}


function moveCloud() {
	//updates cloudX by its speed
	this.cX -= this.cDx;

	//when cloudX is off left of screen, assigns it new position
	if (this.cX + this.cW < 0) {	//checks right side of cloud
		this.cX = random(width, 1.5 * width);
		this.cY = random(0, height / 1.5);
	}
}


function updateClouds() {
	//moves all the clouds from global cloud array
	for (var i = 0; i < clouds.length; i++) {
		clouds[i].move();
		
	}
}

function generateClouds() {
	//creates clouds with a 1/8 chance of a cloud being a storm cloud
	var isStorm = false;
	for (var i = 0; i < 15; i++) {
		
		if (amount = Math.floor(random(1, 8)) == 2) {
			isStorm = true;
		}
    	var c = makeCloud(isStorm);
    	clouds.push(c);
    	clouds[i].show();
    	isStorm = false;
    }
}

function generateAirBalloons() {
	//generates air balloons from image I have
	for (var i = 0; i < 10; i++) {
		var b = makeBalloon()
		airBalloons.push(b);
		airBalloons[i].show();
	}
}

function makeBalloon() {
	var b = {
		bX: random(0, width), bY: random(height * -5, height),
		bDx: Math.floor(random(-4, 4)), bDy: Math.floor(random(2, 4)),
		bImage:  Math.floor(random(0, 3)),	//ranodm number to select the type of balloon image
		ratio: Math.floor(random(0, 2)),
		show: drawBalloon, 
		float: floatBalloon,
	}

	return b;
}

function updateBalloons() {
	for (var i = 0; i < airBalloons.length; i++) {
		airBalloons[i].float();
	}
}

function floatBalloon() {
	this.bX += this.bDx;
	this.bY += this.bDy;

	if (this.bY > height) {
		this.bY = random(height * -5, height * -0.25);
		this.bX = random(0, width);
	}

}

function drawBalloon() {
	image(balloons[this.bImage], this.bX, this.bY, balloons[this.bImage].width * this.ratio, balloons[this.bImage].height * this.ratio);
}