water 2d effect

water_2d_effect.js

// Hugo Elias Water 2D Effect

let COLUMNS = 40;
let ROWS = 40;
let BLOCKS = COLUMNS * ROWS;
let LEVEL = 50;
let HIGH_LEVEL = LEVEL * 2;
let HUE = 210;
let SATU = 95;

var buffer1 = [];// float[] 
var buffer2 = [];
var temp = [];
var levelColors = []; //color[]
var levels = []; // Vector[]
var blockWidth = 12;
var blockHeight = 12;
var firstClicked = false;

function mouseClicked() {
  let ix = int(mouseX / blockWidth);
  let iy = int(mouseY / blockHeight) * COLUMNS;
  buffer1[ix + iy] = HIGH_LEVEL;
  firstClicked = true;
}


function setup() {
  createCanvas(480, 480);
  frameRate(30);
  colorMode(HSB, 360, 100, HIGH_LEVEL);
  blockWidth = width / COLUMNS;
  blockHeight = height / ROWS;
  
  for (var i = 0; i < BLOCKS; i++) {
    levels[i] = createVector(i % COLUMNS * blockWidth,
      floor(i / ROWS) * blockHeight);
    buffer1[i] = LEVEL;
    buffer2[i] = LEVEL;
    levelColors[i] = color(HUE, SATU, LEVEL);
  }
}

let lastPosition = (ROWS - 1) * COLUMNS;

function draw() {
  
  for (var i = COLUMNS; i < lastPosition; i++) {
    // passing both left-right side line
    if (i % COLUMNS == 0 || i % COLUMNS == COLUMNS - 1) continue;
    // Light smoothing, add before 2 frames's levels
    buffer2[i] = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - COLUMNS] + buffer1[i + COLUMNS]) * 0.5) - buffer2[i];
    // Damping
    buffer2[i] -= ((buffer2[i] - LEVEL) * 0.01);
    // coloring
    levelColors[i] = color(HUE, SATU, buffer2[i]);
    fill(levelColors[i]);
    noStroke();
    rect(levels[i].x, levels[i].y, blockWidth, blockHeight);
  }
  // switching buffer
  temp = buffer1;
  buffer1 = buffer2;
  buffer2 = temp;

  //guide
  if (!firstClicked) {
    fill(255);
    text("Try click any where!!", 30, 30);
  }
}