Generative FUI technique.
Heavy GIF’s warning, wait until images fully loaded.
What is FUI?
For anyone who does not know, FUI stands for a fiction user interface, future user interface, etc. Usually used in movies or video-games to create hi-tech look or for visual storytelling. There are production companies that fully specialized in designing that kinda stuff. Long story short.
What I wanted to do?
Idea and concept were to do some experiments and try to create simple and easy to tweak tool for generation of abstract, visually complex fui designs from a few pre-made shapes.
Lets begin.
I’ve used Adobe illustrator for making these basic elements.
Then, to stay in one place I've used After Effects and Trapcode Particular plugin. Using these shapes as sprites spawned in flat box emitter we are getting something like this:
Adding two mirrors
You get the idea, right? Increasing density and applying more mirrors.
That’s kinda overkill, but can be used as bump and displacement maps e.g.
The same technique can be applied to circular shapes or segments with a common center, but instead of using box emitter we are using point.
Or slim long elements to generate flat ruler-like compositions.
For grids we can use Trapcode Form plugin and very simple sprites like dots, crosses, diamonds, numbers, etc.
Custom UV planes.
Now when we are finished with particles and mirrors, it’s time to more tricky stuff. I will not go here for a deep explanation of what UV-mapping is, and I hope you understand basic principles.
First, we need to go in 32-bit color mode (for more precise floating-point values of each pixel) and made simple planar uv-map by adding red horizontal ramp to green vertical ramp. Gradient smoothness must be set to 0, for linear distribution of values. Then need to make similar red value from 20% to 40% location on the ramp. Like so.
After that, we are using PixMap plugin on this map and for texture applying something that we’ve generated earlier.
Or use uv-map made by adding green angular gradient to red radial gradient and for texture slim ruler-like composition, that we’ve created earlier, to wrap it in a circle like this. This trick can make your workflow way faster, than to design circular compositions by hand.
Mesh mapping.
Using Videocopilot Element 3D we can map previously generated textures on cylinders, and other meshes.
Or map this to facemesh asset in SparkAR.
Adding motion and more fun.
Setting velocity to our particles and we can get motion and depth.
Using Displacement map effect and evolving vertical noise we can get interesting, more “organic” results.
Adding colors.
Aside from coloring by hand on compositing we can set color over life or use random color slider in Particular plugin. By adding a little bit of glow we can get some psychedelic neon stuff.
Summary.
Combining these tricks, technique can be applied in many cases and can be done not only in after effects but with any software that has particle systems, mirrors and uv-maps (unreal engine, touchdesigner, houdini etc.) Сan be used as an automated tool for finding forms and compositions, prototyping or getting ideas and inspiration. Or it can be used as a base for creating assets for movie or games vfx with less narrative and more abstract aesthetics approach in fui, audioreactive vj setups, music videos, AR facemasks, etc.
Hope you can find it useful.
Few more examples: https://www.instagram.com/algorithmic.parasitism/
