Realistic water ripples

// Asure that Hardware Acceleration in browser is turned on, if not already.

​

// If you are going to change the code, save it after altering and reload the page in the browser.

// Running without reloading may result in very slow performance.

​

class WaterRippleEffect {

  constructor(canvasId, imagePath, width = 1080, height = 720, rippleRadius = 3, updateInterval = 10) {

    this.canvas = document.getElementById(canvasId);

    this.ctx = this.canvas.getContext('2d');

    this.width = width;

    this.height = height;

    this.halfWidth = width >> 1;

    this.halfHeight = height >> 1;

    this.rippleMapSize = width * (height + 2) * 2;

    this.updateInterval = updateInterval;

    this.oldIndex = width;

    this.newIndex = width * (height + 3);

    this.rippleRadius = rippleRadius;

    this.rippleMap = [];

    this.lastMap = [];

    this.imagePath = imagePath;

    this.texture = null;

    this.rippleData = null;

    this.initializeCanvas();

    this.loadImage();

  }

​

  // Set up canvas dimensions

  initializeCanvas() {

    this.canvas.width = this.width;

    this.canvas.height = this.height;

  }

​

  // Load and draw image, then initialize animation data

  loadImage() {

    const image = new Image();

    image.crossOrigin = 'anonymous'; // openprocessing uses amazonaws.com for storage thus is prone to CORS errors.

    image.src = this.imagePath;

​

    image.onload = () => {

      this.ctx.drawImage(image, 0, 0, this.width, this.height);

      this.texture = this.ctx.getImageData(0, 0, this.width, this.height);

      this.rippleData = this.ctx.getImageData(0, 0, this.width, this.height);

​

      // Initialize the ripple and last map arrays

      for (let i = 0; i < this.rippleMapSize; i++) {

        this.rippleMap[i] = this.lastMap[i] = 0;

      }

​

      // Start animation and random ripple generation

      setInterval(() => this.updateFrame(), this.updateInterval);

      setInterval(() => this.createRandomRipple(), 700);

    };

  }

​

  // Create random ripple disturbance

  createRandomRipple() {

    this.disturb(Math.random() * this.width, Math.random() * this.height);

  }

​

  // Disturb water at specified (x, y) location

  disturb(x, y) {

    x = x | 0;

    y = y | 0;

​

    for (let j = y - this.rippleRadius; j < y + this.rippleRadius; j++) {

      for (let k = x - this.rippleRadius; k < x + this.rippleRadius; k++) {

        this.rippleMap[this.oldIndex + (j * this.width) + k] += 512;

      }

    }

  }

​

  // Calculate new ripple frame data

  updateFrame() {

    let data, currentPixel, newPixel, oldData;

​

    // Swap old and new indexes

    [this.oldIndex, this.newIndex] = [this.newIndex, this.oldIndex];

​

    let rippleMapIndex = this.oldIndex;

    const width = this.width, height = this.height;

    const rippleMap = this.rippleMap, lastMap = this.lastMap;

    const rippleData = this.rippleData.data, textureData = this.texture.data;

​

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

      for (let x = 0; x < width; x++) {

        // Calculate new ripple intensity based on neighboring pixels

        data = (

          rippleMap[rippleMapIndex - width] + 

          rippleMap[rippleMapIndex + width] + 

          rippleMap[rippleMapIndex - 1] + 

          rippleMap[rippleMapIndex + 1]

        ) >> 1;

​

        data -= rippleMap[this.newIndex + rippleMapIndex - this.oldIndex];

        data -= data >> 5; // Damping effect

        rippleMap[this.newIndex + rippleMapIndex - this.oldIndex] = data;

        data = 1024 - data;

​

        oldData = lastMap[rippleMapIndex - this.oldIndex];

        lastMap[rippleMapIndex - this.oldIndex] = data;

​

        // Only update pixel if there's a change

        if (oldData !== data) {

          const offsetX = (((x - this.halfWidth) * data / 1024) | 0) + this.halfWidth;

          const offsetY = (((y - this.halfHeight) * data / 1024) | 0) + this.halfHeight;

​

          const boundX = Math.max(0, Math.min(offsetX, width - 1));

          const boundY = Math.max(0, Math.min(offsetY, height - 1));

​

          newPixel = (boundX + (boundY * width)) * 4;

          currentPixel = (rippleMapIndex - this.oldIndex) * 4;

​

          // Transfer texture color to ripple effect data

          rippleData[currentPixel] = textureData[newPixel];

          rippleData[currentPixel + 1] = textureData[newPixel + 1];

          rippleData[currentPixel + 2] = textureData[newPixel + 2];

        }

        rippleMapIndex++;

      }

    }

​

    // Draw the updated ripple effect on the canvas

    this.ctx.putImageData(this.rippleData, 0, 0);

  }

}

​

const canvas = document.getElementById('c');

​

// For desktop mouse movement

canvas.onmousemove = (event) => {

  rippleEffect.disturb(event.offsetX || event.layerX, event.offsetY || event.layerY);

};

​

// For touch events on mobile devices

canvas.ontouchstart = (event) => {

  event.preventDefault();

  const touch = event.touches[0];

  rippleEffect.disturb(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);

};

​

// Initialize the water ripple effect with the canvas ID and image path

const rippleEffect = new WaterRippleEffect('c', 'bladen.png');

​

// Register mouse movement to create ripples where the mouse moves

document.getElementById('c').onmousemove = (event) => {

  rippleEffect.disturb(event.offsetX || event.layerX, event.offsetY || event.layerY);

};

​