random-walkers/walkers.js

/****************************************************************************
 * Buttons that interact with the UI                                        *
 ****************************************************************************/

// a rainbow-adjacent set of colors for the walkers to cycle through
var walker_colors = [
  "#33FF00", // green, also from https://superuser.com/a/1206781
  "#0033ff", // blue
  "#a553fc", // purple
  "#FF2E00", // red
  "#FFB000", // amber, also from https://superuser.com/a/1206781. this is the default color used, so it is last in the array.
];
var color_idx = 0;

function create_new_walker() {
  var my_row = Math.floor(Math.random() * n_rows);
  var my_col = Math.floor(Math.random() * n_cols);
  var my_color = walker_colors[color_idx];
  // TODO: ADD SPEED TO THIS WHOLE DEAL
  walkers.push({row: my_row, col: my_col, color: my_color});
  color_idx = (color_idx + 1).mod(walker_colors.length);
}

function destroy_random_walker() {
  // destroy a random walker.
  // we can't get the trail, that'll have to fade on its own
  var choice = Math.floor(Math.random() * walkers.length);
  var removed = walkers.splice(choice, 1);

  // hide where the walker used to be
  draw_grid_square(removed[0].row, removed[0].col, "black");
}

function destroy_all_walkers() {
  // kill all the walkers, but not their trails -- i like the look better
  var removed = walkers.splice(0, walkers.length);

  // draw black everywhere on the canvas to hide the dead bodies D:
  for (var i = 0; i < removed.length; i++) {
    draw_grid_square(removed[i].row, removed[i].col, "black");
  }
}

/****************************************************************************
 * 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)                          *
 ****************************************************************************/

function init_walk() {
  setInterval(update_size, 20);
  setInterval(update_walkers, 200);
  setInterval(update_trails, 200);
}

// check if the trails array has a position.
// return index if found, or null if not.
function trails_find_position(row, col) {
  for (var i = 0; i < trails.length; i++) {
    var t = trails[i];
    if (t.row === row && t.col === col) {
      return i;
    }
  }
  return null;
}

function update_trails() {
  // for all existing trails, make them darker
  for (var i = 0; i < trails.length; i++) {
    var darker = tweak_color_luminance(trails[i].color, -0.1);
    trails[i].color = darker;

    // delete any trails with 0 for first digit of RGB
    // (think of them as near-black)
    // e.g. #050500
    if (darker[1] === "0" && darker[3] == "0" && darker[5] == "0") {
      // draw black, just so we don't leave behind an almost-black square
      draw_grid_square(trails[i].row, trails[i].col, "black");

      // delete the item from the array
      trails.splice(i, 1);
    }
  }

  // after all trails have been darkened/removed, draw the remaining ones
  for (var i = 0; i < trails.length; i++) {
    draw_grid_square(trails[i].row, trails[i].col, trails[i].color);
  }
}

function update_walkers() {
  // move all walkers, creating trails behind them
  for (var i = 0; i < walkers.length; i++) {
    // leave a trail behind
    var index = trails_find_position(walkers[i].row, walkers[i].col);
    if (index) {
      trails[index].color = walkers[i].color;
    } else {
      trails.push({row: walkers[i].row, col: walkers[i].col, color: walkers[i].color});
    }

    // move in random dir
    add_random_direction(walkers[i]);
  }

  // draw a colored square at walker locations
  for (var i = 0; i < walkers.length; i++) {
    draw_grid_square(walkers[i].row, walkers[i].col, walkers[i].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;
}

function update_size() {
  if (canvas.width != window.innerWidth || canvas.height != window.innerHeight) {
    // 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(cell_size);
    n_cols = canvas.width.div(cell_size);
    offset_h = (canvas.width - (cell_size * n_cols)).div(2);
    offset_v = (canvas.height - (cell_size * n_rows)).div(2);
  }
}

function draw_grid_square(row, col, color) {
  var margin = 2;

  ctx.fillStyle = color;
  var pos_h = offset_h + (cell_size * col) + margin;
  var pos_v = offset_v + (cell_size * row) + margin;

  ctx.fillRect(pos_h, pos_v, cell_size - (2*margin), cell_size - (2*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("walker-canvas")
var ctx = canvas.getContext('2d')
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

// find the UI buttons and give them click handlers to activate our functions
document
  .getElementById("button-create-walker")
  .addEventListener("click", create_new_walker);
document
  .getElementById("button-destroy-walker")
  .addEventListener("click", destroy_random_walker);
document
  .getElementById("button-reset-walkers")
  .addEventListener("click", destroy_all_walkers);

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

// set start position of walker and start the random walk
var walkers = [
  {row: n_rows.div(2), col: n_cols.div(2), color: "#FFB000"},
];
trails = []
init_walk();