Category: SectionD

var terrain = [];
var coral;
var bubbles = [];
var fish = [];

var noiseParam = 0;
var noiseStep = 0.05;

function preload() {
    coral = loadImage("https://i.imgur.com/S5HGpZa.png");
}

function setup() {
    createCanvas(480, 300);
    //setup noise for terrain
    for(var i=0; i<=width/5; i++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        terrain.push(value);
        noiseParam += noiseStep;
    }
    //setup for fish
    for (var i = 0; i < 15; i++) {
        fishx = random(width);
        fish[i] = makeFish(fishx);
    }
    //setup for bubbles
    for (var i = 0; i < 10; i++) {
        bubblex = random(width);
        bubbley = random(height);
        bubbles[i] = makeBubble(bubblex, bubbley);
    }
    frameRate(10);
}

function draw() {
    background(0, 180, 200);

    noStroke();
    fill(0, 230, 255, 90);
    ellipse(240, 0, 600, 200);

    blueTerrain();
    
    updateAndDisplayFish();
    removeFish();
    addNewFish();
    
    displayBubbles();
}

//background terrain
function blueTerrain() {
    terrain.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    terrain.push(value);
    noiseParam += noiseStep;
    
    //blue terrain
    noStroke();
    fill(0, 66, 115);
    beginShape();
    vertex(0, height);
    for(var i=0; i<width/4; i++) {
        vertex(i*5, terrain[i]);
        //placement of coral on terrain
        if(terrain[i] < terrain[i-1] & terrain[i] < terrain[i+1]) {
            drawCoral(i*5, terrain[i]);
        }
    }
    vertex(width, height);
    endShape(CLOSE);
}

//draws coral on terrain
function drawCoral(x, y) {
    imageMode(CENTER);
    image(coral, x, y-10, 65, 80);
}

//update the fish positions and display them
function updateAndDisplayFish() {
    for (var i = 0; i < fish.length; i++) {
        fish[i].move();
        fish[i].draw();
    }
}

//remove fish that are off the canvas from the array
function removeFish() {
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++) {
        if (fish[i].x + fish[i].w > 0) {
            fishToKeep.push(fish[i]);
        }
    }
    fish = fishToKeep;
}

//with a small probability, add a new fish to end of the array
function addNewFish() {
    var newFishLikelihood = 0.3;
    if (random(0,1) < newFishLikelihood) {
        fish.push(makeFish(width+20));
    }
}

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

function drawFish() {
    push();
    translate(this.x, this.y);
    fill(this.color);
    ellipse(0, 0, this.w, this.h);
    strokeWeight(1.5);
    stroke(240);
    fill(50);
    ellipse(-15, -4, 8, 8);
    noStroke();
    fill(this.fincolor);
    triangle(0, -4, 0, 4, 15, 0);
    noFill();
    push();
    fill(this.color);
    triangle(this.w/2+20, -8, this.w/2+20, 8, (this.w/2)-2, 0);
    pop();
    pop();
}

//fish constructor
function makeFish(fishx) {
    var f = {x: fishx, y: random(height),
            w: random(40, 80), h: random(10, 45),
            color: color(random(100, 255), random(100, 255), random(100, 255)),
            fincolor: color(random(50, 200), random(50, 200), random(50, 200)),
            speed: random(-10, -20),
            move: moveFish,
            draw: drawFish
    }
    return f;
}

function displayBubbles() {
    for (var i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].draw();
    }
}

//bubbles float upwards
function moveBubbles() {
    this.x += this.speed;
    this.y += this.speed;
    if (this.x <= 0) {
        this.x = width;
    }
    if (this.y <= 0) {
        this.y = height;
    }
}

function drawBubbles() {
    push();
    strokeWeight(1);
    stroke(255, 255, 255, 80);
    fill(100, 255, 255, 60);
    ellipse(this.x, this.y, this.size, this.size);
    noFill();
    strokeWeight(2);
    arc(this.x - this.size/12, this.y - this.size/12, 15, 15, PI, PI + HALF_PI);
    pop();
}

//bubbles constructor
function makeBubble(bubblex, bubbley) {
    var b = {x: bubblex, y: bubbley,
            size: random(20, 40),
            speed: random(-1, -6),
            move: moveBubbles,
            draw: drawBubbles
    }
    return b;
}

var clouds = [];
var bikeImage = [];
var bike = [];
var terrainCurve = 0.01;
var terrainSpeed = 0.001;


function preload(){
    var filenames =[];
    filenames[0] = "https://i.imgur.com/DSPjyoM.png";
    filenames[1] = "https://i.imgur.com/kGGBLDh.png";
    filenames[2] = "https://i.imgur.com/v9RMtPT.png";
    filenames[3] = "https://i.imgur.com/ZUC5xZ2.png";
    for(var i = 0; i < filenames.length; i++){
      bikeImage.push(loadImage(filenames[i]));
    }
}

function setup() {
    createCanvas(480,480); 
    //clouds 
    for (var i = 0; i < 9; i++){
        var ccloud = random(width);
        clouds[i] = drawCloud(ccloud);
    }
    frameRate(11);
    imageMode(CENTER);
    //bike
    var b = makeCharacter(240, 350);
    bike.push(b);
}

function draw() {
    sky(0, 0, width, height);
    DisplayClouds();
    removeClouds();
    newClouds();
    ground();
    for (var i = 0; i < bike.length; i++) { 
        var bb = bike[i];
        bb.stepFunction();
        bb.drawFunction();
    }
}

function sky(x, y, w, h) { 
    //sky
    var Blue;
    var Pink;    
    Blue = color(114, 193,215);
    Pink = color(253, 209, 164);
    for (var i = y; i <= y + h; i++) {
        var ssky = map(i, y, y + h, 0, 1.1);
        var cco = lerpColor(Blue, Pink, ssky);
        stroke(cco);
        line(x, i, x + w, i);
    }
    //mountains
    beginShape();
    stroke(1, 33,92);
    strokeWeight(200);
    for (var x = 0; x < width; x++){
        var tt = (x * terrainCurve) + (millis() * terrainSpeed);
        var mm = map(noise(tt), 0,1, 110, 255);
        vertex(x, mm + 180); 
    }
    endShape();
}

this.display = function() {
    strokeWeight(this.border);
    stroke(240);
    fill(240);
    ellipse(this.x, this.y,  this.display,  this.display);
}

function ground(){
    beginShape(); 
    noStroke();
    fill(18,12,46);
    rect(0,400,width,80);
    endShape();
}

function cloudDisplay(){
    noStroke(); 
    var floorH = 21;
    var cloudH = this.nFloors * floorH; 
    fill(250,50); 
    push();
    translate(this.x, height - 95);
    ellipse(95, -cloudH, this.breadth, cloudH / 2);
    pop();
    push();
    fill(250,80)
    translate(this.x, height - 220);
    ellipse(95, - cloudH, this.breadth/1.5, cloudH);
    pop();
}

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

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

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

function newClouds(){ 
//random probability
    var newP = 0.01; 
    if (random(0,0.4) < newP) {
        clouds.push(drawCloud(width));
    }
}
    


function drawCloud(xx) {
    var cha = {x: xx,
                breadth: random(95, height),
                speed: -random(1,4),
                nFloors: round(random(4,8)),
                move: cloudMove,
                display: cloudDisplay}
    return cha;
}

function makeCharacter(cx, cy) {
    ccha = {x: cx, y: cy,
         imageNumber: 0,
         stepFunction: characterStep,
         drawFunction: characterDraw
        }
    return ccha;
}
function characterStep() {
    this.imageNumber++;
    if (this.imageNumber == 4) {
        this.imageNumber = 0;
    }
}
function characterDraw() {
    image(bikeImage[this.imageNumber], this.x, this.y,120,120);
}

var x = 0;
var backgroundValue = [];
var noiseParam = 0;
var noiseStep = 0.1;


function setup() {
    createCanvas(480, 400);
    frameRate(15);
    var ilength = (width/5) + 1
    for (i = 0; i < ilength; i++) {
    	var n = noise(noiseParam);
    	var value = map(n, 0, 1, 0, height);
    	backgroundValue.push(value);
    	noiseParam += noiseStep
    } 
}

function draw() {
	var size = random(50, 150);
	background(166, 238, 255);
	stroke(160, 160, 255);
	strokeWeight(10);
	backgroundValue.shift();
	var x2 = 0;
	var ilength = (width/5) + 1
	var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    backgroundValue.push(value);
    noiseParam += noiseStep
    for (i = 0; i < ilength; i++) {
		beginShape();
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, height);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		endShape(CLOSE);
		x2 += 5
	}
	noStroke();
	fill(color(random(255), random(255), random(255)));
    coral(x, size);
    x += 1
    if (x > 480) {
        x = 0;
    }
}

function coral(x, size) {
    beginShape();
    curveVertex(x, 400);
    curveVertex(x, 400);
    curveVertex(x + 5, size*3);
    curveVertex(x - 20, size*2);
    curveVertex(x + 5, size*2 - 5);
    curveVertex(x - 10, size);
    curveVertex(x, size + 5);
    curveVertex(x + 10, size*2 - 20);
    curveVertex(x + 20, size*3);
    curveVertex(x + 20, size*4);
    curveVertex(x + 70, size);
    curveVertex(x + 80, size*2);
    curveVertex(x + 50, 400);
    curveVertex(x + 50, 400);
    endShape(CLOSE);
}

var buildings = [];
var mountains = [];
var noiseParam = 0;
var noiseStep = 0.03;
let snowflakes = [];


function setup() {
    createCanvas(400, 240); 
    
    for(var i = 0; i < width/5; i++){
        var n = noise(noiseParam);
        mountains[i];
        var value = map(n, 0, 1, 0, height);
        mountains.push(value);
        noiseParam += noiseStep;
    }
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(25);
}


function draw() {
    background(23, 39, 174); 
    noStroke();
    fill(187, 223, 250);
    ellipse(200, 70, 70);
    fill(255, 30);
    cloud(40, 47, 1);
    cloud(275, 15, 0.8);
    cloud(380, 70, 1.5);

    let t = frameCount / 20; // update time

     // create a random number of snowflakes each frame
  for (let i = 0; i < random(5); i++) {
    snowflakes.push(new snowflake()); // append snowflake object
  }

  // loop through snowflakes with a for..of loop
  for (let flake of snowflakes) {
    flake.update(t); // update snowflake position
    flake.display(); // draw snowflake
  }
}

// snowflake class
function snowflake() {
  // initialize coordinates
  this.posX = 0;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * PI);
  this.size = random(2, 5);

  // radius of snowflake spiral
  // chosen so the snowflakes are uniformly spread out in area
  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    // x position follows a circle
    let w = 0.6; // angular speed
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    this.posY += pow(this.size, 0.5);

    // delete snowflake if past end of screen
    if (this.posY > height) {
      let index = snowflakes.indexOf(this);
      snowflakes.splice(index, 1);
    }
  };

  this.display = function() {
    ellipse(this.posX, this.posY, this.size);
  };

    //for animating the mountains
    mountains.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    mountains.push(value);
    noiseParam += noiseStep;

    //for mountains
    beginShape();

    for(var i = 0; i < width/5; i++){
        //filling the mountain with color
        fill(44, 67, 184);
        noStroke();
        //vertex funciton to fill the mountain
        vertex((i * 5), mountains[i]); 
        vertex((i + 1) * 5, mountains[i + 1]);   
        vertex(width/2, 10000000); 
    }
    endShape(CLOSE);
   
    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
}


function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(105, 135, 213); 
    noStroke(); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(151, 186, 236);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 3);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    fill(68, 91, 193);
    rect(0, height-50, width, height-50); 

}

function cloud(x, y, size) {
    fill(68, 91, 193);
    noStroke();
    arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);
    arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);
    arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);
    arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);
}