LogicX by Wirmachenbunt

Cables user Wirmachenbunt created an amazing website where lots of different elements came together to make something really beautiful, it also shows what cables is capable of when used for commercial projects.
You can see the results here 

We asked 
him some questions to give us insights into the creative process of how the web page was created.
A big thank you to him for taking the time to answer them. 

If you'd like to use cables in a commercial capacity but are missing some features or need custom support then don't hesitate to contact us to help you create a solution.

Could you tell us a little about yourself ? (background, previous work/s, current work/s)

Hi, I'm Chris Engler from Hamburg, running a studio called wirmachenbunt, hence the username. We create primarily interactive media installations, ranging from large scale video wall presentations to complex exhibits, combining real time graphics, physical input and architecture. So far vvvv has been the tool of choice, especially when it comes to boygrouping (multi-device rendering) and connecting to all sorts of electronics. Apart from the studio works, I teach at the Muthesius University of Fine Arts and Design.

Creating digital projects / artworks for over 10 years now, it is natural to explore new ways of publishing and emergent playgrounds. I actually registered at the cables website in 2017 but didn't dive into the tool too much. But it was kinda amazing what you could do in the browser at this point. There was some conversation with pandur in between the years and then right before corona hit germany, we managed to organize a workshop at the university. This was the kickoff for me to actually understand cables and have a go with it.

How did this project start out? What were the end goals

Well, thanks to corona, my friend Patrick at LOGICDATA came along with the idea to bring the canceled trade show content to the web. A few pingpong discussions later, the draft was a vertical scroller, controlling a camera animation, seamlessly through a virtual office space, highlighting the products of LOGICDATA. This includes some secondary interaction, like moving the table up and down.

We had like 6 weeks from draft to release, using cables for the first time. The end result is pretty much what we wanted. There will be an update in the future, since we learned a lot, content-wise and how the interaction is perceived. One thing we didn't finish in time is multiple virtual humans, animating through the scene.

Why did you decide to use cables to create this webpage?

Short answer, we needed WebGL and a node-based environment felt familiar.

Can you tell us what other programs and processes that you used to prepare the content?

There are the obvious ones like Photoshop and Illustrator. Blender proved to be the best match for cables concerning 3D stuff. The GLTF export just works. We used to use Cinema4D alot before but we’re transitioning to blender now. Primarily due to the export trouble with Cinema4D. There was actually a bit of vvvv involved, I made a patch to bake the alpha channel of a PNG sequence to JPEGs.

Is the HTML and CSS a part of the cables patch or is it a separate layer?

The HTML and CSS is generated directly by cables. Joscha (responsible for the HTML stuff) had to make a lot of new op's to manage the HTML layer with arrays. It's awesome you can create HTML elements with cables, but next time we will go a different way. Primarily to work in a collaborative way on a project. One can handle the HTML layer outside of cables, while the cables developer can progress independently. We might reconsider this workflow if teams can work in parallel within a cables project.

How did you make one large seamless scrolling experience?

Everything depends on one value, controlling a GLTF camera animation and translating the HTML content. Big thanks goes to pandur for the emergency help during the project, especially the camera data ops and missing quaternion2euler fun.

I cared a lot about file size and performance, since the goal was 60fps on a broad range of devices. Hence bits and pieces are only active (ifthen FTW) when in range. Multiple 3D objects are instanced to save draw calls, which works quite well with the GLTF data you get. And the engine image sequence uses JPEGS and a shader to achieve small size but with transparency.

What were the hardest challenges you encountered during the development process?

Not so much cables itself, I'd say multiplatform and browsers. For an offline developer like me, it was kinda scary to go down this rabbit hole. There have been a couple of moments, where things just didn't work on some devices and we had to find out, painfully where things could go wrong. Like iOS loves power of two textures and everything else doesn't care. Or the performance was rubbish on a high end android device which was caused by some constantly evaluating op.

Anything else you'd like to share?

First, I fell in love with cables. It is playful to just open the browser and get going. I can show the stuff everywhere and everyone can have a go with it. And cables has the best of both worlds, patching and the ability to easily extend its functionality by code. And i'm not a javascript pro 🙂 .
I see great potential in cables, not just as a demo tool or as an online environment. Since the release of LOGICX, I've investigated the cables export to various platforms as native apps or electron. There will be wirmachenbunt tradeshow productions made with cables.

Wide awake Earth – An interview with Artur Neufeld

One of our long time users Artur Neufeld created an amazing web experience with cables.
We asked him if he could do an interview with us to explain more about how the project came to be.

Wide awake earth 

1 - How did this project start out, what were the end goals?

Wide Awake is the brainchild of illustrator Friederike Hantel and fashion designer Ethel Vaughn. The project started as Friederike’s master thesis, and she contacted us at Selam X and asked just for some guidance and tips, on how to approach such a project on a larger scale. So we met for a coffee and just started talking about the project, its possibilities, and its potential. We were instantly intrigued by her ideas and style and were on board immediately and decided, that the potential of the project would be untapped if the whole collection would just be a bland online shop like any other. So we decided to go all-in on the holistic approach, treating the project as a brand and elevating it with a multimedia treatment. The goal was to launch the collection with a big bang, so it can be taken more serious on the international stage and get the attention that it deserves. We were all in this project because we think it is something worth to support, so it started more as a personal project, but we of course hope, that it will get bigger as we go.

2 - Can you elaborate on how the creative process led to the final result?

The first meeting with Friederike was back in September of 2018. It turned out, that she and I live basically in the same neighborhood, so it was easy to meet up, discuss plans and creative directions on a semi-regular basis. In the beginning, we had even more ambitious plans, from AR and face filters to VR and motion cap. One core idea of the project was its collaborative spirit, so we asked other creators to pitch in ideas and transform her imagery into something new. 3D artists brought her visuals to a different dimension, sound designers brought the visuals to life, makeup artists, models, and photographers delivered fitting images for the lookbook. All participating creators had absolute creative freedom, and that made the project so fun and diverse. The concept for the website shifted dynamically, as we got new visuals from the other creators and the main challenge was to wrap everything into a coherent story. In the end, we went with the concept of layers, closely related to the aesthetic of comic books. So the creative process was really a trial and error kind of thing, were we ping-ponged ideas and visuals, and at some point, someone would say “What if we would do that?”. So. e.g. that the lookbook pictures would open to fullscreen, with the borders and visuals aligning dynamically, was just an idea that came naturally after I received her first sketch for the lookbook visuals.

3 - Why did you decide to use Cables to build this web page?

The first draft of the website already had this idea of a visual journey, the working title was “Kosmos” since we wanted to tell a story that went from the universe scale all the way to the microscopic level. As mentioned, the concepts shifted and changed a lot, so only remnants of the kosmos idea survived in the end. I was glad to use Cables in this process since its modularity allowed me to quickly change ideas on the fly. At some points, the journey was more of an auto scroller, so adding e.g. the possibility to scroll the scenes with the mousewheel was easy to implement, without the headache of refactoring the logic all the time. So the dynamic creative approach went hand in hand with cables modularity, which made the whole process a lot more fun. Otherwise, I am sure, I would have been more reluctant to new ideas and more careful when discussing new possible features or concepts. Now I could say “yeah that’s a neat idea, not sure if it is possible but let me quickly make a prototype”. And Cables enabled me to have this mindset.

4 - Can you tell us about any challenges that you faced during the development process?

In the end, we had this huge amount of layers for the interactive WebGL journey, around 300 to 400 individual PNGs. So as you can imagine, this resulted in all kinds of issues, from performance to loading times and Http requests, this layering approach was influencing everything. So one challenge was optimization, so from enabling gzip on the serverside, to carefully squeezing every bit from each PNG with different compression methods, to baking different image effects right into the PNGs, like blur/neon effects, and splitting the whole thing into thematic scenes. In the end, I would say, that the loading time is still too long, but we were at a point, that the only way to improve the loading time, would be to cut out scenes or reduce the overall amount or quality. So we decided to sacrifice a few seconds on the loading time in the end because the result was interesting and unique enough to justify that decision in our opinion.

5 - Anything else you want to share?

Mhh just as a tip for newcomers, or anyone using cables, in general, I guess: Get accustomed to the CLI that Cables provides. In this project, I needed to tweak values all the time and needed to see it in action on my dev server, so I quickly hacked together a python script that automates the process of getting the new patch file from the Cables API. That alone really speeds up the workflow when working with bigger and more complex patches. Another thing I really learned to appreciate is the impact of a good compression method for assets. Since our PNGs had a limited color palette and big chunks of transparent areas, I could save up to 80% of the filesize, by using something like PNGQuant in a batch operation. If you don’t have hundreds of images, you can also use something like TinyPng on your assets, before going to production with the project.
We’d like to give a big thank you to Artur for taking the time to respond to us. We can’t wait to see what other projects he’ll come up with.