Project 11: Generative Landscape

//Alicia Kim
//Section B

var terrainHeight = [];
var noiseParam = 0;
var noiseStep = 0.1;
var offset=0;
var maxi=1;
var fish = [];
var loc1 = 600;
var loc2 = 400;
var loc3 = 100;
var loc4 = 230;
var starX=[];
var starY=[];
var r = 144;
var g = 209;
var b = 206;
var by = 240;
var sx =240;
var sy = 60;
var frameCount_=0;

function setup() {
    createCanvas(480, 240);
    background(144, 209, 206);
    frameRate(8);
    for (var i=0; i<=width/5; i++) {
        noiseParam += noiseStep; 
        var n = noise (noiseParam);
        var value = map (n, 0, 1, 0, height);
        terrainHeight.push(value);
        noiseParam += noiseStep
    }   
    for (var i=0;i<20;i++){
        starX.push(random(0,width));
        starY.push(random(0,height-100));
    }
}

function draw() {

    background(r, g, b);
    loc1-=5;
    loc2-=5;
    loc3-=5;
    loc4-=5;
    if (loc1<-100){
        loc1 = 600;
    }
    if (loc2<-100){
        loc2 = 600;
    }
    if (loc3<-100){
        loc3 = 600;
    }
    if (loc4<-100){
        loc4 = 600;
    }
    
    noStroke();
    drawSun();
    
    if (frameCount_>50 & frameCount_<103) {
        r-=20;
        g-=8;
        b-=2;
    }
    

    if (r<180 & g<180 && b<180) {
        stars();
    }
    if (r<=0 & g<=0 && b<=0) { //reset
        r=144; 
        g=209; 
        b=206;

        sy = 60;
        sx = 240;
        frameCount_=0;
    } else {
        r+=6;
        g-=0.1;
        b-=1;
    }
    drawCloud(loc1,loc2,loc3,loc4);
    drawMountain();
    drawLake();
    drawBoat();
   frameCount_+=1;
}

function drawSun(){
    fill (255, 150, 51); //yellow
    circle (sx,sy,40,40);
    sy+=1.5;
    sx+=3;
}

function drawLake(){  
    fill (60, 111, 166,220); //blue
    beginShape();
    vertex(0,height);
     for (var x = 0; x < width; x++) { 
        // wave
        var theta = offset+0.07*x;
        var y = map(sin(theta),-maxi,maxi,height-60,height-70);
        vertex(x,y);  
    }
    vertex(width, height);
    endShape();
    offset += 0.4;
}

function drawBoat(){
    fill(235, 100, 52); //orange
    strokeWeight(1);
    ellipse(width/2,by,300,60);
    fill(100);
    ellipse(width/2,by,80,30);
// make boat float
    if (by <= 210) { // when it gets higher than lake
        by += 4;
    } else {
        by -= 1;
    }
}

function drawCloud(loc){
    drawCloudHelper(1.3,loc1,-4);
    drawCloudHelper(1,loc2,25);
    drawCloudHelper(0.8,loc3,15);
    drawCloudHelper(1.6,loc4,0);
}

function drawCloudHelper(scale,loc,dy){
    fill(255);
    circle(loc,30+dy,30*scale);
    circle(loc-10,36+dy,25*scale);
    circle(loc-20,43+dy,20*scale);
    circle(loc-3,40+dy,25*scale);
    circle(loc+10,38+dy,25*scale);
    circle(loc+21,41+dy,14*scale);
}

function drawMountain(){
    terrainHeight.shift();
    var n = noise(noiseParam);
    var value = map (n, 0, 1, 0, height);
    terrainHeight.push(value);
    noiseParam += noiseStep

    for (var i = 0; i < width/5; i++) { 
        noStroke();
        fill (101, 138, 41); //green
        beginShape();
        vertex(i*5,terrainHeight[i]);
        vertex((i+1)*5, terrainHeight[i+1]);
        vertex ((i+1)*5, height-40);
        vertex(i*5, height-40);
        endShape();
    }
}

function stars (){
    for (var i=0;i<20;i++){
        drawStar(starX[i],starY[i],1,4,5);
    }
}

// adapted from p5js website (https://p5js.org/examples/form-star.html)
function drawStar(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}