Leave a trail behind the walker
This commit is contained in:
parent
8e657a870a
commit
555735966e
@ -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();
|
||||
|
Loading…
x
Reference in New Issue
Block a user