sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project 11 


// establishing variables for movement of environment 
var oceanFloor = 0.002;
var oceanFloorSpeed = 0.0001;

var surface = 0.0008;
var surfaceSpeed = 0.0006;

var seaweed = 1;
var seaweedSpeed = 0.0005;

var coral = 0.06;
var coralSpeed = 0.0003;

var fish = [];
var fishNum = 20;


function setup() {
    createCanvas(480, 480);
    background(220);
    for (i=0; i<fishNum; i++) {
        f = makeFish(width+random(10, 100));
        fish.push(f);
    }

}

function draw() {
	background('#A5F9F5');
	drawNoise();
    drawFishy();
    updateFish();

}
// remove old fish and add new fish 
function updateFish() {
    keepFish = [];
    for (i=0; i<fishNum; i++) {
        f = fish[i];
        if (f.x > 0-f.bodyW) {
            keepFish.push(f);
        }
        else {
            keepFish.push(makeFish(width+50));
        }
    }
    fish = keepFish;
}

// draw the fish
function drawFishy() {
    for (i=0; i<fishNum; i++) {
        fish[i].move();
        fish[i].display();
    }
}
// drawing environment 
function drawNoise() {


	// Surface
	beginShape(); 
    fill('#516FCE');
    noStroke();
    vertex(0, height);

    
    for (var x = 0; x < width; x++) {
        var t = (x * surface) + (millis() * surfaceSpeed);
        var y = map(noise(t * 0.5), 0, 1, 0, 100);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

    // coral
    beginShape(); 
    fill('#425689');
    noStroke();
    vertex(0, height);

    for (var x = 0; x < width; x++) {
        var t = (x * coral) + (millis() * coralSpeed);
        var y = map(noise(t * 0.5), 0, 1, 250, 300);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

    // Seaweed
	beginShape(); 
    fill('#3E7C6A');
    noStroke();
    vertex(0, height);

    for (var x = 0; x < width; x++) {
        var t = (x * seaweed) + (millis() * seaweedSpeed);
        var y = map(noise(t * 0.5), 0, 1, 250, 480);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

    
    // ocean floor
	beginShape(); 
    fill('#E5D9A8');
    noStroke();
    vertex(0, height);
    
    for (var x = 0; x < width; x++) {
        var t = (x * oceanFloor) + (millis() * oceanFloorSpeed);
        var y = map(noise(t * 0.5), 0, 1, 350, 480);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

}
// creating an object for the fish 
function makeFish(fishlx) {
    var fsh = {x: fishlx, 
               y: random(height-350, height-50),
               bodyW: random(30, 50),
               bodyH: random(15, 40),
               speed: random(-2, -0.5),
               tail: random(15, 20),
               fColor: [random(0,255), random(0,255), random(0,255)],
               move: fishMove,
               display: fishDisplay
           }
        return fsh;
}

// displaying the fish
function fishDisplay() {
    fill(this.fColor);
    noStroke();
    tx = this.x + this.bodyW/3;
    // drawing fish tail
    triangle(tx, this.y, tx+this.tail, this.y+this.tail/2, 
        tx+this.tail, this.y-this.tail/2);
    // drawing fish body
    ellipse(this.x, this.y, this.bodyW, this.bodyH);
    // drawing fish eye
    fill(0);
    ellipse(this.x-this.bodyW/4, this.y-this.bodyH/4, 4, 4);
}

// moving the fish across canvas 
function fishMove() {
    this.x += this.speed;
}

This project was super fun to make. The idea I started out with was wanting to create an underwater scene with fish and seaweed. Using noise, I was able to create the forms for the waterline, the ocean floor, seaweed and a coral/sea mountain background. After playing with the amount of noise and speed, I was able to create really cool movements with both the water and the seaweed. The surface looks like it undulates in waves like the ocean and the seaweed has a fun flowing motion. I then created the fish and randomized their size and color to create some fun forms. Im really happy with how it came together.