dnoh-sectionD-project10-landscape

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project 10

var planes;
var clouds = [];

function preload() {
	//loading plane image
	var planeImage = "https://i.imgur.com/bQ0w1cU.png"
	planes = loadImage(planeImage);
}

function setup(){
  createCanvas(360,480);
  //create clouds inital
  for (var i = 0; i < 45; i++){
    var rd = random(width);
    clouds[i] = makeClouds(rd);
  }
  frameRate(30);
}

function draw(){
  var a = color(53,47,73);
  var b = color(113, 85, 52);
  backGradient(0, width, a, b);

  makeSun();
  updateCloud();
  removeCloud();
  addCloud();

  image(planes, 0, 0);
}

//creates a gradient color
function backGradient (y, x, a, b) {
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

//creates a blinking sun
function makeSun() {
  for (var i = 0; i < 10; i++) {
    var number = random(7,10); //makes the opacity vary
    var transparency = 60 - number*i;
    fill (220, 200, 120, transparency);
    ellipse(width/2, height/2+60, 150+20*i, 150+20*i);
  }
	//the actual sun center circle
  noStroke();
  fill(220, 200, 120);
  ellipse(width/2, height/2+60,150,150);
}

//updates the clouds so they move and show
function updateCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

//gets rid of clouds that pass the screen
function removeCloud(){
  var cloudsKeep = [];
  for (var i = 0; i < clouds.length; i++){
    if (clouds[i].x + clouds[i].breadth > 0){
      cloudsKeep.push(clouds[i]);
    }
  }
  clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud(){
  var newCloudPercent = 0.2;
  if (random(0,1) < newCloudPercent){
    var cloudX = width;
    var cloudY = random(height/1.2);
    clouds.push(makeClouds(width));
  }
}

//adds velocity to the clouds, making them move
function cloudMove(){
  this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud(){
  var cloudHeight = 5;
  var cHeight = this.nCloud*cloudHeight;

  noStroke();
  fill(255, this.opaque);
  push();
  translate(this.x, height/1.15);
  ellipse(0, -cHeight, this.breadth, cHeight/1.5);
  pop();
  push();
  translate(this.x, height/1.15+40);
  ellipse(30, -cHeight, this.breadth, cHeight);
  pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
	var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
	return cloud;
}

I started with a simple idea that an airplane was passing through in the skies. At first I imagined birds passing by, but quickly realized that birds don’t really exist that high up in the air. Therefore, I stuck with simple clouds that changed opacity and a sun that blinked in the sky. I created this sketch:

on illustrator and used that as the overlay that would envelope the moving clouds and blinking sun.