random-walkers/walkers.js

/****************************************************************************
 * GUI Setup                                                                *
 ****************************************************************************/

window.onload = function() {
  var gui = new dat.GUI({
    closed: false,
    remembered: {
      undefined: {
        "0": {},
      },
    },
    folders: {},
    load: JSON,
    width: 400,
    autoPlace: false,
  });

  gui.add(controls, "step_time", 50, 1000).name("step time ms").step(50);
  gui.add(controls, "fadeout", 0, 20).name("trail fadeout length (0 to disable)").step(1);
  //gui.add(controls, "cell_size", 10, 100).name("cell size").step(1);
  gui.addColor(controls, "color").name("guy color");
  gui.add(controls, "restart_button").name("start again");

  var customContainer = document.getElementById("controls-container");
  customContainer.append(gui.domElement);
};

var controls = new(function() {
  this.step_time = 200;
  this.fadeout = 10;
  this.cell_size = 22;
  this.color = "#FFB000";

  this.restart_button = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    init_walk();
  }
})()

/****************************************************************************
 * TODO: CATEOGORIZE THESE BULLSHITS                                        *
 ****************************************************************************/

// 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() {
  // Draw a grid of boxes on the canvas
  setInterval(draw, 20);
  // TODO: it would be cool to have this changable, but I may just ... not
  setInterval(move_walker, controls.step_time);
}

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

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

    // delete any trails with 0 for first digit of RGB
    // (think of them as near-black)
    // e.g. #050500
    if (t.color[1] === "0" && t.color[3] == "0" && t.color[5] == "0") {
      // draw black there just to be safe
      draw_grid_square(t.row, t.col, "black");

      // delete the item from the array
      trails.splice(i, 1);
    }
  }
  console.log(`${trails.length} items in trails array`);

  // move in random dir
  add_random_direction(walker);
}

function add_random_direction(pos) {
  let rand = Math.floor(Math.random() * 4);
  if (rand === 0) {
    pos.row++;
    pos.row = pos.row.mod(n_rows);
  } else if (rand === 1) {
    pos.row--;
    pos.row = pos.row.mod(n_rows);
  } else if (rand === 2) {
    pos.col++;
    pos.col = pos.col.mod(n_cols);
  } else {
    pos.col--;
    pos.col = pos.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 draw() {
  // pixel width and height
  var old_width = ctx.canvas.width;
  var old_height = ctx.canvas.height;
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;

  if (old_width !== canvas.width || old_height != canvas.height) {
    var old_n_rows = n_rows;
    var old_n_cols = n_cols;
    n_rows = canvas.height.div(controls.cell_size);
    n_cols = canvas.width.div(controls.cell_size);
    offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
    offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
    offset = {h: offset_h, v: offset_v};
    // TODO: for every walker and every trail, adjust their position to the new canvas size
    // we wanna just mod it, probably. that way if you shrink it you don't
    // lose anything.

    // TODO: HANDLE RESIZE
    console.log(`dimensions changed from ${old_width}x${old_height} to ${ctx.canvas.width}x${ctx.canvas.height}`);
  }

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

  // for any trails, draw them
  for (var i = 0; i < trails.length; i++) {
    t = trails[i];
    draw_grid_square(t.row, t.col, t.color);
  }

  // TODO CODE
}

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

  ctx.fillStyle = color;
  var pos_h = offset.h + (controls.cell_size * col) + margin;
  var pos_v = offset.v + (controls.cell_size * row) + margin;

  ctx.fillRect(pos_h, pos_v, controls.cell_size - (2*margin), controls.cell_size - (2*margin));
}

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

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

// compute the initial rows and columns
var n_rows = canvas.height.div(controls.cell_size);
var n_cols = canvas.width.div(controls.cell_size);
var offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
var offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
var offset = {h: offset_h, v: offset_v};

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