diff --git a/index.html b/index.html
index ed01f48..bd5bdfb 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
-
+
diff --git a/water.js b/water.js
index c3fae31..8e002a8 100644
--- a/water.js
+++ b/water.js
@@ -1,68 +1,3 @@
-/***************************************************************************
- * Buttons that interact with the UI *
- ****************************************************************************/
-
-// a rainbow-adjacent set of colors for the walkers to cycle through
-var walker_colors = [
- "#ffb000", // amber, from https://superuser.com/a/1206781
- "#33ff00", // green, also from https://superuser.com/a/1206781
- "#ff2e00", // red
- "#ff7700", // orange
- "#004cff", // blue
- "#8500ff", // purple
-];
-// start with a random part of the sequence
-var color_idx = 0;
-
-// create a new walker with random position and color
-function create_random_walker() {
- // create random-param walker and add to the array
- var my_row = Math.floor(Math.random() * n_rows);
- var my_col = Math.floor(Math.random() * n_cols);
- var my_color = walker_colors[color_idx];
- var new_length = walkers.push({row: my_row, col: my_col, color: my_color});
-
- // decide how fast this walker updates and push that to the interval array
- var update_time = random_update_time();
- var timer = setInterval((function() {
- update_walker(walkers[new_length - 1]);
- }), update_time);
- walker_timers.push(timer);
-
- // go to the next color
- color_idx = (color_idx + 1).mod(walker_colors.length);
-}
-
-// kill the last walker created
-function destroy_last_walker() {
- var last_idx = walkers.length - 1;
- var removed = walkers.splice(last_idx, 1)[0];
- if (!removed) {
- return;
- }
-
- draw_grid_square(removed.row, removed.col, "black");
-
- // also stop its timer
- var removed_timer = walker_timers.splice(last_idx, 1)[0];
- clearInterval(removed_timer);
-}
-
-// kill all walkers, but not their trails.
-function destroy_all_walkers() {
- // delete all walkers, draw black where they used to be
- var removed = walkers.splice(0, walkers.length);
- for (var i = 0; i < removed.length; i++) {
- draw_grid_square(removed[i].row, removed[i].col, "black");
- }
-
- // stop all timers as well
- var removed_timers = walker_timers.splice(0, walker_timers.length);
- for (var i = 0; i < removed_timers.length; i++) {
- clearInterval(removed_timers[i]);
- }
-}
-
/****************************************************************************
* Functions JS doesn't want you to have, ig *
****************************************************************************/
@@ -92,60 +27,23 @@ function random_update_time() {
}
// start up the functions that run FOREVER!!!
-function init_walk() {
- setInterval(update_trails, 200);
-
- // read url params to see how many we should create, default to num colors.
- // special case is because 0 == null and my brain doesn't wanna work good
- var n_create;
- const urlParams = new URLSearchParams(window.location.search);
- if (urlParams.has('n', "0")) {
- n_create = 0;
- } else {
- n_create = Number(urlParams.get('nwalk')) || 3;
- }
-
- // create initial walkers of every color
- for (var i = 0; i < n_create; i++) {
- create_random_walker();
- }
-}
-
-// check if the trails array has a position.
-// return index if found, or null if not.
-function trails_find_position(row, col) {
- for (var i = 0; i < trails.length; i++) {
- var t = trails[i];
- if (t.row === row && t.col === col) {
- return i;
- }
- }
- return null;
+function init() {
+ document.addEventListener('mousemove', follow_mouse)
+ //setInterval(epic_physics, 500);
}
// update and draw all trails in the array
-function update_trails() {
- // for all existing trails, make them darker
- for (var i = 0; i < trails.length; i++) {
- var darker = tweak_color_luminance(trails[i].color, -0.1);
- trails[i].color = darker;
+function follow_mouse(event) {
+ // get the mouse position
+ var mouse_x = event.clientX
+ var mouse_y = event.clientY
- // delete any trails with 0 for first digit of RGB
- // (think of them as near-black)
- // e.g. #050500
- 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");
+ // convert screen coordinates to grid coordinates
+ var grid_x = (mouse_x - grid_margin - offset_h).div(grid_size);
+ var grid_y = (mouse_y - grid_margin - offset_v).div(grid_size);
- // delete the item from the array
- trails.splice(i, 1);
- }
- }
-
- // 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);
- }
+ // draw a square there
+ draw_grid_square(grid_y, grid_x, 'white');
}
// update and draw all walkers in the array
@@ -216,20 +114,19 @@ function fix_grid_size() {
canvas.height = window.innerHeight;
// update all the globals we're using too
- 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);
+ n_rows = canvas.height.div(grid_size);
+ n_cols = canvas.width.div(grid_size);
+ offset_h = (canvas.width - (grid_size * n_cols)).div(2);
+ offset_v = (canvas.height - (grid_size * n_rows)).div(2);
}
// draw on the canvas a grid square of that color
function draw_grid_square(row, col, color) {
- var margin = 4;
- var pos_h = offset_h + (cell_size * col) + margin;
- var pos_v = offset_v + (cell_size * row) + margin;
+ var pos_h = offset_h + (grid_size * col) + grid_margin;
+ var pos_v = offset_v + (grid_size * row) + grid_margin;
ctx.fillStyle = color;
- ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - margin);
+ ctx.fillRect(pos_h, pos_v, grid_size - grid_margin, grid_size - grid_margin);
}
/****************************************************************************
@@ -239,7 +136,7 @@ function draw_grid_square(row, col, color) {
// "make sure to eat up your globals honey, they're good for you"
// find the canvas and set its initial size
-var canvas = document.getElementById("walker-canvas")
+var canvas = document.getElementById("grid-canvas")
var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
@@ -247,27 +144,14 @@ canvas.height = window.innerHeight;
// set up a handler so the grid gets fixed whenever the window resizes
window.addEventListener('resize', fix_grid_size);
-// find the UI buttons and give them click handlers to activate our functions
-document
- .getElementById("button-create-walker")
- .addEventListener("click", create_random_walker);
-document
- .getElementById("button-destroy-walker")
- .addEventListener("click", destroy_last_walker);
-document
- .getElementById("button-reset-walkers")
- .addEventListener("click", destroy_all_walkers);
-
// compute the initial rows and columns
-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);
+var grid_size = 22;
+var grid_margin = 4;
+var n_rows = canvas.height.div(grid_size);
+var n_cols = canvas.width.div(grid_size);
+var offset_h = (canvas.width - (grid_size * n_cols)).div(2);
+var offset_v = (canvas.height - (grid_size * n_rows)).div(2);
-// set start position of walker and start the random walk
-var walkers = [];
-var walker_timers = [];
-var trails = []
-init_walk();
+// away we go!
+init();