Kiel Mutschelknaus’ Space Type Generators let you make hypnotic animations right from your browser

Recently I found myself fascinated by a series of type generators: websites that allow you to create experimental types of animation and then transform them into personal pieces of art in movement. It's easy to lose track of time playing with all the settings. And if you feel frustrated (and I honestly do not think you can because they are so fun), there are pre-set adjustments that you can change to help.

The intellectual author of these sites is Kiel Mutschelknaus, a multidisciplinary artist whose work encompasses design. , animation, typography, and recently, coding. Mutschelknaus, an educator at the Art Institute of the Maryland Institute in his graphic design department, has been working on more than 30 different generators, and has published four online so far. He calls them Spatial type generators, and the different versions (v.Cylinder, v.Field, v.Stripes and v.Coil) offer different parameters that you can customize, such as how text is animated, colors, speed and, of course. , what the text says.

I got in touch with Mutschelknaus to learn more about the generators and their process.

This interview has been slightly edited for clarity.


The Bricks preset in v. Field

What was the inspiration for making these generators?

They come mainly from a place of learning and experimentation. Last year I was creating these typewriting chandeliers and it was very difficult to experiment and iterate on the forms with the software I was using (After Effects and Cinema 4D). He took the programs forever to make changes. I decided to change the tools and translate them into a coded environment, Processing.

From there, it simply exploded. He could get instant information from the forms by changing the parameters as he encouraged himself. I kept adding more and more waves and parameters to different aspects of those forms. It was crazy easy to generate graphics in motion. And to generate generators. And to iterate over those generators. Crazy fruitful I ended up with more than 30 generators.

What is your process to build one of these? What do you use?

I start coding them in Processing, which is a Java-based encoding environment for coding noobs like me. If I think the generator is efficient enough to run in a browser, I'll recreate it in JavaScript with the p5.js library (which is a JS that closely reflects the processing). Then it's just pushing it to the site.

I always get questions about what the font is. The type in the generator is not an existing typeface. It's something that I've encoded directly in Processing / p5.js which is a series of lines with a stroke applied. It's my improvised variable source that I call LoFi Mono. I'd love to explore how real sources work in generators.

Where did you learn the skills necessary to build something like this?

He has been largely self-taught at YouTube University. It had a background of graphic design and quite traditional illustration, based on printing. At graduate school in Cranbrook, I began to explore motion graphics and that quickly led to 3D learning and coding. And then I started teaching motion graphics! What turned out to be an excellent way to learn more about him.

I was also always interested in mathematics and that has been very useful with these recent experiments in waves and trigonometry.

One of the many The reason I really enjoy your work is that it is a good combination of design, typography, motion graphics and coding. Were you always interested in coding or did that come later?

It happened later. I started with the graphics in movement and found that the bridge to coding was very direct. Graphics and motion coding have a basis in loops and integrated animations and connected systems and objects and parameters, and it really is the same.

Currently, you are a full-time professor in graphic design at the School of Arts at the Maryland Institute. Department, can you tell us a little about what you teach there?

I teach motion graphics, 3D classes and some fundamental graphic design classes. I have always liked the emerging technologies and processes and that has become my niche in the department. My 3D / 4D graphics class will actually design 360 environments for our final project and I hope we can critique the pieces in virtual reality, which excites me a lot.

How does teaching compare with independent work? 19659020] They inform each other in a surprisingly symbiotic way. I can take the projects from the clients of my study study to the class to illustrate the IRL examples of what we are talking about. And at the other extreme, I am constantly bringing ideas that arise in our class to my study practice. (The first typeface chandeliers that inspired all of these pieces actually come from a motion tracking demonstration I was doing for my advanced class of moving graphics).

If someone were interested in learning how to create applications or similar sites, what advice would you give? they?

to code start with Processing. And Daniel Shiffman. I am a devoted follower of D. Shiffman and the Church of Processing. He is so generous with his YouTube channel and his online books. It is an excellent place to start learning about the basics of coding.

Do people share what they do using your generators with you?

Yes! They do not always tag me, but people have been great using the #SpaceTypeGenerator. I'm really excited when I see it being used as a component of a larger designed piece. It is satisfying to see that STG is used as a real image creation tool together with PS or AI.

Do you have a favorite?

I recently collaborated with Post Typography to create a custom generator for the identity project they had. His designers had been playing with STG v.Field and it was incredibly gratifying to see practitioners who I admire twisting and breaking the tool in really beautiful ways. They were generating visuals that I had not considered before. Very exciting.


The Lemniscate preset in v.Coil

Do you have something that you are working on now that you would like to share?

I have like five new generators in operation. They are likely to start in Processing and possibly migrate to a home online. I'm having a real challenge in optimizing some of my existing processing generators so that they can work in a browser with JavaScript.

I'm really interested in putting one of the Perlin noise generators online. There are many beautiful, fluid and random ways that I would love to see people experience.

Do you have any planned exhibition for the future?

No, but it's something I want to do. Instagram has been a great platform to share this, but I would like to see them in a physical space. Whether it's an interactive installation or large-scale prints, I really want to take them out of small screens.

It's not a question, I just want to share with you how much I love this :

Yes! Thank you! I used my first type generator to create the shapes, I brought them to C4D and I played with reflection and light to create the movement. Ugh I would love to go back and explore this more, too. There are not enough hours in the day!

Please Note: This content is provided and hosted by a 3rd party server. Sometimes these servers may include advertisements. does not host or upload this material and is not responsible for the content.