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.<p>Also this might just be me but the little info icon wasn't immediately obvious to me<p>Handy little toy though, clean and easy enough to use
Very nice, a couple of things you could improve:<p>- Mention that the image processing is done in the browser (and therefore works offline), which is great for privacy.<p>- Memorise the settings from one session to the next, via localStorage, or in the URL with `nuqs` (disclaimer: I'm the author).<p>- Your links in /about (cobalt.tools and your personal domain) don't work.<p>- 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.
Thanks for the feedback!<p>I'll update the site to mention that image processing happens in the browser for better privacy.<p>Saving settings via localStorage or nuqs is a great idea—I’ll look into adding that.<p>I’ve already fixed the broken links in /about, thanks for pointing it out!<p>The black background suggestion makes sense to prevent white flashes; I’ll implement that.<p>Regards,
Developer :)
On many of the tools, it would personally be preferable if the overall luminosity of the photo remained the same after they're applied.<p>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)"<p>"Dust", especially, tends to severely darken the image on every setting other than "screen".<p>Generally, cool that it's done totally in browser, and better than what's available on a lot of phone apps.<p>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".
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.<p>I'll also check out Photoshop’s "Texturizer" for inspiration—adding a quick "canvas" effect sounds like a great idea.<p>Moreover, I am glad you like that it's fully browser-based!<p>Appreciate the insights :)
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.<p>If you're looking for stuff to add that might cool or add distinctiveness:<p>- 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.<p>[1] <a href="https://en.wikipedia.org/wiki/Perlin_noise" rel="nofollow">https://en.wikipedia.org/wiki/Perlin_noise</a><p>[2] Inigo Quilez Article on Perlin Noise: <a href="https://iquilezles.org/articles/gradientnoise/" rel="nofollow">https://iquilezles.org/articles/gradientnoise/</a><p>[3] 2D Implementation of Gradient Noise (Shadertoy): <a href="https://www.shadertoy.com/view/XdXBRH" rel="nofollow">https://www.shadertoy.com/view/XdXBRH</a><p>[4] 3D Implementation of Gradient Noise (Shadertoy): <a href="https://www.shadertoy.com/view/4dffRH" rel="nofollow">https://www.shadertoy.com/view/4dffRH</a><p>[5] <a href="https://en.wikipedia.org/wiki/Simplex_noise" rel="nofollow">https://en.wikipedia.org/wiki/Simplex_noise</a><p>[6] <a href="https://en.wikipedia.org/wiki/Wavelet_noise" rel="nofollow">https://en.wikipedia.org/wiki/Wavelet_noise</a><p>[7] Pixar Wavelet Noise Paper with Comparisons: <a href="https://graphics.pixar.com/library/WaveletNoise/paper.pdf" rel="nofollow">https://graphics.pixar.com/library/WaveletNoise/paper.pdf</a><p>- 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 <i>dramatically</i> easier to read and comprehend than most articles, the WP article is <i>super</i> math heavy and nearly pointless unless you're a math major.)<p>[8] <a href="https://en.wikipedia.org/wiki/Fractional_Brownian_motion" rel="nofollow">https://en.wikipedia.org/wiki/Fractional_Brownian_motion</a><p>[9] Book of Shaders, fBM: <a href="https://thebookofshaders.com/13/" rel="nofollow">https://thebookofshaders.com/13/</a><p>[10] Inigo Quilez Article on fBM: <a href="https://iquilezles.org/articles/fbm/" rel="nofollow">https://iquilezles.org/articles/fbm/</a><p>[11] fBM Impelementation (Shadertoy): <a href="https://www.shadertoy.com/view/WsV3zz" rel="nofollow">https://www.shadertoy.com/view/WsV3zz</a><p>- 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...<p>[12] <a href="https://iquilezles.org/articles/warp/" rel="nofollow">https://iquilezles.org/articles/warp/</a><p>[13] Animated Domain Warping Implementation (Shadertoy): <a href="https://www.shadertoy.com/view/4s23zz" rel="nofollow">https://www.shadertoy.com/view/4s23zz</a><p>- 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]<p>[14] <a href="https://en.wikipedia.org/wiki/Colors_of_noise" rel="nofollow">https://en.wikipedia.org/wiki/Colors_of_noise</a><p>[15] <a href="https://en.wikipedia.org/wiki/White_noise" rel="nofollow">https://en.wikipedia.org/wiki/White_noise</a><p>[16] <a href="https://en.wikipedia.org/wiki/Pink_noise" rel="nofollow">https://en.wikipedia.org/wiki/Pink_noise</a><p>[17] <a href="https://en.wikipedia.org/wiki/Grey_noise" rel="nofollow">https://en.wikipedia.org/wiki/Grey_noise</a>
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.<p>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.<p>Thanks again for the great resources!
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".)
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" ...<p>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.
"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!
> Maybe use "Load" and "Save" ...<p>Nowadays, perhaps "Open" is a better choice than "Load"
That's neat, I like the UI. Looks really extendible to other filters as well!
Was your motivation just for aesthetic reasons?<p>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.
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!
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.
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.
Could you try uploading a different image and see if the issue persists?
just to be clear, if the image processing happens in the browser, there is no "uploading", right, it's just loading into the browser?
i love small apps like these<p>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<p>also, i can't find the button to reset the canvas so i can upload again
Glad you like it!<p>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.<p>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!
I used this to add back a bit of 'personality' to a gig poster I upscaled. Thanks - it worked great!
I'm not a designer so pardon for asking. What's the purpose of adding noise to an image?
Noise is an artistic effect, it changes the look and feel.<p>A) It adds something in the blanked spaces.<p>B) improves visual sharpness of blurry images.<p>C) It works in video as well.<p>Also increases image file size and/or introduces compression artifacts.
No worries! So, noise adds texture, reduces banding, hides artifacts, and gives images a vintage or organic feel.<p>It’s a small touch, but it can make images look more natural and visually appealing!
Can it add 'grain' to shape fills in svg?
The UI looks clean and easy to use!
Hey, nice project. It was genuinely refreshing to just mess with some sliders on something interactive and no-bullshit. Cheers!
please add demo pics