wispy flint
To create fog of war I needed to "cut out" circles in a 2d grid of tiles and outline their perimeter with half shroud shading at the same time, almost in realtime. This code could also be modified to draw circles in a pixel array, for example. I doubt you'll find anything faster in native javascript. Code not shown is d3-quadtree which is my structure for storing the fog of war tiles for optimised region rendering, and the code even avoids arrays by directly inserting into the quadtree. Obviously you could just set an array reference instead of adding to the quadtree.
fillCircle(centerX: number, centerY: number, radius: number) {
// since adding to the quadtree is fast - up to around O(log n), we brute force fill the circle
// without even needing to use Math.sqrt() by overdrawing slightly.
const radiusSq = radius * radius;
for (let y = -radius; y <= radius; y++) {
const yy = y * y;
for (let x = -radius; x <= radius; x++) {
const xx = x * x;
// fill
if (xx + yy < radiusSq + radius) {
this.quadTree.add({
tileX: centerX + x,
tileY: centerY + y,
fog: FogVisibility.Visible
})
}
// perimeter (approximate bresenham)
if (xx + yy > radiusSq - radius && xx + yy < radiusSq + radius) {
this.quadTree.add({
tileX: centerX + x,
tileY: centerY + y,
fog: FogVisibility.Explored
})
}
}
}
}
unkempt rover