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