Actually remove controls, switch to a global "constants" array
This commit is contained in:
parent
158cb0627a
commit
f3ae7860a5
67
walkers.js
67
walkers.js
@ -1,42 +1,9 @@
|
|||||||
/****************************************************************************
|
var constants = {
|
||||||
* GUI Setup *
|
step_time: 200,
|
||||||
****************************************************************************/
|
cell_size: 22,
|
||||||
|
color: "#FFB000",
|
||||||
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 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 *
|
* TODO: CATEOGORIZE THESE BULLSHITS *
|
||||||
@ -64,7 +31,7 @@ function init_walk() {
|
|||||||
// Draw a grid of boxes on the canvas
|
// Draw a grid of boxes on the canvas
|
||||||
setInterval(draw, 20);
|
setInterval(draw, 20);
|
||||||
// TODO: it would be cool to have this changable, but I may just ... not
|
// 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.
|
// check if the trails array has a position.
|
||||||
@ -161,10 +128,10 @@ function draw() {
|
|||||||
if (old_width !== canvas.width || old_height != canvas.height) {
|
if (old_width !== canvas.width || old_height != canvas.height) {
|
||||||
var old_n_rows = n_rows;
|
var old_n_rows = n_rows;
|
||||||
var old_n_cols = n_cols;
|
var old_n_cols = n_cols;
|
||||||
n_rows = canvas.height.div(controls.cell_size);
|
n_rows = canvas.height.div(constants.cell_size);
|
||||||
n_cols = canvas.width.div(controls.cell_size);
|
n_cols = canvas.width.div(constants.cell_size);
|
||||||
offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
|
offset_h = (canvas.width - (constants.cell_size * n_cols)).div(2);
|
||||||
offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
|
offset_v = (canvas.height - (constants.cell_size * n_rows)).div(2);
|
||||||
offset = {h: offset_h, v: offset_v};
|
offset = {h: offset_h, v: offset_v};
|
||||||
// TODO: for every walker and every trail, adjust their position to the new canvas size
|
// 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
|
// 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;
|
var margin = 2;
|
||||||
|
|
||||||
ctx.fillStyle = color;
|
ctx.fillStyle = color;
|
||||||
var pos_h = offset.h + (controls.cell_size * col) + margin;
|
var pos_h = offset.h + (constants.cell_size * col) + margin;
|
||||||
var pos_v = offset.v + (controls.cell_size * row) + 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;
|
canvas.height = window.innerHeight;
|
||||||
|
|
||||||
// compute the initial rows and columns
|
// compute the initial rows and columns
|
||||||
var n_rows = canvas.height.div(controls.cell_size);
|
var n_rows = canvas.height.div(constants.cell_size);
|
||||||
var n_cols = canvas.width.div(controls.cell_size);
|
var n_cols = canvas.width.div(constants.cell_size);
|
||||||
var offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
|
var offset_h = (canvas.width - (constants.cell_size * n_cols)).div(2);
|
||||||
var offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
|
var offset_v = (canvas.height - (constants.cell_size * n_rows)).div(2);
|
||||||
var offset = {h: offset_h, v: offset_v};
|
var offset = {h: offset_h, v: offset_v};
|
||||||
|
|
||||||
// set start position of walker and start the random walk
|
// 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 = []
|
trails = []
|
||||||
init_walk();
|
init_walk();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user