Whale - AB

let numLayers = 40; // Number of layers drawing subsequent ellipses

let layers = [];

let bodySize = 50; // Base size for ellipses

let movementSpeed = 1; // Speed of movement based on the mouse

let prevX = 0, prevY = 0; // Previous positions for smoothing

let mouseXSmoothed = 0, mouseYSmoothed = 0; // Smoothed mouse positions

let radiusSmoothed = 0, offsetYSmoothed = 0, offsetXSmoothed = 0, tailRadiusSmoothed = 0, layerFactorSmoothed = 0;

let rotationA, rotationB, eyeDrawn;

let buffer; // Graphics buffer for off-screen rendering

​

function setup() {

  createCanvas(windowWidth, windowHeight); 

  colorMode(HSB, 360, 255, 255);

  // Create the off-screen graphics buffer

  buffer = createGraphics(windowWidth, windowHeight);

  // Initialize each layer (ellipse) of the whale

  for (let i = numLayers - 1; i >= 0; i--) {

    layers[i] = new Layer(i);

  }

  // Start the mouse position in the center of the screen

  mouseX = width / 2;

  mouseY = height / 2;

}

​

function draw() {

  // Draw the deep blue gradient background

  drawGradient();

​

  // Clear the off-screen buffer before drawing the whale

  buffer.clear();

​

  // Update smoothed mouse positions

  mouseXSmoothed = mouseX;

  mouseYSmoothed = mouseY;

  eyeDrawn = 0; // Reset eye drawing flag

  // Update and draw each layer on the buffer

  for (let i = numLayers - 1; i >= 0; i--) {

    layers[i].updateLayer();

  }

  for (let i = 0; i < numLayers; i++) {

    layers[i].drawLayer(buffer);

  }

​

  // Draw the buffer onto the canvas

  image(buffer, 0, 0);

}

​

function drawGradient() {

  // Define two deep blue colors for the background in HSB mode

  let topColor = color(230, 255, 20);    // Very dark deep blue

  let bottomColor = color(230, 255, 60);   // Slightly lighter deep blue

​

  // Draw a vertical gradient by drawing a line for each pixel row

  for (let y = 0; y < height; y++) {

    let inter = map(y, 0, height, 0, 1);

    let c = lerpColor(topColor, bottomColor, inter);

    stroke(c);

    line(0, y, width, y);

  }

}

​

class Layer {

  constructor(layerIndex) {

    this.layerFactor = 1 - layerIndex / numLayers; // Scaling factor for this layer

    this.bodyRadius = (30 * pow(this.layerFactor, 3) - 58.5 * sq(this.layerFactor) + 28 * this.layerFactor + 0.92) * bodySize / 2; // Calculate the radius of the body

    this.offsetY = (10 * pow(this.layerFactor, 3) - 10 * sq(this.layerFactor)) * bodySize; // Vertical offset for positioning

    // Set whale's color to a deep blue (hue = 230) with different saturation/brightness for back and belly.

    const whaleHue = 230;

    this.backColor = color(whaleHue, 180, 220 - 30 * this.layerFactor);    

    this.bellyColor = color(whaleHue, 100, 250 - 30 * this.layerFactor); // Lighter deep blue for the belly

​

    this.isHead = (layerIndex == numLayers - 1); // Mark if this is the first layer (head)

​

    if (this.layerFactor > 0.775) { // Tail area

      this.offsetX = (22 * sq(this.layerFactor) - 30 * this.layerFactor + 10) * bodySize; // Horizontal offset for the tail

      if (layerIndex == 0) { // If it's the last layer (tail)

        this.tailRadius = 0;

        this.bodyRadius = 0;

      } else {

        this.tailRadius = (-86.7 * sq(this.layerFactor) + 153.2 * this.layerFactor - 66) * bodySize / 2; // Tail radius

      }

    }

​

    // Set the smoothed variables

    this.bodyRadiusSmoothed = radiusSmoothed;

    this.offsetYSmoothed = offsetYSmoothed;

    this.offsetXSmoothed = offsetXSmoothed;

    this.tailRadiusSmoothed = tailRadiusSmoothed;

    this.layerFactorSmoothed = layerFactorSmoothed;

    // Update smoothed values for the next layer

    radiusSmoothed = this.bodyRadius;

    offsetYSmoothed = this.offsetY;

    offsetXSmoothed = this.offsetX;

    tailRadiusSmoothed = this.tailRadius;

    layerFactorSmoothed = this.layerFactor;

  }

  updateLayer() {

    // Update previous positions for smoothing

    this.prevX = prevX;

    this.prevY = prevY;

    // Move the body based on the smoothed mouse position

    prevX = this.currentX || 0;

    prevY = this.currentY || 0;

​

    if (this.isHead) { // If this is the head, follow the mouse

      this.currentX = (movementSpeed / numLayers * mouseXSmoothed + this.currentX || 0) / (movementSpeed / numLayers + 1);

      this.currentY = (movementSpeed / numLayers * mouseYSmoothed + this.currentY || 0) / (movementSpeed / numLayers + 1);

    } else { // For other layers, follow the previous layer

      this.currentX = this.prevX;

      this.currentY = this.prevY;

    }

​

    // Update smoothed mouse position for the next layer

    this.prevMouseX = mouseXSmoothed;

    this.prevMouseY = mouseYSmoothed;

    mouseXSmoothed = this.currentX;

    mouseYSmoothed = this.currentY;

  }

  drawLayer(buffer) {

    // Draw on the graphics buffer instead of the canvas

    if (this.layerFactor <= 0.775) {

      // Draw the back part of the whale

      buffer.fill(this.backColor);

      buffer.noStroke();

      buffer.ellipse(this.currentX || 0, this.currentY - this.offsetY || 0, this.bodyRadius * 2 || 0, this.bodyRadius * 2 || 0);

      // Draw the belly part of the whale

      buffer.fill(this.bellyColor);

      buffer.beginShape();

      for (let i = PI / 6; i <= 5 * PI / 6; i += PI / 15) {

        buffer.vertex(this.currentX + cos(i) * this.bodyRadius, this.currentY - this.offsetY + sin(i) * this.bodyRadius);

      }

      buffer.vertex(this.currentX, this.currentY - this.offsetY + this.bodyRadius / 3);

      buffer.endShape(CLOSE);

​

      // Draw the fins if in a certain range

      if (this.layerFactor > 0.3 && this.layerFactor <= 0.4) {

        buffer.push();

        buffer.rotate(PI / 4); // Rotate for fin positioning

        rotationA = this.currentX - this.bodyRadius;

        rotationB = this.currentY + this.bodyRadius * 0.6;

        buffer.ellipse(sqrt(sq(rotationA) + sq(rotationB)) * sin(PI / 4 + atan(rotationA / rotationB)), 

                sqrt(sq(rotationA) + sq(rotationB)) * cos(PI / 4 + atan(rotationA / rotationB)), 

                bodySize * (this.layerFactor - 0.3) * 15, bodySize * (this.layerFactor - 0.3) * 40); // Left fin

​

        rotationA = this.currentX + this.bodyRadius;

        buffer.ellipse(sqrt(sq(rotationA) + sq(rotationB)) * sin(PI / 4 + atan(rotationA / rotationB)), 

                sqrt(sq(rotationA) + sq(rotationB)) * cos(PI / 4 + atan(rotationA / rotationB)), 

                bodySize * (this.layerFactor - 0.3) * 40, bodySize * (this.layerFactor - 0.3) * 15); // Right fin

        buffer.pop();

      }

​

      // Draw the eyes on the head (smallest layer)

      if (this.layerFactor < 0.2) {

        buffer.stroke(150);

        buffer.strokeWeight(3);

        buffer.strokeWeight(0);

        if (eyeDrawn == 0) {

          for (let i = 1; i >= -1; i -= 2) {

            buffer.fill(0);

            buffer.stroke(0);

            buffer.ellipse(this.currentX + i * this.bodyRadius * 0.9, this.currentY - this.bodyRadius * 0.15, bodySize / 3, bodySize / 3);

            buffer.fill(250);

            buffer.stroke(250);

            buffer.ellipse(this.currentX + i * this.bodyRadius * 0.93, this.currentY - this.bodyRadius * 0.18, bodySize / 10, bodySize / 10);

          }

          eyeDrawn = 1;

        }

      }

    } else {

      // Tail drawing logic

      for (let i = 1; i >= -1; i -= 2) {

        buffer.beginShape();

        buffer.vertex(this.currentX + i * this.offsetX, this.currentY - this.offsetY + this.bodyRadius); 

        buffer.vertex(this.prevMouseX + i * this.offsetXSmoothed, this.prevMouseY - this.offsetYSmoothed + this.bodyRadiusSmoothed);

        buffer.vertex(this.prevMouseX + i * this.offsetXSmoothed, this.prevMouseY - this.offsetYSmoothed - this.bodyRadiusSmoothed);

        buffer.vertex(this.currentX + i * this.offsetX, this.currentY - this.offsetY - this.bodyRadius);

        buffer.endShape(CLOSE);

​

        buffer.beginShape();

        buffer.vertex(this.currentX + i * this.offsetX, this.currentY - this.offsetY + this.bodyRadius); 

        buffer.vertex(this.currentX + i * this.offsetX - this.tailRadius, this.currentY - this.offsetY); 

        buffer.vertex(this.currentX + i * this.offsetX, this.currentY - this.offsetY - this.bodyRadius);

        buffer.vertex(this.currentX + i * this.offsetX + this.tailRadius, this.currentY - this.offsetY); 

        buffer.endShape(CLOSE);

​

        buffer.beginShape();

        buffer.vertex(this.currentX + i * this.offsetX - this.tailRadius, this.currentY - this.offsetY);

        buffer.vertex(this.prevMouseX + i * this.offsetXSmoothed - this.tailRadiusSmoothed, this.prevMouseY - this.offsetYSmoothed); 

        buffer.vertex(this.prevMouseX + i * this.offsetXSmoothed + this.tailRadiusSmoothed, this.prevMouseY - this.offsetYSmoothed);

        buffer.vertex(this.currentX + i * this.offsetX + this.tailRadius, this.currentY - this.offsetY);

        buffer.endShape(CLOSE);

      }

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  buffer = createGraphics(windowWidth, windowHeight);

}