9 ms·

Show HN: I built a tool to add noise texture to your images

53 points by Rayid 2y ago

I'm excited to introduce Noise Tools – a simple yet powerful tool that lets you effortlessly add noise textures to your images. Whether you're a designer, artist, or just experimenting with aesthetics, Noise Tools helps you enhance your visuals with just a few clicks. 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

deleted 2y ago
[deleted]
franky47 2y ago
Very nice, a couple of things you could improve: - 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.
- Rayid 2y ago
  Sorry, I just realized you're the author of nuqs—it's a privilege to get a suggestion directly from you! I'll definitely consider adding it in my webapp. Thanks again!"
- Rayid 2y ago
  Thanks for the feedback! 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 :)
jedimastert 2y ago
If you're looking for this to be a tool to be shared around and use by other people (and that's definitely a big if, I know that's not always a goal) I would HIGHLY recommend having sample pictures at the ready and immediately accessible. 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
- Rayid 2y ago
  Thanks for the feedback! 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 :)
billfruit 2y ago
Can it add 'grain' to shape fills in svg?
- Rayid 2y ago
  Yes, it works with SVG!
kratosthegod 2y ago
The UI looks clean and easy to use!
- Rayid 2y ago
  Glad you like it :)
thierrydamiba 2y ago
Just fyi-doesn’t work for me on iPhone using safari. I can upload a file, but then I get a really long blank div. Then when I download there is no image.
- Rayid 2y ago
  Could you try uploading a different image and see if the issue persists?
  - fsckboy 2y ago
    just to be clear, if the image processing happens in the browser, there is no "uploading", right, it's just loading into the browser?
    - Rayid 2y ago
      Yes, that's correct! The image processing happens entirely in the browser, so nothing is uploaded—it's just loaded and processed locally.
- mttch 2y ago
  Same for me, I had to press the options button on iOS when uploading and set the format to ‘most compatible’. It now works but the aspect ratio of the image is squashed.
araes 2y ago
On many of the tools, it would personally be preferable if the overall luminosity of the photo remained the same after they're applied. 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".
- Rayid 2y ago
  Thanks for the detailed feedback! I see what you mean about maintaining overall luminosity—I'll look into adjusting the noise effects to preserve brightness better. "Dust" darkening too much is a great point, and I'll look into it as well. 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 :)
  - araes 2y ago
    Glad it was helpful feedback. Seems like a noise tool for somebody who wants a quick noise effect, maybe without the ability to afford the full cost for something like Photoshop. 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 https://en.wikipedia.org/wiki/Perlin_noise [2] Inigo Quilez Article on Perlin Noise: https://iquilezles.org/articles/gradientnoise/ https://iquilezles.org/articles/gradientnoise/ [3] 2D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/XdXBRH https://www.shadertoy.com/view/XdXBRH [4] 3D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/4dffRH https://www.shadertoy.com/view/4dffRH [5] https://en.wikipedia.org/wiki/Simplex_noise https://en.wikipedia.org/wiki/Simplex_noise [6] https://en.wikipedia.org/wiki/Wavelet_noise https://en.wikipedia.org/wiki/Wavelet_noise [7] Pixar Wavelet Noise Paper with Comparisons: https://graphics.pixar.com/library/WaveletNoise/paper.pdf 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 https://en.wikipedia.org/wiki/Fractional_Brownian_motion [9] Book of Shaders, fBM: https://thebookofshaders.com/13/ https://thebookofshaders.com/13/ [10] Inigo Quilez Article on fBM: https://iquilezles.org/articles/fbm/ https://iquilezles.org/articles/fbm/ [11] fBM Impelementation (Shadertoy): https://www.shadertoy.com/view/WsV3zz 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/ https://iquilezles.org/articles/warp/ [13] Animated Domain Warping Implementation (Shadertoy): https://www.shadertoy.com/view/4s23zz 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 https://en.wikipedia.org/wiki/Colors_of_noise [15] https://en.wikipedia.org/wiki/White_noise https://en.wikipedia.org/wiki/White_noise [16] https://en.wikipedia.org/wiki/Pink_noise https://en.wikipedia.org/wiki/Pink_noise [17] https://en.wikipedia.org/wiki/Grey_noise https://en.wikipedia.org/wiki/Grey_noise
megadata 2y ago
I'm not a designer so pardon for asking. What's the purpose of adding noise to an image?
- Rayid 2y ago
  No worries! So, noise adds texture, reduces banding, hides artifacts, and gives images a vintage or organic feel. It’s a small touch, but it can make images look more natural and visually appealing!
  - alpaca128 2y ago
    It can also massively increase the file size of the image, sometimes that can be relevant.
    - Rayid 2y ago
      You're right! Adding noise can significantly increase file size, especially with high-intensity effects. However, I'm actively working on optimizing the output to reduce file size while maintaining quality.
- MoonGhost 2y ago
  Noise is an artistic effect, it changes the look and feel. 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.
indie_architect 2y ago
That's neat, I like the UI. Looks really extendible to other filters as well!
- Rayid 2y ago
  Thanks! Glad you like it! Yeah, it's built to be extendable, so I can easily add more tools in the future.
escapecharacter 2y ago
Was your motivation just for aesthetic reasons? 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.
- Rayid 2y ago
  Mostly aesthetic. However, this tool can definitely help you! It applies various types of noise, which could be useful for synthetically worsening images in your pipeline. Let me know if you need any specific adjustments!
jcynix 2y ago
Nice one. I normally do jobs like this with ImageMagick but your tool work fine. As your tool runs inside the browser, as you say, the notions of "Upload" and "Download" aren't the best ones, as these suggest actions with other computers. Maybe use "Load" and "Save" ... 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.
- jimsmart 2y ago
  > Maybe use "Load" and "Save" ... Nowadays, perhaps "Open" is a better choice than "Load"
- Rayid 2y ago
  "Open" does feel more intuitive than "Load" nowadays --I’ll consider updating that. And adding effect intensity to filenames is a great idea for easier comparison. Thanks for the feedback!
stuart73547373 2y ago
please add demo pics
- Rayid 2y ago
  I’ll soon add some demo images. Thanks for the suggestion!
nighthawk454 2y ago
Hey, nice project. It was genuinely refreshing to just mess with some sliders on something interactive and no-bullshit. Cheers!
- Rayid 2y ago
  Thanks! Glad you enjoyed it. I wanted to keep it simple and fun to use—appreciate the kind words!
ramblin_prose 2y ago
I used this to add back a bit of 'personality' to a gig poster I upscaled. Thanks - it worked great!
- Rayid 2y ago
  Glad it helped bring back some personality to your poster. Thanks for trying it out!
seanvelasco 2y ago
i love small apps like these 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
- Rayid 2y ago
  Glad you like it! 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!

53 points by Rayid 2y ago

deleted 2y ago

[deleted]

franky47 2y ago

Very nice, a couple of things you could improve: - 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.

Rayid 2y ago
Sorry, I just realized you're the author of nuqs—it's a privilege to get a suggestion directly from you! I'll definitely consider adding it in my webapp. Thanks again!"
Rayid 2y ago
Thanks for the feedback! 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 :)

jedimastert 2y ago

If you're looking for this to be a tool to be shared around and use by other people (and that's definitely a big if, I know that's not always a goal) I would HIGHLY recommend having sample pictures at the ready and immediately accessible. 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

Rayid 2y ago
Thanks for the feedback! 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 :)

billfruit 2y ago

Can it add 'grain' to shape fills in svg?

Rayid 2y ago
Yes, it works with SVG!

kratosthegod 2y ago

The UI looks clean and easy to use!

Rayid 2y ago
Glad you like it :)

thierrydamiba 2y ago

Just fyi-doesn’t work for me on iPhone using safari. I can upload a file, but then I get a really long blank div. Then when I download there is no image.

Rayid 2y ago
Could you try uploading a different image and see if the issue persists?
- fsckboy 2y ago
  just to be clear, if the image processing happens in the browser, there is no "uploading", right, it's just loading into the browser?
  - Rayid 2y ago
    Yes, that's correct! The image processing happens entirely in the browser, so nothing is uploaded—it's just loaded and processed locally.
mttch 2y ago
Same for me, I had to press the options button on iOS when uploading and set the format to ‘most compatible’. It now works but the aspect ratio of the image is squashed.

araes 2y ago

On many of the tools, it would personally be preferable if the overall luminosity of the photo remained the same after they're applied. 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".

Rayid 2y ago
Thanks for the detailed feedback! I see what you mean about maintaining overall luminosity—I'll look into adjusting the noise effects to preserve brightness better. "Dust" darkening too much is a great point, and I'll look into it as well. 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 :)
- araes 2y ago
  Glad it was helpful feedback. Seems like a noise tool for somebody who wants a quick noise effect, maybe without the ability to afford the full cost for something like Photoshop. 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 https://en.wikipedia.org/wiki/Perlin_noise [2] Inigo Quilez Article on Perlin Noise: https://iquilezles.org/articles/gradientnoise/ https://iquilezles.org/articles/gradientnoise/ [3] 2D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/XdXBRH https://www.shadertoy.com/view/XdXBRH [4] 3D Implementation of Gradient Noise (Shadertoy): https://www.shadertoy.com/view/4dffRH https://www.shadertoy.com/view/4dffRH [5] https://en.wikipedia.org/wiki/Simplex_noise https://en.wikipedia.org/wiki/Simplex_noise [6] https://en.wikipedia.org/wiki/Wavelet_noise https://en.wikipedia.org/wiki/Wavelet_noise [7] Pixar Wavelet Noise Paper with Comparisons: https://graphics.pixar.com/library/WaveletNoise/paper.pdf 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 https://en.wikipedia.org/wiki/Fractional_Brownian_motion [9] Book of Shaders, fBM: https://thebookofshaders.com/13/ https://thebookofshaders.com/13/ [10] Inigo Quilez Article on fBM: https://iquilezles.org/articles/fbm/ https://iquilezles.org/articles/fbm/ [11] fBM Impelementation (Shadertoy): https://www.shadertoy.com/view/WsV3zz 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/ https://iquilezles.org/articles/warp/ [13] Animated Domain Warping Implementation (Shadertoy): https://www.shadertoy.com/view/4s23zz 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 https://en.wikipedia.org/wiki/Colors_of_noise [15] https://en.wikipedia.org/wiki/White_noise https://en.wikipedia.org/wiki/White_noise [16] https://en.wikipedia.org/wiki/Pink_noise https://en.wikipedia.org/wiki/Pink_noise [17] https://en.wikipedia.org/wiki/Grey_noise https://en.wikipedia.org/wiki/Grey_noise

megadata 2y ago

I'm not a designer so pardon for asking. What's the purpose of adding noise to an image?

Rayid 2y ago
No worries! So, noise adds texture, reduces banding, hides artifacts, and gives images a vintage or organic feel. It’s a small touch, but it can make images look more natural and visually appealing!
- alpaca128 2y ago
  It can also massively increase the file size of the image, sometimes that can be relevant.
  - Rayid 2y ago
    You're right! Adding noise can significantly increase file size, especially with high-intensity effects. However, I'm actively working on optimizing the output to reduce file size while maintaining quality.
MoonGhost 2y ago
Noise is an artistic effect, it changes the look and feel. 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.

indie_architect 2y ago

That's neat, I like the UI. Looks really extendible to other filters as well!

Rayid 2y ago
Thanks! Glad you like it! Yeah, it's built to be extendable, so I can easily add more tools in the future.

escapecharacter 2y ago

Was your motivation just for aesthetic reasons? 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.

Rayid 2y ago
Mostly aesthetic. However, this tool can definitely help you! It applies various types of noise, which could be useful for synthetically worsening images in your pipeline. Let me know if you need any specific adjustments!

jcynix 2y ago

Nice one. I normally do jobs like this with ImageMagick but your tool work fine. As your tool runs inside the browser, as you say, the notions of "Upload" and "Download" aren't the best ones, as these suggest actions with other computers. Maybe use "Load" and "Save" ... 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.

jimsmart 2y ago
> Maybe use "Load" and "Save" ... Nowadays, perhaps "Open" is a better choice than "Load"
Rayid 2y ago
"Open" does feel more intuitive than "Load" nowadays --I’ll consider updating that. And adding effect intensity to filenames is a great idea for easier comparison. Thanks for the feedback!

stuart73547373 2y ago

please add demo pics

Rayid 2y ago
I’ll soon add some demo images. Thanks for the suggestion!

nighthawk454 2y ago

Hey, nice project. It was genuinely refreshing to just mess with some sliders on something interactive and no-bullshit. Cheers!

Rayid 2y ago
Thanks! Glad you enjoyed it. I wanted to keep it simple and fun to use—appreciate the kind words!

ramblin_prose 2y ago

I used this to add back a bit of 'personality' to a gig poster I upscaled. Thanks - it worked great!

Rayid 2y ago
Glad it helped bring back some personality to your poster. Thanks for trying it out!

seanvelasco 2y ago

i love small apps like these 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

Rayid 2y ago
Glad you like it! 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!