Wiggly Line Canvas
const canvas = document.body.appendChild(
document.createElement('canvas')
);
const c = canvas.getContext('2d');
document.body.style.margin = 0;
function resize() {
canvas.width = innerWidth;
canvas.height = innerHeight;
}addEventListener('resize', resize);
resize();
const PAD = 50;
const RAD = 2;
const SPEED = 20;
const TWO_PI = Math.PI * 2;
let mode = 'draw';
let t = Math.random() * TWO_PI,
x = innerWidth / 2,
y = innerHeight / 2,
vx = 0, vy = 0, ta = 0;
function loop() {
for (var i = 0; i < SPEED; i++) {
t = Math.sin(ta) * TWO_PI;
vx = RAD * Math.cos(t);
vy = RAD * Math.sin(t);
ta += Math.random() * 0.1 - 0.05;
x += vx;
y += vy;
if (Math.random() < 0.005) {
mode = 'no draw';
} else if (Math.random() < 0.005) {
mode = 'draw';
}if (mode === 'draw') {
c.fillStyle = 'red';
c.fillRect(x, y, 2, 2);
}if (x < -PAD) {
x = innerWidth + PAD;
} else if (x > innerWidth + PAD) {
x = -PAD;
}if (y < -PAD) {
y = innerHeight + PAD;
} else if (y > innerHeight + PAD) {
y = -PAD;
}}requestAnimationFrame(loop);
}loop();
Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.
