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 none or less
Ethan Shulman did implement Void and Cluster but he default to “All Rights Reserved” so i can’t use his implement
Kinda devastated so i implement Void and Cluster myself with my optimization skills
──────────
How to use
Linking the required scripts in HTML
<!--the utilities script is required for 3 other scripts-->
<script src="<path to script>/blue-noise-utils.js"></script>
<!--16 Bits Float version gives worst result but less memory usage-->
<script src="<path to script>/blue-noise-float16.js"></script>
<!--32 Bits Float version balances between quality and memory usage-->
<script src="<path to script>/blue-noise-float32.js"></script>
<!--64 Bits Float version gives best result but consumes more memory-->
<script src="<path to script>/blue-noise-float64.js"></script>
To generate a blue noise texture(32 Bits Float), simply run
blueNoiseFloat32.voidAndCluster(
width,
height,
sigma,
customKernel,
density,
candidateFillingRatio,
initArray,
verbose
)
It will return a 2D flattened array, it’s values ranging from 0 to (width * height)
──────────
Comparing mine, Demofox and Ethan Shulman Void and Cluster output
My result is from cb347ace96914194b7f2671804e16408f930a4cc. The algorithm might varies in the future
Mine
256x256, all phases sigma = 1, all phases kernel radius = 8, PDS radius x and y = 5, PDS K value = 30
256x256, all phases sigma = 2, all phases kernel radius = 18, PDS radius x and y= 5, PDS K value = 30, 56.87109999999963s
256x256, phase 1 phase 2 sigma = 2,5, phase 3 sigma = 1.5, phase 1 phase 2 kernel radius = 16, phase 3 kernel radius = 4, all PDS radius = 5, PDS K value = 30, 58.86489999999944s
From Demofox
256x256, 400.2s
Ethan Shulman
256x256, sigma = 2, density = 0.1, 168.78s
My implement completely beats Demofox and Ethan Shulman implementation in generate time
Demo for you guys!
github.com/901D3/blue-noise.js/demo
Check out the source code!
github.com/901D3/blue-noise.js
References
blog.demofox.org/2019/06/25/generating-blue-noise-textures-with-void-and-cluster