diff --git a/random-walkers.js b/random-walkers.js index b91039e..4d8d49f 100644 --- a/random-walkers.js +++ b/random-walkers.js @@ -16,7 +16,7 @@ window.onload = function() { autoPlace: false, }); - gui.add(controls, "step_time", 200, 2000).name("step time ms").step(1); + 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"); @@ -27,7 +27,7 @@ window.onload = function() { }; var controls = new(function() { - this.step_time = 500; + this.step_time = 200; this.fadeout = 10; this.cell_size = 22; this.color = "#FFB000"; @@ -92,7 +92,11 @@ function init_walk() { } function move_walker() { - add_random_direction(walker_pos); + // leave a trail + trails.push({row: walker.row, col: walker.col, color: walker.color}); + + // move in random dir + add_random_direction(walker); } function add_random_direction(pos) { @@ -116,6 +120,26 @@ function add_random_direction(pos) { * 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; @@ -143,7 +167,13 @@ function draw() { draw_grid(); // draw a colored square at the walker location - draw_grid_square(walker_pos.row, walker_pos.col, "red"); + 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 } @@ -186,5 +216,6 @@ 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_pos = {row: n_rows.div(2), col: n_cols.div(2)}; +var walker = {row: n_rows.div(2), col: n_cols.div(2), color: controls.color}; +trails = [] init_walk();