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 = [
  "#ffb000", // amber, from https://superuser.com/a/1206781
  "#33ff00", // green, also from https://superuser.com/a/1206781
  "#ff2e00", // red
  "#ff7700", // orange
  "#004cff", // blue
  "#8500ff", // purple
];
// start with a random part of the sequence
var color_idx = 0;

// create a new walker with random position and color
function create_random_walker() {
  // create random-param walker and add to the array
  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];
  var new_length = walkers.push({row: my_row, col: my_col, color: my_color});

  // decide how fast this walker updates and push that to the interval array
  var update_time = random_update_time();
  var timer = setInterval((function() {
    update_walker(walkers[new_length - 1]);
  }), update_time);
  walker_timers.push(timer);

  // go to the next color
  color_idx = (color_idx + 1).mod(walker_colors.length);
}

// kill the last walker created
function destroy_last_walker() {
  var last_idx = walkers.length - 1;
  var removed = walkers.splice(last_idx, 1)[0];
  if (!removed) {
    return;
  }

  draw_grid_square(removed.row, removed.col, "black");

  // also stop its timer
  var removed_timer = walker_timers.splice(last_idx, 1)[0];
  clearInterval(removed_timer);
}

// kill all walkers, but not their trails.
function destroy_all_walkers() {
  // delete all walkers, draw black where they used to be
  var removed = walkers.splice(0, walkers.length);
  for (var i = 0; i < removed.length; i++) {
    draw_grid_square(removed[i].row, removed[i].col, "black");
  }

  // stop all timers as well
  var removed_timers = walker_timers.splice(0, walker_timers.length);
  for (var i = 0; i < removed_timers.length; i++) {
    clearInterval(removed_timers[i]);
  }
}

/****************************************************************************
 * 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_walk() {
  setInterval(update_trails, 200);

  // read url params to see how many we should create, default to num colors.
  // special case is because 0 == null and my brain doesn't wanna work good
  var n_create;
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('n', "0")) {
    n_create = 0;
  } else {
    n_create = Number(urlParams.get('nwalk')) || 3;
  }

  // create initial walkers of every color
  for (var i = 0; i < n_create; i++) {
    create_random_walker();
  }
}

// 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;
}

// update and draw all trails in the array
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);
  }
}

// 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(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);
}

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

  ctx.fillStyle = color;
  ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - 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;

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

// find the UI buttons and give them click handlers to activate our functions
document
  .getElementById("button-create-walker")
  .addEventListener("click", create_random_walker);
document
  .getElementById("button-destroy-walker")
  .addEventListener("click", destroy_last_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 = [];
var walker_timers = [];
var trails = []
init_walk();