Why I built this? I often found myself needing high-quality noise textures for design projects but struggled to find a quick and easy solution. So, I built Noise Tools to make the process easy for everyone!
Features: Generate noise textures instantly Adjust intensity & styles No downloads or complicated settings
Would love to hear your thoughts! Try it out and let me know what you think.
Check it out here: noisetools.vercel.app
Also this might just be me but the little info icon wasn't immediately obvious to me
Handy little toy though, clean and easy enough to use
Adding sample pictures for easy access is a great idea—I’ll definitely consider that to improve usability.
Noted on the info icon! I’ll see if I can make it more noticeable.
Glad you found it clean and easy to use! Appreciate the suggestions :)
- Mention that the image processing is done in the browser (and therefore works offline), which is great for privacy.
- Memorise the settings from one session to the next, via localStorage, or in the URL with `nuqs` (disclaimer: I'm the author).
- Your links in /about (cobalt.tools and your personal domain) don't work.
- You might want to set the html,body background colour to black, to avoid flashes of white background in weird viewport sizes and when overscrolling.
I'll update the site to mention that image processing happens in the browser for better privacy.
Saving settings via localStorage or nuqs is a great idea—I’ll look into adding that.
I’ve already fixed the broken links in /about, thanks for pointing it out!
The black background suggestion makes sense to prevent white flashes; I’ll implement that.
Regards, Developer :)
Generally, all its going to result in is needing to re-brighten the photo back to some "normal" luminosity after the noise is applied. Brightness / Contrast in "image editor of choice (or financial availability)"
"Dust", especially, tends to severely darken the image on every setting other than "screen".
Generally, cool that it's done totally in browser, and better than what's available on a lot of phone apps.
Photoshop's "texturizer" from decades ago would be something else to possible look at. Making a quick "canvas" look to the image, and similar "noise".
I'll also check out Photoshop’s "Texturizer" for inspiration—adding a quick "canvas" effect sounds like a great idea.
Moreover, I am glad you like that it's fully browser-based!
Appreciate the insights :)
If you're looking for stuff to add that might cool or add distinctiveness:
- Noise Types: Looks like you're using White Noise, or possibly a 2D slice through 3D Perlin Noise. Adding the possibility for other noise types. 2D, 3D (2D slice), 4D (?, 2D slice) of Gradient/Perlin Noise [1][2][3][4], Simplex Noise [5], or Wavelet Noise [6][7] you can select between for the underlying noise function.
[1] https://en.wikipedia.org/wiki/Perlin_noise
[2] Inigo Quilez Article on Perlin Noise: https://iquilezles.org/articles/gradientnoise/
[3] 2D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/XdXBRH
[4] 3D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/4dffRH
[5] https://en.wikipedia.org/wiki/Simplex_noise
[6] https://en.wikipedia.org/wiki/Wavelet_noise
[7] Pixar Wavelet Noise Paper with Comparisons: https://graphics.pixar.com/library/WaveletNoise/paper.pdf
- Fractal Brownian Motion Noise (basically, layered factor of 2 noise functions of another type at 1/2 intensities) [8][9][10][11] (Inigo Quilez's article is dramatically easier to read and comprehend than most articles, the WP article is super math heavy and nearly pointless unless you're a math major.)
[8] https://en.wikipedia.org/wiki/Fractional_Brownian_motion
[9] Book of Shaders, fBM: https://thebookofshaders.com/13/
[10] Inigo Quilez Article on fBM: https://iquilezles.org/articles/fbm/
[11] fBM Impelementation (Shadertoy): https://www.shadertoy.com/view/WsV3zz
- Domain warping noise (noise that performs a distortion on the location where the noise is applied). [12][13] This time, the Inigo Quilez article is rather intimidating. However, it can also be used to make much simpler variations like glass ripple distortions, water droplets, waves, ect...
[12] https://iquilezles.org/articles/warp/
[13] Animated Domain Warping Implementation (Shadertoy): https://www.shadertoy.com/view/4s23zz
- Noise Colors (White noise, Pink noise, Brownian noise, Blue noise, Violet noise, Grey noise, Velvet noise, Green noise, Thermal Blackbody noise)[14][15][16][17]
[14] https://en.wikipedia.org/wiki/Colors_of_noise
[15] https://en.wikipedia.org/wiki/White_noise
I appreciate the breakdown of different noise types! Adding options like Perlin, Simplex, fBM, and domain warping could definitely enhance versatility. Noise color variations are also an interesting idea. I'll explore ways to integrate these while keeping the tool simple and user-friendly.
Thanks again for the great resources!
I'll will be adding tooltip to every control to clarify how the function works and how it impact the final result.
And as I experimented, I wanted to get different intensities of an effect to compare, but all generated images where named "noisy-image.png" ... it would be nice to have the amount generated in the names, e.g. "image-dust-30.jpg" or "image-film-45.jpg" to easily store them side by side and remember the variations applied.
Nowadays, perhaps "Open" is a better choice than "Load"
I’m asking because I’m in the midst of a computer vision project where I am testing an algorithm for robustness, and will start building out a synthetically worsened data pipeline.
just a feedback: app becomes super laggy when you try to edit a gif. if you do make a fix, can you share the solution here in the reply? i too struggle with it in some of my apps haha
also, i can't find the button to reset the canvas so i can upload again
The tool isn't optimized for GIFs—it's designed mainly for static images. That's likely why it gets laggy when editing GIFs. I might explore GIF support in the future, but for now, it's best suited for still images.
The reset option isn't available yet, so you'll need to reload the page for now. But I'll be adding a reset button in an upcoming update!
A) It adds something in the blanked spaces.
B) improves visual sharpness of blurry images.
C) It works in video as well.
Also increases image file size and/or introduces compression artifacts.
It’s a small touch, but it can make images look more natural and visually appealing!