Curran Zhang-Project 10- Landscape

sketch

/*Curran Zhang
curranz
Project 10
Section A
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = []; 
var star = [];
var frames = []; 
var characterX;  
var characterY;  

function setup() {
  createCanvas(480, 480);
  //Iniate Clouds
  for (var i = 0; i <5; i++) {
      var r = random(width);
      clouds[i] = makeClouds(r);
  }
  //Human Image Position 
    imageMode(CENTER);
    frameRate(15);
}

function preload(){
    var filenames = [];
      filenames[0] = "http://i.imgur.com/svA3cqA.png";
      filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
      filenames[2] = "http://i.imgur.com/IgQDmRK.png";
      filenames[3] = "http://i.imgur.com/kmVGuo9.png";
      filenames[4] = "http://i.imgur.com/jcMNeGq.png";
      filenames[5] = "http://i.imgur.com/ttJGwkt.png";
      filenames[6] = "http://i.imgur.com/9tL5TRr.png";
      filenames[7] = "http://i.imgur.com/IYn7mIB.png";
    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    }  
}

function draw() {
  //Gradient Background
    var from = color('red');
    var to = color(270);
    gradient(0,width,from,to);

  makeMountain1();
  makeMoon();
  makeStar();
  makeMountain1();
  makeMountain2();
  makeReflection();
  updateClouds();
  removeClouds();
  addClouds();
  makeHuman();
}

function gradient(y,w,from,to){
  for (var i = y; i <= height; i++) {
    var inter = map(i,y,y+w,0,1);
    var col = lerpColor(from,to,inter);
    stroke(col);
    strokeWeight(2);
    line(y,i,y+w,i);
  }
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 100; i++) {
      var starX = random(width);
      var starY = random(height);
      ellipse(starX,starY,1,1);
    }
}

function makeMountain1(){
  noStroke();
  fill(180,0,0); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
    var y = map(noise(t), 0,1.8, height/8, height);
    vertex(x, y); 
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function makeMountain2(){
  fill(139,0,0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height/2, height);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeReflection(){
  fill(220,50,50);
    rect(0, 375, width, 105);

  fill(255,60,60); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height, height*.5);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeMoon(){
    noStroke();
    fill(255,20);
    ellipse(2*width/3,height/4,170,170);
    ellipse(2*width/3,height/4,160,160);
    ellipse(2*width/3,height/4,150,150);
    ellipse(2*width/3,height/4,140,140);
    fill(255,200);
    ellipse(2*width/3,height/4,120,120);
}

function updateClouds(){
  for (var i = 0; i < clouds.length; i++) {
    clouds[i].move();
    clouds[i].display();
  }
}

function removeClouds(){
  var keepClouds = [];
  for (var i = 0; i < clouds.length; i++) {
      if (clouds[i].x + clouds[i].breadth > 0) {
        keepClouds.push(clouds[i]);
      }
  }
  clouds= keepClouds;
}

function addClouds(){
  var newCloud = .007;
  if (random(0,1)<newCloud) {
    clouds.push(makeClouds(width))
  }
}

function cloudMove(){
  this.x += this.speed;
}

function displayClouds(){
  fill(255,50);
  noStroke();
  ellipse(this.x,this.y,this.width,this.height);
  ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
  ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
  ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
  var cloud= {x: cloudy,
              y:random(100, height/2),
              speed: random(-.2,-.7),
              width: random(50,100), 
              height:random(20,0),
              breadth:50,
              move:cloudMove,
              display:displayClouds
            }
  return cloud;          
}

function makeHuman(){
  //Human 1
    push();
      translate(width/2+20,365);
      scale(.2,.2);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2+20,385);
      scale(.2,-.2);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 2
    push();
      translate(width/2,367);
      scale(.15,.15);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2,382);
      scale(.15,-.15);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 3 
    push();
      translate(width/2-20,370);
      scale(.1,.1);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2-20,379);
      scale(.1,-.1);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 
}

Whenever I go around exploring and taking pictures, I really like to find reflections produced by waters. Therefore, I decided to do a project where water can be used to make the colors more vibrant. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.