Uncategorized Archives - cables.gl

LogicX Virtual Showroom 2021 by Wirmachenbunt

You might have noticed while browsing this month's top voted patches that cables user known as Wirmachenbunt posted a public preview of an interactive scene. The project slice that we get to pick apart and learn from is part of the new LogicX Virtual Showroom website driven by cables graphics and includes some cool stuff under the hood.

We absolutely had to sit down and ask some questions about how the studio was able to achieve this great looking website. Here is our interview and be sure to check out the links at the bottom for a closer look!

For this years LogicX website, what new goals were set by your client and how did you approach the solution?

Creating a more realistic look compared to the stylized world of 2020, was a priority. And while the 2020 edition was mobile first, this year we focused on desktop and tablet. We also tried to improve the usability since the first approach wasn’t working for everyone.

How have you achieved the polish and realistic look of your 3D scenes and what was your approach to preparation and publishing of the scenes within WebGL with cables?

The lighting and materials are fully baked into one texture. On the cables side this minimizes the workflow to just loading one GLTF file and one or two textures. We tried to achieve the best compromise between looks, file size and performance. Blender proved to be the perfect companion for cables. The export to cables works seamlessly.

With this project, Wirmachenbunt worked with the cables.gl team to integrate Draco compression - are you happy with the result and what did it help you to achieve?

When publishing to the web, file size is always a concern. And Draco compression does a amazing job. It squeezes complex geometry into tiny files and shortens the waiting time for the audience. We are very happy pandur made this feature available in cables.

Are you embedding textures into your GLTF scenes and are you using compression for them?

No, we load textures independent from the geometry. There is the KTX texture format which might be interesting to investigate.

Large part of your project is integration of HTML text, videos and interactive camera rotation and navigation. Could you talk about what was the approach here. Is this entirely built in cables?

We tried to improve the workflow compared to our first cables project by tackling the traditional HTML tasks outside of cables. It just made more sense to us, working with Kirby CMS and PHP on everything outside the WebGL world. The only exception are the 3D topic flags, they are HTML elements, driven by cables.

Everything 3D is cables, therefore also the camera animations and interaction. Cables just provides the ops to easily built this mix of pre-defined camera animations and turntable interaction. The key ops are AnimMatrix and DeltaSum, worth checking out.

LogicX features quite a few animations for the camera angles transitions and 3D model looks - were these baked out from Blender?

All camera animations are made with cables, either with AnimMatrix or lerping (easing or smoothly animating) between angles and positions.

How were you able to achieve the transition fade effect between models here?

Thanks to ratsnakes demo patch, we realized how powerful the ops ColorArea and AreaDiscardPixel are. We used it pretty much the same as in the demo patch, only using different settings and two models at the same time. You can do so many cool stuff with ColorArea, like scanning geometry fx or ground fog. There is a lot of potential.

Continuing with the navigation, desktop and mobile navigation is smooth and intuitive - did you have to create separate websites for this to work?

Nope, it’s only one website. Only the usual css breakpoint stuff going on.

In our previous blogpost you mentioned your heavy involvement with VVVV for production of projects, is there anything that you used in LogicX that was built in that software?

There was only one moment where I used vvvv because it’s more intuitive to figure out more complex number crunching. Cables can’t display or edit numbers directly in the patch field, only somehow via the inspector. And this becomes cumbersome in this case. But it's the same when using for example Visual Studio and C#. It’s a vvvv specialty which most development tools don’t have and I‘m used to.

All in all, the second project was a lot more fun and there are plenty of features in cables which we love and now miss in other tools. Looking forward to more projects with cables and to see how this community evolves.

Christian (cables patch)

Joscha (PHP, HTML,CSS, Kirby CMS)

Damian (Blender, 3D)

Patrick (Design)

see the full website here!

Release September 2021

Hey there,

after taking a bit longer for the last release we decided to put this one out a bit quicker.

This release contains over one hundred bugfixes and improvements for features we introduced in the last update. Thanks much for testing, reporting and be sure to continue with the feedback on our forum, official discord and github issue tracker! As always you can look at all the changes in the official changelog.

Cool but what about the NEW stuff? Glad you asked and we would love to draw your attention to two bigger things.

One is a creative tool made in cables by our very own Patch Master Bagoof to create assets for your projects - even for use in other pieces of software!

The other one will help make your 3D models be a lot smaller and hence load faster.

Matcap Generator

Ever wanted to create a nice looking material but never got around on learning how to light your scene properly? Are you a seasoned pro that is constrained by hardware or the tools you use?

We created a nifty tool for you to generate Matcaps ("material capture") and help bring your 3D project to the next level. These Matcaps can later be used in cables, or in any other 3D software ( Blender, Cinema4d, Zbrush, Spark AR , etc ) to light up your 3D Models and scene, without having to create a complex Light Rig.

Play around with the sidebar options in the patch to create different Matcaps results, once you're done, just download them as a texture and feel free to use them wherever you want.

Draco

You can now use 3D models optimized with the Draco compression library in your projects - this means faster downloads and more details in your virtual environments!

Special thanks go out to the nice people at wirmachenbunt (instagram) for sponsoring development of this feature. Thanks!

Other noteworthy changes...

You will notice in the changelog that some Ops have received cool updates, and we also created a few new ones that will be helpful in your projects. Check these out:

Sidebar got a sweet XY pad that will let you control two things at once! Plop it down, set the range, and hook it up to your Ops. Good ol' LineFont operator now outputs a point array, so you can write text and arrange your 3D objects along the locations of the letters - cool.
Screen Space Ambient Occlusion can now be blended in various ways with your scene for artistic tweaks and wild effects.
ArrayUnshiftString lets you insert a string at the beginning of an array simply by using the new operator. Save yourself some hassle when dealing with text in your project.
Documention for these new ops is available here, try out the examples and be sure to tell us what you think!

XY Pad Example

Linefont array Example

SSAO blend modes Example

Animarray Example

ArrayUnshiftString example

Draco Compression example

More Extras:

Wow a new search dialog design! We cut the fat and optimized our Operator Search dialog for smaller screens and quicker workflow.

One more thing - you can now create backups of your patches manually! Find the option in the top menu of the editor and click!

And that's it!

As always: thanks to everyone involved in the creation of this release be it by sponsoring feature development, contributing code or providing feedback in the discord, weekly meetup or on the public issue tracker. Feel free to send feedback on this release as well!

Have fun patching,

the cables team

Release August 2021

Hey there,

it has been some time since the last release. But this one was worth the wait.

We tackled roughly 270 issues with this one, some of these where reported in the public issue tracker. Thanks to "tastez", "kikohs", "n4hui", "dino5711", "krisj", and "prestonoutatime" for reporting these!

With this release we introduce a whole new editing experience to you.

After we changed some of the icons, moved around menus and made the whole editor look a bit more polished, this time we went all in and are finally switching to our new full WebGL 60FPS patch editor.

Having the editor itself no longer draw ops and cables to SVG but being completely rendered in WebGL gives massive improvements in regards to performance and a lot of new possibilities for improvement.

This has been in development for over a year, has been an option "on dev" for some months and the undev team battle-tested it over the last four months in real world projects.

We feel it's ready and hope you like all the shiny new stuff. We'd love to hear some feedback!

What's in there:

Highlighting Ops

Highlighted ops are now more visually recognizable. They get marked and animated once you select them individually or grab a few of them at once.

Helps to find your selected ops when zooming and panning around.

Connections

When hovering over a cable the circle to add a new op or delete this connection now follows your mouse.

Gone are the days of scrolling and panning to the middle or endings of cables to inject new ops. This makes working with large patches and really long cables a lot more convenient.

Ah, and we made "flow mode" the default (try pressing F to see the difference).

Even more convenience for working with large patches comes with this feature.

Dragging an out-port to the parameter panel of a selected op will now connect these two ports.

So find the op you want to work with, keep it selected, go to the op you want to connect to and drag the line to the desired port name on the parameter panel.

This also works by dragging the name of the port in the parameter panel onto the port of the op!

When you are dragging an op over a cable, the op now highlights when it can be connected.

Makes it a lot easier to see what will be happening and may even prevent from accidental connections by moving around ops.

Faster subpatches

Subpatches are a nice way of organizing your patches, stuff is nicely tucked away and the mainpatch looks a lot more organized.

Going in and out of subpatches used to take a bit of time, especially with larger ones. With the new editor going in and out of subpatches now is blazingly fast.

No more reasons to not organize our patches!

Too many Ops?!

Okay, subpatches are cool and all...but sometimes you really need this field of ops, lots of them, in that one place.

Rendering of the whole editor is now done in WebGL and rendering ops is almost "for free", so enjoy a huge performance increase in bigger patches with a lot of ops.

Copy-Pasting has hardly ever been that much fun.

As crisp as it gets

Rendering in WebGL allows us to have super crisp edges, most important for font rendering.

So if you really want to go in-depth on how your patch looks you can now zoom in until infinity.

New and improved Ops

Many ops received new ports, new functionality or a few tweaks here and there, for a full list, head over to our changelog.

The CustomOp, that you can use to write your own ops or functionality in cables, now has the option to load basically any JavaScript library from an external server. This way you can integrate your favourite JavaScript library into cables and create ops to work with it. You might want to check out cdnjs.com for a vast amount of options.

With the new AudioRecorder you can record, playback and download audio using your microphone (for example), check out the example and maybe brush up on your beatboxing skills again!? And while we are talking audio-ops: You can now use Waveshaper to fuzz or distort your audio data, have fun!

The popular sidebar now can be styled. Using SideBarStyle you can tweak some parameters to adjust the appearance of your sidebar. If you need a lot of sidebar-options the new SideBarSwitch allows you to organize you sidebar into tabs for a bit more overview and structure.

For a bit more control over triggers you can use the new TriggerSendNamed to create named triggers "on the fly", especially useful with TriggerReceiveFilter.

And for your 3D needs MeshInstancer got faster with a bit of optimization and it can now take an array of texture coordinates. Look at what you can do, now!

Along with the above ops came changes to 75 ops and roughly 40 new ops for you to discover. Maybe start by exploring these in particular:

GltfNodeSineAnim

ArrayIteratorStrings

LocationHashRoute

transformvertex

AnimMatrix

meshinstancer texcoords

AnimArray

MultiDrawImage

Simple data visualization with ECharts

With the last release we added the echarts library to the list of available libraries in cables. User kikohs went all-in and created two ops that work with this library.

He was so kind to give his work back to the community and hence ECharts and EChartsEvent can now be used to use the full power of this amazing library while still patching in the cables editor.

He even made a tutorial-video on how to use them, watch it!

Updated documentation

We constantly try to improve our documentation. This time we focused on documenting the export options of cables a bit more in detail and tell you more about how to write GLSL-Shaders in cables.

Find all the information about the different ways to export your patches and put them on your website in the embedding section of our documentation.

If you are into GLSL, check out our section about shadercoding.

Anything missing in the docs? Something wrong or outdated? Sorry... There is a repository on github where you can correct these mistakes on your own and help us though!

And there is more...

As always you can find all the changes in our updated changelog for this release, feel free to browse around.

At the end of this post we would like to draw your attention to a few projects that were "made with cables" since our last release, awesome work, check it out:

Thanks to everyone who contributed to this release, we are really happy with how it turned out. Let us know on discord, twitter, in the forums or anywhere else how you like it.

cheers,

the cables team

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!

Bad Manners Records BM7 – Gesloten Cirkel

NEW EP BM7 - Gesloten Cirkel on Bad Manners Records teaser microsite:

http://badmannersrecords.com/BM7/

Primal Wound – Disintegration

music video made by photoevaporation

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:

black, white and color by chunna

A/V- Wave Circle by JunichiAkagawa

The Hand by chunna

Parasit by fariskassim

Laplacian Growth Waves by Flexi23

godrays by wirmachenbunt

stop the virus by dino

Lissajous's in the Sky by bagoof

fr-099: Aphelion by kb

A/W by paroxid

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 logicx. mata.london used it to create their garden. plusx 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.