claudia_Water

var c, r; //columns and rows for the 3d vertex;

var s = 0; // speed for submarine 1;

var s1 = 0; // speed for submarine 2; 

var jx = 0; // speed for jellyfish moving right;

var jy = 0; // speed for jellyfish moving up;

var f = 0; // speed for mount 1;

var f1 = 0; // speed for mount 2;

var scl = 25; //how dense the triangle strips are

var w = 1800; //width

var h = 800; // height

var speed = 0 ; //speed the waves are moving

var noiseScale=0.01; // noise for making mountains

var water = []; //water array

var fish = []; //array containing all the fishes

var bub = []; //array containing all the bubbles

​

function setup() {

  createCanvas(1400, 700, WEBGL);

  c = w / scl;

  r = h / scl;

  //create matrix for water vertex

  for (var x = 0; x < c; x++) {

    water[x] = [];

    for (var y = 0; y < r; y++) {

      water[x][y] = []; 

    }

  }

  //create fishes

  for(var i=0; i<500; i++){

    fish[i] = new Fish();

  }

  //create bubbles

  for(var i=0; i<100; i++){

    bub[i] = new Bubbles();

  }

}

function draw() {

  background(200,200,200+Math.abs(30-second())*2);

  //mount(); //draw mountains

  submarine(); //draw the2 submarines

  callFish(); //display and move fish

  callBubbles(); //displat and move bubble

  moveJelly(); //display and move jellyfish  

  waves(); //display wave

  moveObj(); //move submarines and mountains

}

​

//shift all the objects created

function moveObj (){

  speed -= 0.03;

  s-=10;

  s1-=30;

  if(s<-windowWidth-1000){

    s=windowWidth;

  }

  if(s1<-windowWidth-1000){

    s1=windowWidth;

  }

  jx+=random(5,9);

  jy-=random(5,9);

}

​

//move Jelly fish

function moveJelly(){

  push();

  translate(jx,jy);

  jellyfish(-950,-400);

  jellyfish(-750,-500);

  jellyfish(-350,-300);

  jellyfish(-150,-200);

  pop();

}

​

//call the functions in the Fish class

function callFish(){

    for(var i=0; i<500; i++){

    push();

    //rotate every other fish so it lookslike they are swimming up and down

    if(i%2==0){

      if(second()%2==0){

        rotate(PI/15);

      }

      else{

        rotate(-PI/17);

      }

    } 

    fish[i].show();

    fish[i].move();

    pop();

  }

}

​

//the functions in the Bubbles class

function callBubbles(){

    for(var i=0; i<100; i++){

      bub[i].show();

      bub[i].move();

  }

}

​

//map the noise and create waves by changing the vertex

function waves(){

  //water noise

  push();

  var yoff = speed;

  for (var y = 0; y < r; y++) {

    var xoff = 0;

    for (var x = 0; x < c; x++) {

      water[x][y] = map(noise(xoff, yoff), 0, 1, -120, 120);

      xoff += 0.2;

    }

    yoff += 0.2;

  }

  //water

  push();

  translate(0, -100);

  rotateX(PI/7);

  noStroke();

  fill(0,Math.abs(30-second())*4,130,100);

  translate(-w/2, -h/2);

  for (var y = 0; y < r-1; y++) {

    beginShape(TRIANGLE_STRIP);

    for (var x = 0; x < c; x++) {

      vertex(x*scl, y*scl, water[x][y-1]);

      vertex(x*scl, (y+1)*scl, water[x][y+1]);

    }

    endShape();

  }

  pop();

}

​

function jellyfish(posX, posY){

  push();

  translate(posX,posY);

  frameRate(5);

  stroke(255,200);

  strokeWeight(3);

  line(500,400,500-10,400+40);

  line(500,400,500-5,400+50);

  line(500,400,500+10,400+50);

  line(500,400,500+5,400+60);

  noStroke();

  fill(255);

  ellipse(500, 400,50,25);

  fill(200,200,200+Math.abs(30-second())*2);

  ellipse(500, 400+9,40,7);

  strokeWeight(3);

  stroke(255);

  noFill();

  push();

  translate(185,200);

  scale(0.5);

  beginShape();

  curveVertex(523,433);

  curveVertex(652,415);

  curveVertex(674,545);

  curveVertex(random(600,700),random(590,620));

  curveVertex(random(600,700),727);

  endShape();

  pop();

  push();

  translate(185,200);

  scale(0.5);

  beginShape();

  curveVertex(523,433);

  curveVertex(652,415);

  curveVertex(674,545);

  curveVertex(random(500,700),random(590,620));

  curveVertex(random(500,700),random(700,740));

  endShape();

  pop();

  push();

  translate(160,200);

  scale(0.5);

  beginShape();

  curveVertex(523,433);

  curveVertex(652,415);

  curveVertex(674,545);

  curveVertex(random(550,700),random(590,620));

  curveVertex(random(550,700),random(700,740));

  endShape();

  pop();

  push();

  translate(160,200);

  scale(0.5);

  beginShape();

  curveVertex(750,433);

  curveVertex(652,415);

  curveVertex(674,545);

  curveVertex(random(600,700),random(590,620));

  curveVertex(random(600,700),random(700,740));

  endShape();

  pop();

  push();

  translate(170,200);

  scale(0.5);

  beginShape();

  curveVertex(750,433);

  curveVertex(652,415);

  curveVertex(674,545);

  curveVertex(random(600,700),random(590,620));

  curveVertex(random(600,700),random(700,740));

  endShape();

  pop();

  pop();

}

​

​

//draw the submarines

function submarine(){

  push();

  translate(s,-300);

  scale(0.4);

  noStroke();

  fill(200,100,0);

  translate(1000,0);

  push();

  scale(0.8);

  beginShape();

  vertex(230,320);

  vertex(150,310);

  vertex(150,440);

  vertex(230,410);

  endShape();

  pop();

  ellipse(300, 300, 270, 130);

  rect(260,220,100,50);

  fill(150);

  ellipse(360, 290, 20, 20);

  ellipse(320, 290, 20, 20);

  ellipse(280, 290, 20, 20);

  pop();

  push();

  translate(s1,-300);

  scale(0.8);

  noStroke();

  fill(250,150,0);

  translate(1000,0);

  push();

  scale(0.8);

  beginShape();

  vertex(230,320);

  vertex(150,310);

  vertex(150,440);

  vertex(230,410);

  endShape();

  pop();

  ellipse(300, 300, 270, 130);

  rect(260,220,100,50);

  fill(100);

  ellipse(360, 290, 20, 20);

  ellipse(320, 290, 20, 20);

  ellipse(280, 290, 20, 20);

  pop();  

}

​

//use noise to generate mountains 

function mount (){

  //mountain1

  push();

  scale(1.7);

  translate(-900,-50);

  for (var n=0; n < 2500; n++) {

    var noiseVal = noise((400+n)*noiseScale, 180*noiseScale);

    stroke(143,188,143);

    var position1 = n-f1;

    line(position1, 100+noiseVal*80, position1, height);

  }

  f1+=1;

  pop();

  //mountain2

  push();

  scale(1.7);

  strokeWeight(10);

  translate(-900,-10);

  for (var x=0; x < 2500; x++) {

    var noiseVal = noise((500+x)*noiseScale, 100*noiseScale);

    stroke(85,107,47);

    var position = x-f;

    line(position, 100+noiseVal*80, position, height);

  }

  f+=4;

  if ((position)<0) {position=200;}

  pop();

}

​

//bubble class with show and move function, contains instructions for creating bubbles

function Bubbles(){

  var posBub = createVector(random(-1000,600),random(0,2400));

  this.show = function() {

    noStroke();

    fill(123,104,random(200,250),230);

    ellipse(posBub.x, posBub.y, 20, random(15,25));

    fill(255,230);

    rect(posBub.x+5, posBub.y-4,2,5);

    ellipse(posBub.x+5, posBub.y+5, 4, 4);

  }

  this.move = function(){

    //posBub.x+=10;

    posBub.y-=10;

  }

}

​

//fish class with show and move function, contains instructions for creating fishes

function Fish(){

  var pos = createVector(random(-600,600),random(-20000,24000));

  this.show = function() {

    noStroke();

    push();

    scale(0.4);

    translate(0,0);

    rotate(PI/2);

    fill(random(100,255),random(100,150),0);

    ellipse(pos.x, pos.y-10, 50, 120);

    triangle(pos.x+10, pos.y+10, pos.x-60, pos.y+65, pos.x+40, pos.y+80);

    fill(255);

    ellipse(pos.x,pos.y-30,20,20);

    fill(0);

    ellipse(pos.x,pos.y-30,10,10);

    pop();

​

  }

  //move the fishes across the screen

  this.move = function(){ 

    pos.y-=13;

    if(second()%2==0){

      pos.x+=3;

    }

    else{

      pos.x-=3;

    }

  }

}