blue-noise.js

Free JS implementation of Void and Cluster method by Robert Ulichney and other methods

I went around the internet to find a Void and Cluster JS implementation but there seems to be not many
Ethan Shulman did implement Void and Cluster but he didn't put a clear license or legal notice so I can't use his
Kinda devastated so I implement Void and Cluster myself with my optimization skills

Free blue noise texture and raw data is at the bottom of README

How to use

Linking the required scripts in HTML, the utils is mandatory

<script src="<path to script>/blue-noise-utils.js"></script>
<script src="<path to script>/blue-noise-float64.js"></script>

To generate a blue noise texture(32 Bits Float), simply run

blueNoiseFloat64.extendedVoidAndCluster(
    width,
    height,
    sigma,
    candidateMethodSigma,
    density,
    null, // custom kernel
)

It will return a 2D flattened array, it's values ranging from 0 to (width * height)

──────────

Comparing mine, Atrix256 and Ethan Shulman Void and Cluster output
The results is from 5905481bf29252a04ab397ca017b680d6fd59cd6 Generating time may vary

Mine

Float 64
Algorithm: Extended Void and Cluster
Sigma radius multiplier: 15
Initial sigma scale: 0.4
Sigma: 1.9
Density: 0.95
40531.19999999972ms

Atrix256's

Sigma: 1.9?
Density: 0.1
400.2s

Ethan Shulman's

Sigma: 2 Density: 0.1 168.78s

My implement completely beats Atrix256 and Ethan Shulman implementation in generate time while the quality is similar to Atrix256's

Demo for you guys!
901d3.github.io/blue-noise.js/demo/float64

Free blue noise texture and raw data
github.com/901D3/blue-noise.js/tree/main/out

Check out the source code!
github.com/901D3/blue-noise.js

References

cv.ulichney.com/papers/1993-void-cluster.pdf
blog.demofox.org/2019/06/25/generating-blue-noise-textures-with-void-and-cluster
momentsingraphics.de/BlueNoise.html
xaloez.com/o/bluenoise