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
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".
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!
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.
- 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.)
- 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...
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.
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" ...
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!
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.
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!
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.
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
[16] https://en.wikipedia.org/wiki/Pink_noise
[17] https://en.wikipedia.org/wiki/Grey_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!
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!