diff --git a/walkers.js b/walkers.js index 253db93..79c7494 100644 --- a/walkers.js +++ b/walkers.js @@ -1,42 +1,9 @@ -/**************************************************************************** - * 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 constants = { + step_time: 200, + cell_size: 22, + color: "#FFB000", }; -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 * @@ -64,7 +31,7 @@ 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); + setInterval(move_walker, constants.step_time); } // check if the trails array has a position. @@ -161,10 +128,10 @@ function draw() { 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); + n_rows = canvas.height.div(constants.cell_size); + n_cols = canvas.width.div(constants.cell_size); + offset_h = (canvas.width - (constants.cell_size * n_cols)).div(2); + offset_v = (canvas.height - (constants.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 @@ -190,10 +157,10 @@ 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; + var pos_h = offset.h + (constants.cell_size * col) + margin; + var pos_v = offset.v + (constants.cell_size * row) + margin; - ctx.fillRect(pos_h, pos_v, controls.cell_size - (2*margin), controls.cell_size - (2*margin)); + ctx.fillRect(pos_h, pos_v, constants.cell_size - (2*margin), constants.cell_size - (2*margin)); } /**************************************************************************** @@ -207,13 +174,13 @@ 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 n_rows = canvas.height.div(constants.cell_size); +var n_cols = canvas.width.div(constants.cell_size); +var offset_h = (canvas.width - (constants.cell_size * n_cols)).div(2); +var offset_v = (canvas.height - (constants.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}; +var walker = {row: n_rows.div(2), col: n_cols.div(2), color: constants.color}; trails = [] init_walk();