// your default Downloads folder. These can then be made into an animated gif. 

// This code is known to work with p5.js version 0.6.0

​

// INSTRUCTIONS FOR EXPORTING FRAMES (from which to make a GIF): 

// 1. Run a local server, using instructions from here:

//    https://github.com/processing/p5.js/wiki/Local-server

// 2. Set the bEnableExport variable to true.

// 3. Set the myNickname variable to your name.

// 4. Run the program from Chrome, press 'f'. 

//    Look in your 'Downloads' folder for the generated frames.

// 5. Note: Retina screens may export frames at twice the resolution.

​

//===================================================

// User-modifiable global variables. 

var myNickname = "nickname";

var nFramesInLoop = 120;

var bEnableExport = false;

​

// Other global variables you don't need to touch.

var nElapsedFrames;

var bRecording;

var theCanvas;

​

//for seaweed

let res;

let x, y;

let bnc, spd;

​

​

//for fish

var Fishr = 30;

var Fishr1 = 7;

var Fishr2 = 3;

var Fishx3 = 0;

var Fishy3 = 0;

​

var Fishx2, Fishy2;

​

var Fishd = 1;

​

// var toRight = true;

var Fishstate = true;

var Fishspeed = 1;

​

​

//===================================================

function setup() {

  theCanvas = createCanvas(1280, 720);

  bRecording = false;

  nElapsedFrames = 0;

  res = 20;

  spd = 10;

  Seaweedx = width / res;

  Seaweedy = height / res;

  bnc = 0;

  Fishx2=width/2;

  Fishy2=height/2;

}

​

​

​

//===================================================

function keyTyped() {

  if (bEnableExport) {

    if ((key === 'f') || (key === 'F')) {

      bRecording = true;

      frameRate(2); // while we're exporting

      nElapsedFrames = 0;

    }

  }

}

​

//===================================================

function draw() {

​

  // Compute a percentage (0...1) representing where we are in the loop.

  var percentCompleteFraction = 0;

  if (bRecording) {

    percentCompleteFraction = float(nElapsedFrames) / float(nFramesInLoop);

  } else {

    percentCompleteFraction = float(frameCount % nFramesInLoop) / float(nFramesInLoop);

  }

​

  // Render the design, based on that percentage. 

  // This function renderMyDesign() is the one for you to change. 

  renderMyDesign(percentCompleteFraction);

​

  // If we're recording the output, save the frame to a file. 

  // Note that the output images may be 2x large if you have a Retina mac. 

  // You can compile these frames into an animated GIF using a tool like: 

  if (bRecording && bEnableExport) {

    var frameOutputFilename = myNickname + "_frame_" + nf(nElapsedFrames, 4) + ".png";

    print("Saving output image: " + frameOutputFilename);

    saveCanvas(theCanvas, frameOutputFilename, 'png');

    nElapsedFrames++;

​

    if (nElapsedFrames >= nFramesInLoop) {

      bRecording = false;

      frameRate(60);

    }

  }

}

​

//===================================================

function renderMyDesign(percent) {

  background('#0a414b');

  angleMode(RADIANS);

  ellipseMode(CENTER);

  fill('#0b4b52');

  rect(0, 500, width, 40);

  fill('#0c555a');

  rect(0, 540, width, 60);

  fill('#0d5d60');

  rect(0, 600, width, 10);

  fill('#0f7471');

  rect(0, 610, width, 25);

  fill('#107b77');

  rect(0, 635, width, 40);

  fill('#118a82');

  rect(0, 675, width, 50);

  //leftmost

  noStroke();

  push();

  translate(-800, -200);

  for (let i = width * 0.015; i < Seaweedx - width * 0.015; i++) {

    for (let j = 0; j < Seaweedy - height * 0.025; j++) {

      fill(color(147, 212, 155, 70));

      rect(i * res + spd * (sin((i / Seaweedx) * TWO_PI * 3)), 

           j * res + spd * (cos((j / Seaweedy) * TWO_PI * 3 + (bnc % TWO_PI))) + 380, j, 7 + (0.015 * i));

      bnc += 0.00005;

    }

  }

  pop();

  fill('#416262');

  ellipse(60, 523, 130, 80);

  ellipse(100, 550, 100, 60);

  fill('#102424');

  ellipse(15, 570, 110, 60);

  fill('#1d3434');

  ellipse(50, 530, 130, 80);

  ellipse(90, 550, 100, 60);

  ellipse(25, 560, 110, 60);

  //rightmost

  noStroke();

  push();

  translate(750, -90);

  for (let i = width * 0.015; i < Seaweedx - width * 0.015; i++) {

    for (let j = 0; j < Seaweedy - height * 0.025; j++) {

      fill(color(147, 212, 155, 93));

      rect(i * res + spd * (sin((i / Seaweedx) * TWO_PI * 3)), 

           j * res + spd * (cos((j / Seaweedy) * TWO_PI * 3 + (bnc % TWO_PI))) + 380, j, 7 + (0.015 * i));

      bnc += 0.00005;

    }

  }

  pop();

  //centerback

  noStroke();

  push();

  translate(-200, -230);

  for (let i = width * 0.015; i < Seaweedx - width * 0.015; i++) {

    for (let j = 0; j < Seaweedy - height * 0.025; j++) {

      fill(color(147, 212, 155, 22));

      rect(i * res + spd * (sin((i / Seaweedx) * TWO_PI * 3)), 

           j * res + spd * (cos((j / Seaweedy) * TWO_PI * 3 + (bnc % TWO_PI))) + 380, j, 7 + (0.015 * i));

      bnc += 0.00005;

    }

  }

  pop();

  //center

  noStroke();

  push();

  translate(0, 0);

  for (let i = width * 0.015; i < Seaweedx - width * 0.015; i++) {

    for (let j = 0; j < Seaweedy - height * 0.025; j++) {

      fill('#93d49b');

      rect(i * res + spd * (sin((i / Seaweedx) * TWO_PI * 3)), 

           j * res + spd * (cos((j / Seaweedy) * TWO_PI * 3 + (bnc % TWO_PI))) + 380, j, 7 + (0.015 * i));

      bnc += 0.00005;

    }

  }

  pop();

​

  fill('#416262');

  ellipse(640, 718, 180, 100);

  fill('#1d3434');

  ellipse(560, 720, 180, 80);

  ellipse(500, 725, 90, 70);

  ellipse(630, 725, 190, 100);

  fill('#102424');

  ellipse(1034, 565, 70, 40);

  ellipse(965, 564, 60, 30);

  ellipse(1000, 554, 100, 40);

  fill(color(29, 52, 52, 230));

  ellipse(1000, 550, 100, 40);

  ellipse(1040, 560, 70, 40);

  ellipse(970, 560, 60, 30);

  fill('#416262');

  ellipse(1190, 640, 110, 70);

  fill('#102424');

  ellipse(1146, 680, 100, 60);

  fill('#1d3434');

  ellipse(1150, 670, 100, 60);

  ellipse(1180, 650, 110, 70);

  var squareSize = 20;

  var leftX = 0 - squareSize - 50;

  var rightX = width + 50;

  var eased = doubleExponentialSigmoid(percent, 0.45);

  eased = (eased) % 10.0; // shifted by a half-loop, for fun

  var xPosition2 = map(eased, 0, 1, leftX, rightX);

  drawFish(xPosition2, 230, Fishd);

}

​

​

function drawFish(x1, y1, dir) {

  ellipseMode(RADIUS);

  angleMode(DEGREES);

  strokeWeight(0); 

   //tail

  fill(226,52,60);

  arc(dir*(x1-30),y1,random(Fishr-7,Fishr-10),Fishr-10,random(dir*90+45,dir*90+50),random(dir*90+130,dir*90+135));

  //body

  fill('#95B8D1');

  ellipse(x1,y1,Fishr+5,Fishr-3);

  //mouth

  strokeWeight(2);

  stroke(0);

  curve(dir*(x1+40),y1-20,dir*(x1+30),y1+12,dir*(x1+20),y1+10,dir*(x1+25),y1);

  //dots

  fill(226,52,60);

  strokeWeight(0);

  ellipse(dir*(x1+10),y1,Fishr1,Fishr1);

  //eyes

  strokeWeight(0);

  fill(255);

  ellipse(dir*(x1+20),y1-5,Fishr1,Fishr1);

    //eyeball

  fill(0);

  ellipse(dir*(x1+22),y1-5,Fishr2,Fishr2);

}

​

//===================================================

function doubleExponentialSigmoid(_x, _a) {

  if (!_a) _a = 0.75; // default

​

  var min_param_a = 0.0 + Number.EPSILON;

  var max_param_a = 1.0 - Number.EPSILON;

  _a = constrain(_a, min_param_a, max_param_a);

  _a = 1 - _a;

​

  var _y = 0;

  if (_x <= 0.5) {

    _y = (pow(2.0 * _x, 1.0 / _a)) / 2.0;

  } else {

    _y = 1.0 - (pow(2.0 * (1.0 - _x), 1.0 / _a)) / 2.0;

  }

  return (_y);

}