[HN Gopher] Show HN: I built a tool to add noise texture to your...
___________________________________________________________________
Show HN: I built a tool to add noise texture to your images
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
Author : Rayid
Score : 34 points
Date : 2025-03-27 07:42 UTC (3 days ago)
(HTM) web link (noisetools.vercel.app)
(TXT) w3m dump (noisetools.vercel.app)
| franky47 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Can it add 'grain' to shape fills in svg?
| Rayid wrote:
| Yes, it works with SVG!
| kratosthegod wrote:
| The UI looks clean and easy to use!
| Rayid wrote:
| Glad you like it :)
| thierrydamiba wrote:
| 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 wrote:
| Could you try uploading a different image and see if the issue
| persists?
| fsckboy wrote:
| 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 wrote:
| Yes, that's correct! The image processing happens entirely
| in the browser, so nothing is uploaded--it's just loaded
| and processed locally.
| mttch wrote:
| 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 wrote:
| 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 wrote:
| 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 :)
| megadata wrote:
| I'm not a designer so pardon for asking. What's the purpose of
| adding noise to an image?
| Rayid wrote:
| 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 wrote:
| It can also massively increase the file size of the image,
| sometimes that can be relevant.
| escapecharacter wrote:
| 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.
| jcynix wrote:
| 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.
___________________________________________________________________
(page generated 2025-03-30 23:01 UTC)