Uncategorized Archives - cables.gl

Happy New Year!

Happy new year, everyone!

It has been a great big year in the cables-universe - we made a lot of changes, improved stuff that was already there and added new features. We even fixed one or two bugs!

The cables-community was busy and growing in 2021 - we see a lot of new people in our regular meetups, registered users are constantly increasing and so is the number of created and published projects. Keep up the good work, and join the discussion on discord, the forums and the public issue tracker.

If you feel lost, need a quick introduction or want to know how to use new features, check our YouTube channel that revved up again in the second half of 2021 with a new tutorial video every week. Like, subscribe, comment...as they say!

Shall we dive into what happened in the last 12 Months? Well, let's!

The Big Changes

GLUI:

After almost a year in development, we switched the cables patch editor from being rendered in SVG to an accelerated WebGL rendered one - as it should be! We took it a step further and deleted the SVG renderer entirely from the user interface in the November release.

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

We also reworked almost all of the cables-ui to be sitting on a modern JavaScript foundation. This gives additional future-proofness and more room for neat UI improvements as can be seen in the latest "Viz"-family of ops and the addition of Areas to group your ops together.

With this step made, watch out for more improvements to the UI to make your patching-life easier, quicker and even more fun!

GLTF:

Workflows with imported 3D GLTF Scenes in cables got a major boost over the last year. We introduced a lot of new ops that make working with materials, cameras and animations exported from i.e. Blender a breeze. It all culminated in adding support for skins and bones in November, and while we were at it (and since we still target the web) we also added Draco Compression support. You can even compress your 3D models right inside the cables editor file manager!

Even though we are super happy to see these already used "in the wild", we flanked these features with a few tutorial videos to guide your workflow transition a bit easier. Check them out!

In The Wild

Workshops:

Apart from a few real-world projects we also set aside a bit of time to teach cables to students and interested audiences all around Europe. Sometimes remotely, sometimes in-person. We held workshops at Hyper Island, returned to Muthesius Art School in Kiel - spreading the word on demo making, and introduced cables to the students at Ostfalia ‎University‎ as well as Beckmans Design School.

Thanks to everyone inviting us and giving us a chance to show the possibilities of cables to various audiences. If you'd like to have cables as part of your curriculum in 2022, feel free to contact us on discord. We'd love to come!

Nodevember:

For the first time, we invited the cables community to take part in nodevember - a month of challenging topics to create patches for. And what a month it was! Brave participants created a staggering 53 patches and shared them with the world. It was incredible to see the cables community being super-active during November and having new public patches for the given topics everyday!

We even made it to the big list of software used for the online event, awesome! We will definitely be doing this again in 2022, so reserve November for some intense patching sessions!

What's Next In 2022?

As you might have read between the lines, we are super happy with the last year. Thanks to everyone contributing to cables in one way or the other, be it by joining our discord meetups, giving feedback on releases, hinting us at new things to try out, helping other people on discord and the forums or also "just" spreading the word on social media. Thanks!

But are we done? Far from it. Be prepared for another year of new and improved stuff in cables, like working on patches together simultaneously, better ways of contributing code to cables, more features using your webcam for AR or a complete rework of the cables community websites. Stay tuned!

again: happy new year everyone, we are looking forward for the next 12 months with you!

yours,

the cables team

#Nodevember with cables

Congratulations to all of the participants in our very first #Nodevember with cables challenge! The month long patching extravaganza finished up with more great patches that we were all excited to see.

It sure wasn't easy balancing work, life and creative brainstorming prompted by the official topics but we all enjoyed seeing your posts each day! To all of the participants, we've prepared a small package of goodies to ship out - expect those soon!

Check out what everyone whipped up for last week of the challenge below and you can always see the rest of the submissions in our past blog posts and of course the #nodevember tag in the cables.gl patch library.

Get ready for #Nodevember with cables 2022

As with all things good and fun ... we want more! Next year we hope you too join in and share your cabling skills and tricks. We really enjoyed what the community made and how it inspired us. Truth be told, the discussions we had during the meetups and in our chat gave us some ideas on how to improve our own patches and yes, even create and add features to new cables operators.

Check out the awesome work from the rest of the community as they flexed their node based applications that are posted under the official hashtags on twitter and insta - #nodevember and #nodevember2021 .

Follow the #nodevember team here.

Inspired by what you can try in cables for the next event? New to cables? Check out our youtube tutorials or pop in for meetups and chat on our discord.

keep patching!

November 2021 Release

Hi all,

another release, quite quickly after the one in September but still a massive one. You can see what working on almost 250 issues does on the official changelog, as always.

Worth mentioning in this release are definitely some pretty nifty new features in the UI of the editor. Like grouping Ops into areas or having small visualizations directly next to your Ops. But more on that in a few seconds...

GLTF support in cables got a big update as well with support for skinning, bones and a bit of performance optimizing if you are working with DRACO compression. Time to fire up blender!

We also worked on updating documentation, adding a few more "tips" to the "did you know"-panel. Did you know these exist and you can turn it back on in editor settings?

GLTF skin and bones

GLTFScene can now render skinned meshes that are animated by bones. This means you can now create a "T-Pose Skin"

of a person and use mixamo to easily create a person that is running, fighting or even dancing.

Cables will now automatically replay these animations.

New UI Ops and workflows

The UI of the cables Editor received tons of small improvements, updates and little things that will make your patching-life easier.

With the WebGL-UI now being the only mode to run the editor, the time was right to facilitate the new environment and give you some nifty new features.

Our new Area Op lets you create, color and name areas in the patchfield. Once you created an area you can then select all the Ops that

are in there and move them around freely, a cool new way to organize all the different parts of your patches and move them around.

The new set of Ops starting with "Viz" give you the possibility to visualize data in the patchfield itself.

VizString and VizNumber will output whatever value your out-ports currently have.

VizGraph will go one step further and show you a graph of several numbers as they change over time. Compare how your animations and easings align with each other right in your patchfield.

And, last but not least, VizTexture will give you a preview of the Texture at that exact position in the trigger-flow. Super useful to not always have to render them out to the canvas.

If you need to catch up on what has changed, you can check all the "did you know"-images right here.

Pixel Difference

With the introduction of the new PixelDifference Op cables now provides THE tool for feedback effects.

Use it to calculate the differences between individual pixels which can then be used with PixelDisplacement to create self-modifying feedback effects.

Manual Backups

If you find yourself in a situation where you want to change something big in your patch and you fear that stuff will break (and it will, right?), you can now create a quick backup of the current patch to get back to.

This is also helpful to compare what has changed and which exact binge-cabling session broke your patch. Be aware though that you should not edit and save backups, this will set your patch back to that state...then again, that might exactly be why you went back to that version in the first place, right?

Easier Audio workflow

We updated the documentation on when and how and where you are allowed to play audio in browsers. Since there have been questions about this quite a lot, we thought we'd put it into the FAQs.

For even more convenience Ops.WebAudio.Output now displays a small speaker icon in the bottom right corner of your patch to provide the "User Interaction" that is needed to start playback. If the browser is already allowed to playback audio, it will not show. Sweet!

Media Recorder

We introduced a new way of recording your patches to video. By using the fairly new Mediarecorder API you are now able to easily record videos of your project from within the editor. Use the new MediaRecorder Op and try different browsers for different supported video codecs ... and also audio-support!

Sharing your work has never been easier!

more new operators!

On top of all the above we added a few more Ops, some by your request on the public issue tracker, for you to work with. Have fun putting them to use!

even more improvements to...

A few of our old favourites have gotten some improvements as well. Be sure to check the changelog to see how these trusted Ops were made even better.

Apart from us working on cables, some of you have shared the amazing things you've created! Be sure to let us know what you make with cables in the future!

Check out some projects that were "made with cables":

Soo...that's that...have fun diving into everything delivered. Join our weekly meetup on Discord for praise and questions. Thanks to everyone providing feedback, bugreports, bugfixes and mental support. Appreciated! Happy patching!

cheers,

the cables team

#Nodevember with cables

Week three of our Nodevember with cables community challenge wrapped up and we got some more sweet patches to look at!

Great to see the participants challenging themselves with new techniques and approaches and we are taking notes!

We linked a few here and to see more just browse the #nodevember tag in our public patch library. You can also check out the #cablesgl #nodevember tags for more patch videos and patch links on social media.

If you'd like to participate and nab a super cool cables.gl sticker and shirt - there is still plenty of time left.

To enter, publish a patch on the cables.gl site with the #nodevember tag or post a video of your patch on social media with the tags #nodevember and #cablesgl .

Check out the official #Nodevember2021 prompts to get inspired and then go wild.

Set your own patch rules and show the world what you can make with cables.gl!

Here are the Official channels and hashtags to keep an eye on:

Insta: NodevemberIO (@nodevemberio)

Twitter: Nodevember (@NodevemberIO)

hashtags: #cablesgl #nodevember #nodevember2021

New to cables? No worries, check out our Youtube channel Tutorials and Instagram videos with links to users' patches to get started!

And see you on Wednesdays on our Discord!

#Nodevember with cables

With week 2 of #Nodevember with cables challenge behind us, we got sweet looking and inspiring patches published by you, nice!

Here are just a few of them for you to play with and learn from.

Check out our Nodevember website section and the social media #nodevember #cablesgl tags for even more publicly published and top secret experiments from our community as the challenge continues into the 2nd half of the marathon.

If you'd like to participate and have some fun with the official #nodevember creative topics, all you have to do is publish your cables patch with the #nodevember tag set in the settings.

To share it with the global event online audience and our team on social media - tag a video of your patch with #nodevember #nodevember2021 #cablesgl .

Have some questions or want some help with a patch you want to share? We will continue to checkout the challenge with you during our Weekly Meetups on our Discord.

Thanks to all participating so far and we are looking forward to week 3!

Join in!

Here are the Official channels and hashtags to keep an eye on:

Insta: NodevemberIO (@nodevemberio)

Twitter: Nodevember (@NodevemberIO)

hashtags: #cablesgl #nodevember #nodevember2021

New to cables? No worries, check out our Youtube channel Tutorials and Instagram videos with links to users' patches to get started!

And see you on Wednesdays on our Discord!

#Nodevember with cables

With the first week of the #Nodevember cables challenge behind us, we've already got some great patches out in the wild thanks to you!

You'll notice we have a new section on our frontpage showing the latest patches tagged with #nodevember and of course find posts from our community on the official channels.

We encourage you to check out and take apart the patches, remix them and share them with the world!

As the online event gets into week two, we are eager to see what you will create. Get inspired by the suggested official topics to start your patch, the #nodevember online community, or try out a personal challenge.

We'll continue to explore #nodevember with you during our Weekly Wednesday Meetups on our Discord - just drop in and join in the fun.

... and in case you are wondering about the event - check out our previous blog post for details and how to get your hands on some cables stickers and shirts!

Here are the Official channels and hashtags to keep an eye on:

Insta: NodevemberIO (@nodevemberio)

Twitter: Nodevember (@NodevemberIO)

hashtags: #cablesgl #nodevember #nodevember2021

New to cables? No worries, check out our Youtube channel Tutorials and Instagram videos with links to users' patches to get started!

And see you on Wednesdays on our Discord!

Participate in #Nodevember

During the month of November, the digital arts community breaks out their nodes and shader graphs to craft a variety of goodness in their software of choice in the online event called #nodevember. It is a month of creative challenges and inspiration driven by topics shared by the organizers.

Since cables.gl beta has launched we are continuously blown away by the creative tools and amazing artwork that you create. This Nodevember we invite you to flex your prowess with cables.gl and participate online by following the prompts shared by the Nodevember organizers.

You set your own challenges - create interactive WebGL patches, try creating 3D meshes from arrays, create wild Image Compose shaders to drive WebAudio or maybe only use a Basic Material. Anything goes, but in the spirit of Nodevember, the main challenge is to create demonstrations without relying on imported 3D models, sampled music, photographs, HDRIs - you get the point. You can take a look at the suggested constraints in the "Additional Info" section on the Nodevember site here.

We are excited for you to take the challenge in the next month and are eager to see what you create. Follow the prompts as they are revealed and see what ideas come to mind for your cables.gl patches. We will dedicate our Weekly Wednesday Meetups in November to help guide your creations and answer questions related to sharing your works at the event.

Once you are ready to post your artwork online - please capture a video of your cables.gl patch and post it online under the hashtags #cablesgl #nodevember #nodevember2021.

The goal of the event is to spread the word and inspire others.

...and win cables.gl shirts and stickers!

Here are the Official channels and hashtags to keep an eye on:

Insta: NodevemberIO (@nodevemberio)

Twitter: Nodevember (@NodevemberIO)

hashtags: #cablesgl #nodevember #nodevember2021

New to cables? No worries, check out our Youtube channel Tutorials and Instagram videos with links to users' patches to get started!

And see you on Wednesdays on our Discord!

LogicX Virtual Showroom 2021

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!

September 2021 Release

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

August 2021 Release

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