canvas {
overflow: hidden !important;
}
const MIN_STEPS = 3;
const MAX_STEPS = 24;
const DEFAULT_MOVES = {
x: 0,
y: 0,
};
let walker;
const generateRandom = (x = 1) => round(random(x * -1000, x * 1000) / 1000);
class Walker {
constructor() {
this.moves = DEFAULT_MOVES;
this.steps = random(MIN_STEPS, MAX_STEPS);
this.counter = 0;
this.setRandom();
this.x = width / 2;
this.y = height / 2;
this.color = [random(0, 255), random(0, 255), random(0, 255)];
if (lightness(color(...this.color)) > 50) {
background('#000');
}
}
getMoves() {
return {
x: random(0, mouseX < this.x ? -1 : 1),
y: random(0, mouseY < this.y ? -1 : 1),
};
}
setMoves(newMoves) {
this.moves = newMoves;
}
setRandom() {
this.random = {
x: Math.min(1, Math.max(-1, generateRandom() + this.moves.x)),
y: Math.min(Math.max(-1, generateRandom() + this.moves.y)),
color: [
generateRandom(random(0, 100)),
generateRandom(random(0, 100)),
generateRandom(random(0, 100)),
],
steps: random(MIN_STEPS, MAX_STEPS),
};
}
getColor() {
return [
this.color[0] + this.random.color[0],
this.color[1] + this.random.color[1],
this.color[2] + this.random.color[2],
];
}
render() {
const strokeColor = color(...this.getColor());
stroke(strokeColor);
point(this.x, this.y);
}
step() {
this.x = constrain(this.x + this.random.x, 0, width - 1);
this.y = constrain(this.y + this.random.y, 0, height - 1);
this.counter += 1;
if (this.counter >= this.steps) {
this.counter = 0;
this.setRandom();
}
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
walker = new Walker();
}
function draw() {
walker.setMoves(walker.getMoves());
walker.step();
walker.render();
}
View Compiled
This Pen doesn't use any external CSS resources.