random-walkers/random-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", 200, 2000).name("step time ms").step(1);
  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 = 500;
  this.fadeout = 10;
  this.cell_size = 30;
  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;
};

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

function init_walk() {
  // Draw a grid of boxes on the canvas
  draw_grid();

  // Set default values for walker pos and empty the trail
  // TODO: ACTUAL DEFAULT VALUE AT CENTER.
  walker_position = {x: 0, y: 0};
  trail_positions = [];
  // Create array of walkers with set parameters, start walkers in center of canvas
  walker_array = []
  for (var i = 0; i < 1; i++) {
    var walker = {
      x_position: canvas.width / 2,
      y_position: canvas.height / 2,
      line_width: 1,
      color: controls.color,
      speed: 5,
      angle: Math.random() * 360,
      halt: false,
    }
    walker.x_velocity = walker.speed * Math.cos(walker.angle)
    walker.y_velocity = walker.speed * Math.sin(walker.angle)
    walker_array.push(walker)
  }
  setInterval(paint_canvas, 20);
}

function move_walker(walker, possible_directions) {
  // Update new random direction & update velocity of walker
  var new_angle = Math.random() * 360
  walker.x_position = (walker.x_position + walker.x_velocity).mod(canvas.width);
  walker.y_position = (walker.y_position + walker.y_velocity).mod(canvas.height);
  walker.angle = degrees_to_radians(get_nearest_angle(new_angle, possible_directions))
  walker.x_velocity = walker.speed * Math.cos(walker.angle)
  walker.y_velocity = walker.speed * Math.sin(walker.angle)
}

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

function paint_canvas() {
  /*
  // Regenerate possible angle list
  possible_directions = gen_angle_list(4)

  // Loop through all walkers, moving & painting accordingly
  for (var i = 0; i < walker_array.length; i++) {

    current_walker = walker_array[i];

    // If walker hasn't hit the walls yet
    if (!current_walker.halt) {
      var prev_x = current_walker.x_position
      var prev_y = current_walker.y_position
      ctx.beginPath()
      ctx.moveTo(prev_x, prev_y)
      move_walker(current_walker, possible_directions);
      ctx.strokeStyle = current_walker.color;
      ctx.lineWidth = current_walker.line_width;
      ctx.lineTo(current_walker.x_position, current_walker.y_position)
      ctx.stroke()

      ctx.closePath();
    }
  }
  */
}

function draw_grid_square(row, col, color, offset) {
  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));
}


function draw_grid() {
  // Fit in as many cell_size sized boxes as we can.
  // note that cell_size is the outer size, not the inner size.
  //   inner = outer - 4, to allow for spacing between
  var n_cells_h = Math.floor(canvas.width / controls.cell_size);
  var n_cells_v = Math.floor(canvas.height / controls.cell_size);

  var offset_h = Math.floor((canvas.width - (controls.cell_size * n_cells_h)) / 2);
  var offset_v = Math.floor((canvas.height - (controls.cell_size * n_cells_v)) / 2);
  var offset = {h: offset_h, v: offset_v};

  // Actually draw the cells lol
  for (var row = 0; row < n_cells_v; row++) {
    for (var col = 0; col < n_cells_h; col++) {
      draw_grid_square(row, col, "#282828", offset);
    }
  }
}

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

// canvas starts with full width and height of its HTML element
var canvas = document.getElementById("walker-canvas")
var ctx = canvas.getContext('2d')
ctx.canvas.width = document.getElementById("walker-canvas").clientWidth
ctx.canvas.height = document.getElementById("walker-canvas").clientHeight

// set start position of walker and start the random walk
var walker_position = {x: 0, y: 0};
var trail_positions = [];
init_walk();