The project is a relaxing view of sunset in an air balloon – if you take the time to watch the full animation, you can see the colors of the sky, sun, and clouds change as well through gradual RGB changes and color theory. I wanted a lowpoly style animation, and worked to get effect through the “shifting clouds”
sketch//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);
}
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
