Make the walker loop around when hitting edges
This commit is contained in:
parent
3c7ad70939
commit
85b1025d16
@ -14,32 +14,32 @@ window.onload = function() {
|
||||
|
||||
gui.add(controls, "step_time", 200, 2000).name("step time (ms)").step(1);
|
||||
gui.add(controls, "fadeout", 0, 20).name("time to fade (0 to disable").step(1);
|
||||
gui.add(controls, "color", 1, 50).name("which color the guy is").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);
|
||||
};
|
||||
|
||||
// colorArray source: https://gist.github.com/mucar/3898821
|
||||
var colorArray = [
|
||||
'#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
|
||||
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
|
||||
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
|
||||
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
|
||||
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
|
||||
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
|
||||
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
|
||||
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
|
||||
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
|
||||
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
|
||||
];
|
||||
|
||||
var controls = new(function() {
|
||||
this.step_time = 500;
|
||||
this.fadeout = 10;
|
||||
this.color = 1;
|
||||
})();
|
||||
this.color = "#FFB000";
|
||||
|
||||
this.restart_button = function() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
init_walk();
|
||||
}
|
||||
})()
|
||||
|
||||
|
||||
// Define a new mod function that behaves different on negatives.
|
||||
// now, (-1).mod(4) -> 3. not -1.
|
||||
// taken from https://stackoverflow.com/a/4467559, which itself took from elsewhere
|
||||
Number.prototype.mod = function (n) {
|
||||
"use strict";
|
||||
return ((this % n) + n) % n;
|
||||
};
|
||||
|
||||
function init_walk() {
|
||||
// Create array of walkers with set parameters, start walkers in center of canvas
|
||||
@ -49,7 +49,7 @@ function init_walk() {
|
||||
x_position: canvas.width / 2,
|
||||
y_position: canvas.height / 2,
|
||||
line_width: 1,
|
||||
colour: colorArray[i],
|
||||
color: controls.color,
|
||||
speed: 5,
|
||||
angle: Math.random() * 360,
|
||||
halt: false,
|
||||
@ -106,32 +106,16 @@ function get_nearest_angle(goal, angle_list) {
|
||||
var possible_directions = gen_angle_list(4);
|
||||
|
||||
|
||||
|
||||
function move_walker(walker, possible_directions) {
|
||||
// Update new random direction & update velocity of walker
|
||||
var new_angle = Math.random() * 360
|
||||
walker.x_position += walker.x_velocity
|
||||
walker.y_position += walker.y_velocity
|
||||
walker.x_position = (walker.x_position + walker.x_velocity).mod(canvas.width);
|
||||
walker.y_position = (walker.y_position + walker.y_velocity).mod(canvas.height);
|
||||
walker.angle = degrees_to_radians(get_nearest_angle(new_angle, possible_directions))
|
||||
walker.x_velocity = walker.speed * Math.cos(walker.angle)
|
||||
walker.y_velocity = walker.speed * Math.sin(walker.angle)
|
||||
}
|
||||
|
||||
function check_boundaries(canvas, walker) {
|
||||
// Checks if walker has collided with walls and stops walker
|
||||
if (walker.x_position >= canvas.width - walker.line_width || walker.x_position <= walker.line_width) {
|
||||
walker.x_velocity = 0;
|
||||
walker.y_velocity = 0;
|
||||
walker.halt = true
|
||||
}
|
||||
|
||||
if (walker.y_position >= canvas.height - walker.line_width || walker.y_position <= walker.line_width) {
|
||||
walker.x_velocity = 0
|
||||
walker.y_velocity = 0
|
||||
walker.halt = true;
|
||||
}
|
||||
}
|
||||
|
||||
function paint_canvas() {
|
||||
// Regenerate possible angle list
|
||||
possible_directions = gen_angle_list(4)
|
||||
@ -147,9 +131,8 @@ function paint_canvas() {
|
||||
var prev_y = current_walker.y_position
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(prev_x, prev_y)
|
||||
check_boundaries(canvas, current_walker);
|
||||
move_walker(current_walker, possible_directions);
|
||||
ctx.strokeStyle = current_walker.colour;
|
||||
ctx.strokeStyle = current_walker.color;
|
||||
ctx.lineWidth = current_walker.line_width;
|
||||
ctx.lineTo(current_walker.x_position, current_walker.y_position)
|
||||
ctx.stroke()
|
||||
|
Loading…
x
Reference in New Issue
Block a user