water/water.js

/****************************************************************************
 * Functions JS doesn't want you to have, ig                                *
 ****************************************************************************/

// Define a new mod function that behaves different on negatives.
// now, (-1).mod(4) -> 3. not -1.
// taken from https://stackoverflow.com/a/4467559, which itself took from elsewhere
Number.prototype.mod = function (n) {
    "use strict";
    return ((this % n) + n) % n;
};

// Perform integer division
Number.prototype.div = function(divisor) {
  "use strict";
  return Math.floor(this / divisor);
}

/****************************************************************************
 * Random walk implementation (movement functions)                          *
 ****************************************************************************/

// return a random update time. 30 to 210ms in increments of 20.
function random_update_time() {
  var speed = Math.floor(Math.random() * 7);
  return (speed * 30) + 30;
}

// start up the functions that run FOREVER!!!
function init() {
  document.addEventListener('mousemove', follow_mouse)
  //setInterval(epic_physics, 500);
}

// update and draw all trails in the array
function follow_mouse(event) {
  // get the mouse position
  var mouse_x = event.clientX
  var mouse_y = event.clientY

  // convert screen coordinates to grid coordinates
  var grid_x = (mouse_x - grid_margin - offset_h).div(grid_size);
  var grid_y = (mouse_y - grid_margin - offset_v).div(grid_size);

  // draw a square there
  draw_grid_square(grid_y, grid_x, 'white');
}

// update and draw all walkers in the array
function update_walker(walker) {
  // leave a trail behind
  var index = trails_find_position(walker.row, walker.col);
  if (index) {
    trails[index].color = walker.color;
  } else {
    trails.push({row: walker.row, col: walker.col, color: walker.color});
  }

  // move in random dir
  add_random_direction(walker);

  // draw a colored square at walker locations
  draw_grid_square(walker.row, walker.col, walker.color);
}

// give this function a walker and it will update the walkerition by one tile
function add_random_direction(walker) {
  let rand = Math.floor(Math.random() * 4);
  if (rand === 0) {
    walker.row++;
    walker.row = walker.row.mod(n_rows);
  } else if (rand === 1) {
    walker.row--;
    walker.row = walker.row.mod(n_rows);
  } else if (rand === 2) {
    walker.col++;
    walker.col = walker.col.mod(n_cols);
  } else {
    walker.col--;
    walker.col = walker.col.mod(n_cols);
  }
}

/****************************************************************************
 * Drawing                                                                  *
 ****************************************************************************/

// from https://www.sitepoint.com/javascript-generate-lighter-darker-color/
function tweak_color_luminance(hex, lum) {
  // validate hex string
  hex = String(hex).replace(/[^0-9a-f]/gi, '');
  if (hex.length < 6) {
    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
  }
  lum = lum || 0;

  // convert to decimal and change luminosity
  var rgb = "#", c, i;
  for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i*2,2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00"+c).substr(c.length);
  }

  return rgb;
}

// when called, fixes the canvas and grid size. will cause the canvas to go
// black until it's drawn again, though.
function fix_grid_size() {
  // note: changing width and height clears the canvas, so this will cause a
  // black screen until the next draw call for each thing.
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;

  // update all the globals we're using too
  n_rows = canvas.height.div(grid_size);
  n_cols = canvas.width.div(grid_size);
  offset_h = (canvas.width - (grid_size * n_cols)).div(2);
  offset_v = (canvas.height - (grid_size * n_rows)).div(2);
}

// draw on the canvas a grid square of that color
function draw_grid_square(row, col, color) {
  var pos_h = offset_h + (grid_size * col) + grid_margin;
  var pos_v = offset_v + (grid_size * row) + grid_margin;

  ctx.fillStyle = color;
  ctx.fillRect(pos_h, pos_v, grid_size - grid_margin, grid_size - grid_margin);
}

/****************************************************************************
 * ON SCRIPT LOAD                                                           *
 ****************************************************************************/

// "make sure to eat up your globals honey, they're good for you"

// find the canvas and set its initial size
var canvas = document.getElementById("grid-canvas")
var ctx = canvas.getContext('2d')
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

// set up a handler so the grid gets fixed whenever the window resizes
window.addEventListener('resize', fix_grid_size);

// compute the initial rows and columns
var grid_size = 22;
var grid_margin = 4;
var n_rows = canvas.height.div(grid_size);
var n_cols = canvas.width.div(grid_size);
var offset_h = (canvas.width - (grid_size * n_cols)).div(2);
var offset_v = (canvas.height - (grid_size * n_rows)).div(2);

// away we go!
init();