Hacker News

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

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

37 comments

jedimastert•1d
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•1d
  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 :)
franky47•1d
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•1d
  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 :)
araes•1d
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•1d
  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•23h
    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
    [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
    [16] https://en.wikipedia.org/wiki/Pink_noise
    [17] https://en.wikipedia.org/wiki/Grey_noise
    - Rayid•23h
      You're right—this tool is designed for people who may not have a background in design and just want a quick, accessible way to add noise effects without expensive software. Adding too many features (as you suggested earlier) could make it more complex for casual users to use.
      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!
- mcdeltat•1d
  It'd be good to know what colour space the effects are done in and how the blending modes affect that. I guess this is not targeted at people who are pedantic about colour science but I am a sucker for it. (Also if you can come up with a methodology that follows physical light properties then you may not need so many options, it will look good "by default".)
jcynix•1d
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.
- Rayid•23h
  "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!
- jimsmart•1d
  > Maybe use "Load" and "Save" ...
  Nowadays, perhaps "Open" is a better choice than "Load"
indie_architect•3h
That's neat, I like the UI. Looks really extendible to other filters as well!
escapecharacter•1d
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•23h
  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!
seanvelasco•18h
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•18h
  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!
thierrydamiba•1d
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.
- mttch•1d
  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.
- Rayid•1d
  Could you try uploading a different image and see if the issue persists?
  - fsckboy•1d
    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•1d
      Yes, that's correct! The image processing happens entirely in the browser, so nothing is uploaded—it's just loaded and processed locally.
ramblin_prose•1d
I used this to add back a bit of 'personality' to a gig poster I upscaled. Thanks - it worked great!
- Rayid•23h
  Glad it helped bring back some personality to your poster. Thanks for trying it out!
megadata•1d
I'm not a designer so pardon for asking. What's the purpose of adding noise to an image?
- MoonGhost•1d
  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.
- Rayid•1d
  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•1d
    It can also massively increase the file size of the image, sometimes that can be relevant.
    - Rayid•14h
      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.
billfruit•1d
Can it add 'grain' to shape fills in svg?
- Rayid•1d
  Yes, it works with SVG!
kratosthegod•1d
The UI looks clean and easy to use!
- Rayid•1d
  Glad you like it :)
nighthawk454•1d
Hey, nice project. It was genuinely refreshing to just mess with some sliders on something interactive and no-bullshit. Cheers!
- Rayid•23h
  Thanks! Glad you enjoyed it. I wanted to keep it simple and fun to use—appreciate the kind words!
stuart73547373•1d
please add demo pics
- Rayid•23h
  I’ll soon add some demo images. Thanks for the suggestion!