diff --git a/random-walkers.js b/random-walkers.js index 1599a63..1feff2a 100644 --- a/random-walkers.js +++ b/random-walkers.js @@ -1,3 +1,7 @@ +/**************************************************************************** + * GUI Setup * + ****************************************************************************/ + window.onload = function() { var gui = new dat.GUI({ closed: false, @@ -12,8 +16,9 @@ window.onload = function() { autoPlace: false, }); - gui.add(controls, "step_time", 200, 2000).name("step time (ms)").step(1); - gui.add(controls, "fadeout", 0, 20).name("time to fade (0 to disable").step(1); + 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"); @@ -24,6 +29,7 @@ window.onload = function() { var controls = new(function() { this.step_time = 500; this.fadeout = 10; + this.cell_size = 30; this.color = "#FFB000"; this.restart_button = function() { @@ -32,6 +38,9 @@ var controls = new(function() { } })() +/**************************************************************************** + * TODO: CATEOGORIZE THESE BULLSHITS * + ****************************************************************************/ // Define a new mod function that behaves different on negatives. // now, (-1).mod(4) -> 3. not -1. @@ -41,7 +50,18 @@ Number.prototype.mod = function (n) { 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++) { @@ -61,51 +81,6 @@ function init_walk() { setInterval(paint_canvas, 20); } - - -function degrees_to_radians(degrees) { - var pi = Math.PI; - return degrees * (pi / 180); -} - -function radians_to_degrees(radians) { - var pi = Math.PI; - return radians * (180 / pi); -} - - -function gen_angle_list(number_of_groups) { - /* Generate array of possible angles from limitation - - For example, if the limitation of angles is 4, then 360 / 4 = 90, and resulting array will be angle_list = [0,90,180,270,360] - Including 0 & 360 is to give the walker equal chance to turn around and stay in the canvas - */ - var angle_list = [] - - var initial_angle = 360 / number_of_groups; - - for (var i = 0; i < number_of_groups + 1; i++) { - angle_list.push(initial_angle * i); - } - return angle_list -} - -function get_nearest_angle(goal, angle_list) { - // Source: https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array - - // Find nearest angle in possible direction array from new random angle - - var closest = angle_list.reduce(function(prev, curr) { - return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev); - }); - return closest - -} - - -var possible_directions = gen_angle_list(4); - - function move_walker(walker, possible_directions) { // Update new random direction & update velocity of walker var new_angle = Math.random() * 360 @@ -116,7 +91,12 @@ function move_walker(walker, possible_directions) { walker.y_velocity = walker.speed * Math.sin(walker.angle) } +/**************************************************************************** + * Drawing * + ****************************************************************************/ + function paint_canvas() { + /* // Regenerate possible angle list possible_directions = gen_angle_list(4) @@ -140,13 +120,50 @@ function paint_canvas() { 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 -var walker_array = [] +// set start position of walker and start the random walk +var walker_position = {x: 0, y: 0}; +var trail_positions = []; init_walk();