Rework to support multiple walkers at once
This commit is contained in:
parent
f3ae7860a5
commit
26e4296596
126
walkers.js
126
walkers.js
@ -1,10 +1,3 @@
|
||||
var constants = {
|
||||
step_time: 200,
|
||||
cell_size: 22,
|
||||
color: "#FFB000",
|
||||
};
|
||||
|
||||
|
||||
/****************************************************************************
|
||||
* TODO: CATEOGORIZE THESE BULLSHITS *
|
||||
****************************************************************************/
|
||||
@ -28,10 +21,9 @@ Number.prototype.div = function(divisor) {
|
||||
****************************************************************************/
|
||||
|
||||
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, constants.step_time);
|
||||
setInterval(update_size, 20);
|
||||
setInterval(update_walkers, 200);
|
||||
setInterval(update_trails, 200);
|
||||
}
|
||||
|
||||
// check if the trails array has a position.
|
||||
@ -46,35 +38,49 @@ function trails_find_position(row, col) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function move_walker() {
|
||||
// leave a trail behind
|
||||
var index = trails_find_position(walker.row, walker.col);
|
||||
if (index) {
|
||||
trails[index].color = walker.color;
|
||||
} else {
|
||||
trails.push({row: walker.row, col: walker.col, color: walker.color});
|
||||
}
|
||||
|
||||
function update_trails() {
|
||||
// for all existing trails, make them darker
|
||||
for (var i = 0; i < trails.length; i++) {
|
||||
var t = trails[i];
|
||||
t.color = tweak_color_luminance(t.color, -0.1);
|
||||
var darker = tweak_color_luminance(trails[i].color, -0.1);
|
||||
trails[i].color = darker;
|
||||
|
||||
// delete any trails with 0 for first digit of RGB
|
||||
// (think of them as near-black)
|
||||
// e.g. #050500
|
||||
if (t.color[1] === "0" && t.color[3] == "0" && t.color[5] == "0") {
|
||||
// draw black there just to be safe
|
||||
draw_grid_square(t.row, t.col, "black");
|
||||
if (darker[1] === "0" && darker[3] == "0" && darker[5] == "0") {
|
||||
// draw black, just so we don't leave behind an almost-black square
|
||||
draw_grid_square(trails[i].row, trails[i].col, "black");
|
||||
|
||||
// delete the item from the array
|
||||
trails.splice(i, 1);
|
||||
}
|
||||
}
|
||||
console.log(`${trails.length} items in trails array`);
|
||||
|
||||
// move in random dir
|
||||
add_random_direction(walker);
|
||||
// after all trails have been darkened/removed, draw the remaining ones
|
||||
for (var i = 0; i < trails.length; i++) {
|
||||
draw_grid_square(trails[i].row, trails[i].col, trails[i].color);
|
||||
}
|
||||
}
|
||||
|
||||
function update_walkers() {
|
||||
// move all walkers, creating trails behind them
|
||||
for (var i = 0; i < walkers.length; i++) {
|
||||
// leave a trail behind
|
||||
var index = trails_find_position(walkers[i].row, walkers[i].col);
|
||||
if (index) {
|
||||
trails[index].color = walkers[i].color;
|
||||
} else {
|
||||
trails.push({row: walkers[i].row, col: walkers[i].col, color: walkers[i].color});
|
||||
}
|
||||
|
||||
// move in random dir
|
||||
add_random_direction(walkers[i]);
|
||||
}
|
||||
|
||||
// draw a colored square at walker locations
|
||||
for (var i = 0; i < walkers.length; i++) {
|
||||
draw_grid_square(walkers[i].row, walkers[i].col, walkers[i].color);
|
||||
}
|
||||
}
|
||||
|
||||
function add_random_direction(pos) {
|
||||
@ -118,49 +124,29 @@ function tweak_color_luminance(hex, lum) {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// pixel width and height
|
||||
var old_width = ctx.canvas.width;
|
||||
var old_height = ctx.canvas.height;
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
function update_size() {
|
||||
if (canvas.width != window.innerWidth || canvas.height != window.innerHeight) {
|
||||
// note: changing width and height clears the canvas, so this will cause a
|
||||
// black screen until the next draw call for each thing.
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
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(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
|
||||
// lose anything.
|
||||
|
||||
// TODO: HANDLE RESIZE
|
||||
console.log(`dimensions changed from ${old_width}x${old_height} to ${ctx.canvas.width}x${ctx.canvas.height}`);
|
||||
// update all the globals we're using to
|
||||
n_rows = canvas.height.div(cell_size);
|
||||
n_cols = canvas.width.div(cell_size);
|
||||
offset_h = (canvas.width - (cell_size * n_cols)).div(2);
|
||||
offset_v = (canvas.height - (cell_size * n_rows)).div(2);
|
||||
}
|
||||
|
||||
// draw a colored square at the walker location
|
||||
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
|
||||
}
|
||||
|
||||
function draw_grid_square(row, col, color) {
|
||||
var margin = 2;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
var pos_h = offset.h + (constants.cell_size * col) + margin;
|
||||
var pos_v = offset.v + (constants.cell_size * row) + margin;
|
||||
var pos_h = offset_h + (cell_size * col) + margin;
|
||||
var pos_v = offset_v + (cell_size * row) + margin;
|
||||
|
||||
ctx.fillRect(pos_h, pos_v, constants.cell_size - (2*margin), constants.cell_size - (2*margin));
|
||||
ctx.fillRect(pos_h, pos_v, cell_size - (2*margin), cell_size - (2*margin));
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
@ -174,13 +160,17 @@ canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// compute the initial rows and columns
|
||||
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};
|
||||
var cell_size = 22;
|
||||
var n_rows = canvas.height.div(cell_size);
|
||||
var n_cols = canvas.width.div(cell_size);
|
||||
var offset_h = (canvas.width - (cell_size * n_cols)).div(2);
|
||||
var offset_v = (canvas.height - (cell_size * n_rows)).div(2);
|
||||
|
||||
// set start position of walker and start the random walk
|
||||
var walker = {row: n_rows.div(2), col: n_cols.div(2), color: constants.color};
|
||||
var walkers = [
|
||||
{row: n_rows.div(2), col: n_cols.div(2), color: "#FFB000"},
|
||||
{row: 0, col: 0, color: "#ff0000"},
|
||||
{row: n_rows, col: 0, color: "#00ff00"},
|
||||
];
|
||||
trails = []
|
||||
init_walk();
|
||||
|
Loading…
x
Reference in New Issue
Block a user