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 @@
|
||||
/****************************************************************************
|
||||
* GUI Setup *
|
||||
****************************************************************************/
|
||||
|
||||
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 constants = {
|
||||
step_time: 200,
|
||||
cell_size: 22,
|
||||
color: "#FFB000",
|
||||
};
|
||||
|
||||
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 *
|
||||
@ -64,7 +31,7 @@ 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, controls.step_time);
|
||||
setInterval(move_walker, constants.step_time);
|
||||
}
|
||||
|
||||
// check if the trails array has a position.
|
||||
@ -161,10 +128,10 @@ function draw() {
|
||||
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(controls.cell_size);
|
||||
n_cols = canvas.width.div(controls.cell_size);
|
||||
offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
|
||||
offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
|
||||
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
|
||||
@ -190,10 +157,10 @@ function draw_grid_square(row, col, color) {
|
||||
var margin = 2;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
var pos_h = offset.h + (controls.cell_size * col) + margin;
|
||||
var pos_v = offset.v + (controls.cell_size * row) + margin;
|
||||
var pos_h = offset.h + (constants.cell_size * col) + 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;
|
||||
|
||||
// compute the initial rows and columns
|
||||
var n_rows = canvas.height.div(controls.cell_size);
|
||||
var n_cols = canvas.width.div(controls.cell_size);
|
||||
var offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
|
||||
var offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
|
||||
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};
|
||||
|
||||
// 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 = []
|
||||
init_walk();
|
||||
|
Loading…
x
Reference in New Issue
Block a user