Infinite specks
The following technique generates an infinite scroll speck field (Though not truly infinite since JavaScript employs doubles which have a limited range, the size of the scroll area spans from Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER pixels in width and height)
This method produces a random set of specks, with each speck having an x and y modulo value that is at least the size of the canvas.
An example of obtaining the speck's x position and checking if it is visible:
const mod = speck.mx; // modulo > canvas.width + DOT_SIZE
const x = ((speck.x - origin.x) % mod + mod) % mod - HALF_DOT_SIZE;
const visible = x >= -HALF_DOT_SIZE && x < canvas.width + HALF_DOT_SIZE;
Perform this procedure for both x and y as shown in the sample code snippet within the function drawDots
As a result, each speck is randomly repeated, creating an almost infinite, non-repeating pattern of specks when combined together.
This approach works effectively for a fixed-size canvas but fails if the canvas undergoes changes such as zooming in or out.
Example
Key constants utilized:
DOT_PER_PIXEL: Denotes the density of specks
Note: This value should be kept small as the canvas can accommodate millions of pixels. The value used in the sample is 1 speck per 10,000 pixels. Since the speck pattern is random, this serves as an approximation.
The total number of specks required to maintain that density while panning is automatically computed;
DOT_SIZE: Represents the size of the speck necessary to prevent specks from appearing and disappearing at the edges.
In the provided example, scrolling is achieved by shifting the origin. The origin moves in a direction and at a speed that varies over time.
requestAnimationFrame(mainLoop);
const ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
const DOT_SIZE = 4, HALF_DOT_SIZE = DOT_SIZE * 0.5;
const rnd = (min, max) => (max - min) * Math.random() + min;
const lerp = (a, b, u) => (b - a) * u + a;
const DOTS_PER_PIXEL = 2 / 10000; // WARNING dots per pixel should be much smaller than 1
var dir = 0; // Origin movement dir and speed
var speed = 1;
const origin = {x: 0, y: 0}; // Any start pos will do
const dots = [];
const resized = (() => {
var maxDistBetween;
var minDistBetween;
var dotsPerCanvas;
var dotCount;
function createDots(count) {
const Dot = () => ({
x: rnd(-HALF_DOT_SIZE, maxDistBetween),
y: rnd(-HALF_DOT_SIZE, maxDistBetween),
mx: rnd(minDistBetween, maxDistBetween),
my: rnd(minDistBetween, maxDistBetween),
});
while (count-- > 0) { dots.push(Dot()); }
}
return () => {
width = innerWidth;
height = innerHeight;
canvas.width = width;
canvas.height = height;
ctx.strokeStyle = "#FFF";
ctx.fillStyle = "#FFF";
maxDistBetween = Math.max(width + DOT_SIZE, height + DOT_SIZE) * 2;
minDistBetween = maxDistBetween * 0.6; // scale must be > 0.5
dotsPerCanvas = width * height * DOTS_PER_PIXEL;
dotCount = ((maxDistBetween * maxDistBetween) / ((width + DOT_SIZE) * (height + DOT_SIZE))) * dotsPerCanvas | 0;
dots.length = 0;
createDots(dotCount)
}
})();
const updateOrigin = (() => {
var turnFrom = 0;
var turnTo = 0;
var speedFrom = 0;
var speedTo = 0;
var timeFrom = 0;
var timeTo = 0;
return time => {
if (timeTo < time) {
timeFrom = time;
timeTo = time + rnd(2000, 5000);
turnFrom = turnTo;
speedFrom = speedTo;
turnTo += rnd(-1, 1);
speedTo = rnd(5, 10);
}
const u = (time - timeFrom) / (timeTo - timeFrom);
dir = lerp(turnFrom, turnTo, u);
speed = lerp(speedFrom, speedTo, u);
origin.x += Math.cos(dir) * speed;
origin.y += Math.sin(dir) * speed;
}
})();
function drawDots(origin, dots) {
ctx.beginPath();
for (const dot of dots) {
const x = ((dot.x - origin.x) % dot.mx + dot.mx) % dot.mx - HALF_DOT_SIZE;
if (x > -HALF_DOT_SIZE && x < width + HALF_DOT_SIZE) {
const y = ((dot.y - origin.y) % dot.my + dot.my) % dot.my - HALF_DOT_SIZE;
if (y > -HALF_DOT_SIZE && y < height + HALF_DOT_SIZE) {
ctx.rect(x - HALF_DOT_SIZE, y - HALF_DOT_SIZE, DOT_SIZE, DOT_SIZE);
}
}
}
ctx.fill();
}
function mainLoop(time) {
if (width !== innerWidth || height !== innerHeight) { resized() }
ctx.clearRect(0, 0, width, height);
updateOrigin(time);
drawDots(origin, dots);
requestAnimationFrame(mainLoop);
}
body { background: #000; padding: 0px; margin: 0px; }
canvas {
position: absolute;
left: 0px;
top: 0px;
padding: 0px;
margin: 0px;
}
<canvas id="canvas" width="512" height="512"></canvas>