Category: Uncategorized

June 2023 Release – Part I

Team Up!

The last release gave "Extensions" to the cables-community. A way to contribute your code to cables. This release gives all the power of this into the hands of "Teams".

Because it's a huge release, with some major changes, we will also split the presentation of it into a few more posts.
This one being about how to collaborate on and share ops with the cables-community.

Before we dive in, as you know, you can find all the changes that went into this massive release in our changelog.

The real talk for this is in the docs. As "RTFM" is really rude, we will give you a quick rundown of how to work with Patch Ops, User Ops, Team Ops and Extensions.

All of these are tied together in teams. They are the new and improved way to collaborate on patches and ops. Teams then can share these - be it with your friends, coworkers or the whole community.

The Gist Of It:

Create a team. Make it private, unlisted or public. Let people join - or invite them. Add patches and ops.

Sharing patches is pretty straightforward: Everyone in the team will be able to open all the patches in the editor.
Make individual users collaborators of the patch and have them work with you.

With Ops, it's now like this:

If you feel like it, you can check all the implications by diving into the new section about permissions in the docs.

Also feel free to give us feedback, report bugs or let us know what you are missing in this new workflow.
We also love to hear that you like it! 😉

Credit Where Credit Is Due

With this release being about sharing, and contribution we reworked the credits page on cables.gl to include all the contributors in the community, all the open source projects that we are standing on the shoulders of...and most notably the companies that sponsored cables development in the past.

If you want your logo on that page, contact us to find a spot on our backlog for features you'd love to see integrated.
Thanks again to everyone that contributed to the development of cables so far!

Op Selection

To not make this post too text-heavy. Here are some new ops for you to check out:


That about wraps it up for this post. Stay tuned for more information on changes in
the next few days and weeks.

For now:
Let us hear some feedback! Talk to us on social media, on discord or on github discussions.

cheers,
Team Cables

cables is brought to you by




If you want to see some special feature integrated into cables,
contact us to see if we can make it happen.

October 2022 Release

New Toys To Play With...

...and a lot of smaller changes, improvements and bugfixes come with the third cables.gl-release of 2022.

This post will lead you through all the changes and improvements that we added to cables in the last few weeks.
If you just want the tl;dr, check out the changelog or watch our "Release Chat" on YouTube.

We'd love to hear your feedback, let us know!

Virtual Worlds With WebXR/VR

We picked up on where we left in the last release and moved our beloved example room to VR. WebXR-VR is coming along quite nicely these days and we updated our experimental VR ops and made them work on many devices.

We got ourselves some headsets, jumped in on the task and added two new Ops to the cables library: WebXrVr and WebXrVrController.

Once you put the WebXr.Vr-Op into your patch and open it on a capable device, you will be presented with a "headset icon" on top of your patch. Click it and you can dive right in!

With just these two ops, you to add VR capabilities and controls to your patches easily. Check out the examples and see how easy it is to experience your patches in Virtual Reality.

As said, this is the very first version of WebXr in cables and we would love to hear from you. If you have any feedback on devices, features or workflow, please let us know.

It works great on devices like Quest 2, HoloLens or many Android phones. Without a headset, you can use this handy extension for Chrome and Firefox. Try it:

Managing Collaboration

Collaborating with people is a huge part of how we think cables should work. Be it via public patches, remixing, sharing or working together on private projects.

We now introduce better control of who can see, play around or edit a patch.

This is explained in full detail in the documentation. Here is a quick rundown:

Request Access
Any team member, or user with a secret link will see a "request access" button on the patchpage. Click it to let the owner of the patch know, that you want to help them work on the patch.

For example: You can safely ask for help in the forums using a secret link and give read only access to people that offer help.

To not have you flooded with a lot of requests, this button is not shown for public patches.
Grant Permissions
The owner of the patch will see new requests on their invite page, and also be notified with a red bubble the next time they open cables.gl.

It's now up to them to decide on the level of access. In a nutshell: "Full Access" allows everything, "Read Only" allows to play around but never save the patch.

We also added this functionality to invites, so whenver you want to share a patch with someone you can now decide if they should be able to make changes to your patch.
Collaboration Overview
Working with collaborators has become more centralized. You can now decide on the level of access even after accepting requests or sending out invitations.

Simply open the "Collaboration"-Tab in the settings of any patch and invite new users, see pending requests or change the permissions of current collaborators. Even for patches created before this update!

Easier Life In The Editor

Making your patching-experience a better one, improving on workflows and making it easier to keep your patches clean and tidy is one of the most important goals of every release.


Let's see what we came up with this time to make the life of patching even more enjoyable.

Alignment
Do you also like your patches cleanly organized and aligned in a aestetically pleasing manner? Then this new feature will make you smile.

The editor will now show a vertical line when dragging ops around. You will see when they "snap" to other ops that are on the same position, vertically. No more excuses for crooked cables!
Suggestions
We added more context based suggestions for fitting ops. So now you have a shortcut to create Texture-, StringEditor-, DivElement-Ops and all the fitting VizOps for the type of the port.

The opsearch dialog will now be even more clever and allow you to create and use variables or triggers to organize your patch. You can even decide if you want to set the variable directly or control setting of the variable with a trigger.
Connecting Ports
You might have encountered situations where it was very tedious to link ops to each others. Be it because of display size or input method. With the new "longpress" functionality in the editor that's a thing of the past.

To use it, click on any op and hold until a white line will appear. Now, navigate to the op you want to connect and select it. You will be given the known selection of fitting ports to choose from.

We enabled both of these features in the editor, they can easily be turned off in your editor preferences.
Quick Math
All the simple math ops to work on numbers in cables are now quickly accessible via shortcuts.

Press escape to open the opsearch dialog. Then simply enter +, -, * or / to add the appropriate op to your patch.
You don't even have to press enter anymore!

Shiny New Toys And Some Old Friends

PlayerControlPanel
To facilitate for the (pretty common) task of playing media files, or even controlling the cables timeline, we created "PlayerControlPanel". The op gives you a simple UI to work with AudioBufferPlayer, TimelinePlayer or anything else that somehow works with a "current time". Check the example for a timeline-based audioplayer that allows for skipping and navigating in the track!

VizStringLong
When debugging the state of your patches, all the Viz-Ops come in handy. If you have to deal with text, or long strings in general.

VizStringLong will now show you all the content you need to get an idea on what's going on.
VizArrayChart
This new op will make getting an overview of your arrays a breeze. Connect any array with numerical values to it an it will show the distribution of it's contents as a piechart.

If you need the values named, add an array of strings to the op to have your piechart labeled with.
GradientTexture
GradientTexture received a trigger port that allows you to randomize the colors it outputs.

The number of points you gradient will have is still up to you to decide. You can manually trigger and refine the generated gradient or just let it be completely random by triggering it, say, at a certain Interval.
Pose Tracking Mask
With a small update to MpPoseTracking you now can work with the segmentation mask provided by the media pipe library and hand it over to other ops.

The most simple example would be to mask the background of a webcam image, but we are sure you will come up with much more creative uses for this feature.
Geometries
FreezeMeshes lets you combine multiple meshes into one geometry, to optimize performance.

With GeometryToObj you can generate an .obj file from a geometry. For example, you can import your geometries in any 3d software (like blender).

More Ammo For Your Patches

With the release back in June we introduced a new way of working with physics in cables. ammo.js.

We got a lot of feedback on that and also spent some more time on our own to see how it performs. This resulted in quite some changes, additions and improvements to the ops that were introduced almost four months ago.

AmmoBody got an option to "be" a triangle mesh, it now can work with an array as an input to create multiple bodies at once. To optimize performance when using physics in only parts of your project AmmoWorld now cleans up all the bodies internally, when set to inactive via an input boolean. You will also find a new output port for all collisions that currently happen in the world.

AmmoCollision, for that matter, now can filter collisions more fine-grained. You can match the name of either body of the collision using "exact", "startswith" or "contains" matching. So "ball collides with any wall" is possible and now also works well with AmmoEmitter. Stick all of this together with AmmoRaycast, now outputting hit positions.

Show us how you create games with cables!

Things That Also Happened

For a complete overview on what changed, head over to the changelog, it is quite the read.

If you are still not done with reading, check out our updates to the documentation. We added a new section on coding your own VizOps, as already mentioned there is a whole write-up of the (new) permission system to patches and we moved the section on embedding exported patches into your website to a more prominent place.

Talking about exported patches... The exe export has been changed to not rely on github anymore. It is a lot easier to export executables of your patches now! And for folks working with the likes of react/Vue or any other framework or platform that does not handle subdirectories (well), every export now comes with a "Export without subdirectories" options. This puts javascript and assets alongside the exported index.html.

And last, but not least, we added some cool new projects to our "hall of fame". Check out made with cables to see some impressive "real world" projects that were made with cables.

Thanks to everyone who contributed to this awesome release! As always we'd love to hear some feedback from you, be it on social media, on discord or on github discussions.

Most importantly: Have fun with all of this!

cheers,
Team Cables

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:



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:



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:



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:



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!