I love using web generated graphics as a component of my art. The cross over between technology, coding, and art just makes me all warm and fuzzy inside, even though I’m not a programmer. And there are some things that Photoshop just can’t do or it isn’t easily achievable through Photoshop. These web-based tools are great for getting a really specific effect without all of the trial and error that goes with coding, Photoshop, or manually glitching.
I typically use these tools to create assets to use within a larger project, but you can also use these to generate your final piece of art work. Here are some of my favorite tools that I’ve found around the internet.
I think the images pretty clearly show the effect as well though. This effect can produce really interesting results, and I think it is a very distinct look. I’ve found that this tool can be a bit hard to work with when you are turning the graphic and zooming in and out—it isn’t the most precise. That said, I haven’t found any other tool that gives this exact effect, and there are some serious bonus points for all of the control options and the ability to manipulate large images.
Here are a couple of images I have created using this tool. The first one shows the effect it has on a photo and the second one is an example where I used the Rutt-Etra-Izer on the original image and then further manipulated it in Photoshop.
This one is a recent discovery of mine. It was also made by Felix Turner, who designed and developed the Rutt-Etra Izer. It is a tool for adding glitch effects to your photos. The interface is really straight forward and easy to use. I really like that it animates your photos, and you can generate a .gif straight from the website.
I made the following .gif using this tool:
I love triangles (I ♥ ∆), by Igor Borisenko, is a great tool for making any image into a low poly graphic. You download the source files onto your computer and then you can open it in your browser. It is a quick and dirty way to generate a custom low poly pattern. This tool exports your final image as a .svg (scalable vector graphic) which is awesome because you can throw it into Illustrator or another vector based program and manipulate it further.
I used this generator on a recent design project. I used the low poly as a starting point for the mountain pattern in a T Shirt design. After generating the low poly image, I imported the .svg into Illustrator and converted it into a an outline and came up with the following assets.
There are a lot of pixel sorting programs out there, but this one by Larix Kortbeek is by far my favorite. It is easy to use, there is a lot of control over your end result, and it is all so satisfying to watch the pixels sort in ‘real time’ when you are playing around with the controls.
Here is a small project I was working on that shows the original image, the pixel sorted version (using the bitmap sorter), and then a composite of the two.
Three.js playground really is that, a playground for understanding webgl and three.js. Nick Briz, the creator of the project, refers to it as a ‘digital literacy artware’.
Essentially it is an interactive program that generates and animates 3D shapes (using webgl and three.js). It allows you to see and manipulate the code in real time so you can understand how the code is affecting the graphics.
Out of all of the tools, I think this one has the biggest learning curve, but Nick has a lot of documentation on it that will help you out. Even if you aren’t too interested in diving into the code it is just plain fun to experiment with, and there are a lot of happy accidents.
I used this tool to make the background of the image below, and then I overlayed the code using Photoshop.