RITM Generator (0.48)
Hey guys!
I've been working on one generative tool for a while now that might be of interest to both web and graphic designers as well as anyone curious about generative design in particular 🙂
It's an interactive web-based procedural program called RITM designed to render all sorts of wavelike visual images that can be captured and saved as animation loops and graphics stills directly from the generator. The program is written in Processing and uses a Simplex-based noise algorithm to generate the graphics.
I've put together a series of screen recordings with explanations to show some of the generator functionality and features:
Canvas Section
Well, it's obvious that the generator has a function of changing the size of the canvas containing the generated graphics. The program also provides a multiplication parameter for recording large canvas sizes.
There is also a control for shifting the wave horizontally and vertically, while the vertical offset allows it to cover the entire canvas space with the pattern.
Noise Section
The next part is about the heart of the program - Noise. Well, it's pretty hard to explain, since it's much easier to figure out what's going on just by turning the knobs 😂
Anyway, the generator is based on five core interactive parameters that impact the noise algorithm:
Wave Intensity (Affects the amplitude of the wave)
Wave Quantity (Number of slices that make up the wave)
Noise Harmony (Affects how uniform the waves become)
Horizontal Frequency (Affects horizontal roughness/flatness)
Noise Quality (Noise density, affects the smoothness of waves)
Changes in every parameter impact the others, so here's much to play around with.
Palette Section
The current version offers a selection of several dozen palettes available to use. I plan to make it possible to upload custom color palettes, and maybe even go nuts and create a palette generator in addition 😅
The colors are randomly applied to waves from the palette. You can also choose either solid fill or gradient mode, which blends two colors in the same wave.
Background Section
The background section has three options to choose from:
- Transparent mode (intended for recording videos/images without a backdrop)
- Solid fill (A single color selection)
- Gradient Fill (Two colors to choose from, respectively)
Gradient mode also includes the direction controls of the gradient.
Line/Dash Section
It could be easily called my favorite section 😊 The program also has the ability to generate waves in the form of lines, which can be used in combination with a fills mode or as an isolated version.
But in my opinion, the most exciting thing happens when you turn on the dash mode. There is plenty of space for you to play around it by controlling line thickness, dash length, and dash spacing. These dot moves look absolutely stunning!
Loop Section
In this section, you can specify the speed of the animation and its duration - from 1 to 60 seconds. There's a wide choice of formats (WebM / MP4 / GIF / PNG) for recording and saving the output.
Also, the speed of rendering does not affect the quality of the recording (in case of the animation lags), thanks to the fantastic library p5.capture, which records animation at a fixed frame rate (i.e. not in real-time).
Phew, that's about it for now 🙌
There are a couple more ideas for implementation, but I'll not reveal all the cards, there is already enough stuff to explore once the generator will be released.
I can't yet announce the exact release date, as there are still questions about the license and especially the deployment of the generator on the site. These are challenging issues for me as I'm not a developer 😅
Stay tuned and have fun, guys! ❤️
