shoe/random-walkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resize canvas & redraw grid every frame, not that bad

Browse Source
This commit is contained in:
shoe 2025-03-21 19:53:40 +00:00
parent ca540bc4fa
commit 0e30c58ec2
1 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
random-walkers.js
View File

@ -18,7 +18,7 @@ window.onload = function() {
gui.add(controls, "step_time", 200, 2000).name("step time ms").step(1); gui.add(controls, "step_time", 200, 2000).name("step time ms").step(1);
gui.add(controls, "fadeout", 0, 20).name("trail fadeout length (0 to disable)").step(1); 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.add(controls, "cell_size", 10, 100).name("cell size").step(1);
gui.addColor(controls, "color").name("guy color"); gui.addColor(controls, "color").name("guy color");
gui.add(controls, "restart_button").name("start again"); gui.add(controls, "restart_button").name("start again");
@ -29,7 +29,7 @@ window.onload = function() {
var controls = new(function() { var controls = new(function() {
this.step_time = 500; this.step_time = 500;
this.fadeout = 10; this.fadeout = 10;
this.cell_size = 30; this.cell_size = 22;
this.color = "#FFB000"; this.color = "#FFB000";
this.restart_button = function() { this.restart_button = function() {
@ -56,7 +56,9 @@ Number.prototype.mod = function (n) {
function init_walk() { function init_walk() {
// Draw a grid of boxes on the canvas // Draw a grid of boxes on the canvas
draw_grid(); setInterval(draw, 20);
/*
// Set default values for walker pos and empty the trail // Set default values for walker pos and empty the trail
// TODO: ACTUAL DEFAULT VALUE AT CENTER. // TODO: ACTUAL DEFAULT VALUE AT CENTER.
@ -78,7 +80,7 @@ function init_walk() {
walker.y_velocity = walker.speed * Math.sin(walker.angle) walker.y_velocity = walker.speed * Math.sin(walker.angle)
walker_array.push(walker) walker_array.push(walker)
} }
setInterval(paint_canvas, 20); */
} }
function move_walker(walker, possible_directions) { function move_walker(walker, possible_directions) {
@ -95,32 +97,19 @@ function move_walker(walker, possible_directions) {
* Drawing * * Drawing *
****************************************************************************/ ****************************************************************************/
function paint_canvas() { function draw() {
/* var oldwidth = ctx.canvas.width;
// Regenerate possible angle list var oldheight = ctx.canvas.height;
possible_directions = gen_angle_list(4) ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
// Loop through all walkers, moving & painting accordingly if (oldwidth !== ctx.canvas.width || oldheight != ctx.canvas.height) {
for (var i = 0; i < walker_array.length; i++) { console.log(`dimensions changed from ${oldwidth}x${oldheight} to ${ctx.canvas.width}x${ctx.canvas.height}`);
current_walker = walker_array[i];
// If walker hasn't hit the walls yet
if (!current_walker.halt) {
var prev_x = current_walker.x_position
var prev_y = current_walker.y_position
ctx.beginPath()
ctx.moveTo(prev_x, prev_y)
move_walker(current_walker, possible_directions);
ctx.strokeStyle = current_walker.color;
ctx.lineWidth = current_walker.line_width;
ctx.lineTo(current_walker.x_position, current_walker.y_position)
ctx.stroke()
ctx.closePath();
}
} }
*/
draw_grid();
// TODO CODE
} }
function draw_grid_square(row, col, color, offset) { function draw_grid_square(row, col, color, offset) {
@ -157,11 +146,9 @@ function draw_grid() {
* ON SCRIPT LOAD * * ON SCRIPT LOAD *
****************************************************************************/ ****************************************************************************/
// canvas starts with full width and height of its HTML element // find the canvas
var canvas = document.getElementById("walker-canvas") var canvas = document.getElementById("walker-canvas")
var ctx = canvas.getContext('2d') var ctx = canvas.getContext('2d')
ctx.canvas.width = document.getElementById("walker-canvas").clientWidth
ctx.canvas.height = document.getElementById("walker-canvas").clientHeight
// set start position of walker and start the random walk // set start position of walker and start the random walk
var walker_position = {x: 0, y: 0}; var walker_position = {x: 0, y: 0};