made with cables – massiveBASS

In our new series "made with cables" we try to give you some behind-the-scenes tricks and insights on how people approach certain challenges in real-world projects.

The first episode tells us a bit of the story behing massiveBASS which we (undev) made in cooperation with the kids.

Enjoy!

Release – February 2021



Hello,

another two months have passed since the last blogpost for an update. As planned we are doing smaller updates now and hence had one "in between" at 13th of January (scroll down here for changes in that release).

This release closes ~90 issues and includes ~20 bug fixes. This is not the reason for this post though.

We made some breakthrough changes in the UI of the editor that we'd like to introduce to you.

Let's get into it:



Editor-UI changes

We reworked a lot of the menus and icons that appear in the cables editor.

The goal of the whole rework is to give you smaller menus, more structure and also more consistent icons. The most notable change
is that we got rid of the customizable sidebar (as we felt nobody is really using this anyhow) and putting the editor on the full
height of the window to give you coders a bit more space.

Along with that came new smaller menus and a few animations as gimmicks here and there. Sounds small? Sounds easy? Well, quite some work went into this, we promise!

We designed new icons to go with our new UI style. We made sure to keep them in the same style of the open source feathericons designs, since they are already super awesome, minimalistic and were already being used for some UI elements in cables.

It wasn't an easy task, so we've made sure to try allot of different directions. As you can see, some icons design worked others didn't.

Maybe the feathericons collection is in need of some awesome illuminati and skulls icons?

For those of you who always wanted to be more "inside" of your patch, we now offer the ability to have the renderer as a patch background.


This has been a bit of a religious topic over the last years, and we might head into "curved cables vs. straight cables"-territory here, but we found that sometimes it's nice to see your patch in a higher resolution while still working on it. So now you have the choice by using ctrl/cmd-shift-enter:

Most of the menus in the editor got smaller, received animations here and there and also have been repositioned. You still find the main menu on the top, it moves to the right when opening the code-editor now. The configurable sidebar made way for a smaller version with all the important shortcuts. A new one is the icon bar on the lower right that lets you zoom in and out and turn on full screen, handy if you do not have a mouse wheel for example. All of these will undergo some more changes in the future, but we are quite happy with the new foundation...hope you are, too.



Refined Audio-Ops

We added a Delay op that gives you the possibility to add delay, warble and grittiness to existing audio streams. The documentation has also been updated!

A lot of bug fixes, tiny updates and more user-friendly UX with already existing audio ops, check out the changelog for more.

ClockSequencer lets you sequence triggers based on BPM values,

In combination with ClockSequencerPattern it is possible to sequence rhythms like a drum machine
Fiddle around with the ClockSequencerPattern and different array & trigger ops and start to explore the generative music possibilities
We added two more ops for that: the MusicalNotes op gives you all the arrays you need to define musical scales, the ArrayQuantizer op lets you quantize incoming values to those scales


Triggerwarning!

This release also gives you two new ways of controling the flow of your patches through triggers. 

The ProbabilityTrigger rolls a dice every time it is triggered and outputs a trigger with a given probability, if you need the inversion of that, it will also trigger the second out-port whenever the probability is not met. A nice way to bring some "randomness" into your visuals, but still keep a bit of control.

TriggerReceiveFilter will receive all the named triggers that you already use with TriggerSend and TriggerReceive and then (optionally) filter these by a given prefix on the name. Going all over the place with your triggers from left to right in patches and subpatches can now be a lot more structured. Fire and forget!

Spending (most of) your time untangling a lot of cables? Triggers especially have the habit of accumulating on outports. We gave the Sequence op a "clean up" function to make your live just that one missing bit easier:



Custom Ops

Ever wanted to create an op but not clutter your UserOps namespace? Only need this specific functionality in this patch? Need a small snippet of JavaScript that executes in place? Think this one problem you have can be better solved in code instead of patching?


We got you! The new CustomOp gives you the ability to code ops, or basically any JavaScript, and have it stored along your patch and not in UserOps. Perfect for these instances where "nocode" is not the solution...



Made with cables

We always love seeing what you people do with cables "in the real world" and "made with cables" is our place to celebrate and showcase this.

We updated the site with patches by holon, Ani Dalal, Sofia Crespo and Entangled Others. Check them out!

To give you more control on how your work is presented on, say "made with cables", or any social media site, we now allow you to create a screenshot on demand. Manually picking the face of your patch, so to say.


Once you turn on this feature in the patch settings, cables will no longer attempt to automatically create screenshots and keep your selected version until you grab a screenshot again. So get your patches into the most beautiful position and hit that button.



And last but not least:

We added the echarts and p5js libraries for use in your UserOps. Let us know what you do with it!

As always you can find all the changes in our changelog. Enjoy all the new stuff, and: happy patching!



the cables team

last year in cables

What a weird year it was. Despite all the hardships there has been a lot of stuff going on in the cables universe. Quite a lot actually, as we found out collecting everything we wanted to mention in this blog post.

- Our community grew by about 30%
- We explored streaming to twitch regularly and ended up with weekly Discord meetups
- We released five big updates this year
- We introduced features, bugfixes and improvements in closing 832 issues from our backlog
- We now offer around 1600 ops for all your needs
- 33 videos have been published including examples, tutorials, livestreams, ...
- People created about 47k patches in the time since we started cables. Wow!

cables has been used in workshops at universities, for installations all over the world, for commercial projects, hobby projects, proof of concepts, art and who knows what else. 
Projects using cables won prices in competitions, were seen/used by lots of people and generally made the offline and online world a more beautiful place.

Thank you everyone who made this possible!



Releases

Last year saw five big updates that we made to cables. In February, we gave you GLTF-Support, working with MSDF-Fonts and basic "Multiplayer"-Functionality, April came with a lot of cleanup and fixes, July gave you the possibility to play with physics a bit, made sharing your patches easier working with collaborators and gave you data nerds a bit more functionality on arrays


A huge cleanup and bugfixing release in November still had some impressive new features. We started our inquiry into machine learning by supporting teachablemachines (thanks Mick) and made exporting patches to external services easier. 

We topped of the year with a rehaul of how audio works in cables by making the existing audio ops more foolproof and adding few missing ones

We also plan to have more regular and smaller updates in 2021, so be prepared for roughly monthly news from what can be done in cables now.

But what did you people do with all of that? Let's see:



Top patches of the year

These are the top patches of the year, ordered by likes in descending order, attributed to the patch-owner:

We also had three cables jams, with people competing for the win given certain restrictions and rules. Thanks for all your contributions, keep 'em coming!



Projects

People use cables for work and privately, for money and for free, for arts and commercial projects. 


We know that wirmachenbunt used the GLTF-Ops to create the amazing website for logicxmata.london used it to create their gardenplusx created parts of their new website using cables. 

holon and mfx won prizes at demoparties with cathodoluminescence, gravity and nevoa. Farbrausch released Aphelion. Sofia Crespo and Feileacan McCormick gave us the "arificial remnants".

undev and artifical rome created "born of a dream" together and raumHOCH used cables to power their "gründermotor" as well as the presentation of the "smartquart" grid. undev contributed to the new website of dotfly and made the background animation for the (sadly cancelled) ableton loop conference. 


But that is not everything... to keep you all on your toes about what we already have and what is new in cables, we used twitch a lot to show people what we are up to. And there have been quite a few streams, some educational, some informative and some plain fun.



Streams

We taught you how to VJ - using cables.


We tried to live-copy some pieces of art that we like - using cables.

We talked about behind-the-scenes-stuff and introduced new features and updates - of cables.

We showed you how to make your hat blink or make demos - with cables.

And: kikohs made a whole intdrodiction series for datavizualization - in cables

So as you can surely see: It has been quite a year for cables and the community. Stay tuned for things to come!


Happy new year,
from team cables!

cables intro: data-driven gradient from weather data

let’s build a mask detector using machine learning and cables!

Tutorial machine learning using teachable machines in cables

New video tutorial series – HTML CSS

As of today we will be releasing new video tutorials aimed at using the HTML and CSS ops inside of cables.
The goal is to keep them as short and informative as possible like our byte sized video series.


The first video will show you how to get started with using the DIV element op to introduce interactivity to your cables patches.
 

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.