April 2024 Release

They say "Cleaning is a practice, not a project" - well, call it whatever you want. But after the last release gave you all the power to "code" your own without even touching code, this one will make things faster, cleaner and easier.
As always you will find a comprehensive list of the errands we ran in the changelog, and some cherry-picked items in the post below...

Changes To The Editor

Smooth Operators

The editor now provides a completely fresh and smooth experience when you deactivate "snap to grid" in your editor preferences.

Now, the movement of ops is much smoother and they snap to every position that "makes sense". This can be the edges of other ops but most of the time it will try to get your cables straight by aligning them to connected ports. Give it a try!

If you quickly need the grid back, you can always press control to snap your dragged op to the grid.
Visible Math

All ops doing simple math will now automatically show their expression right on the op. 

Having your Sum op say "1 + X" is a super convenient way to see which "hard coded" values you used for tweaking your transforms or animations.



Editing Of Assets

It is now possible to edit uploaded text files directly in the editor. No need to download and upload the same file over and over again to edit JSON, HTML or simple text files.
After you have made changes to your file, any ops using the content will update immediately. 

This pairs especially well with the new handlebars op.

Website Improvements

A New Home

While reworking the whole code base of the website-part of cables.gl, we also took the time to restructure the homepage a bit.

When logging in or coming back to cables, the first thing you will now see is your activityfeed with the latest entries, alongside the latest videos, featured patches and discussions on github. Find your invites, requests, likes and activities of people you are following at first glance! And on top of that, the activityfeed will now include a notification whenever someone added a patch to a team that you are a member of - that means even less clicks to collaborating on projects.

As part of a few smaller changes, we made your "My Data" load faster, added some pagination for storage information and separated your ops into tabs for patches, users, teams, extensions, ... It should be a lot easier to find “that one op you were working on last week" again.

If you are into coding ops, we followed a suggestion coming from github: you can now have a licence attached to ops you wrote. Mention the licence you share your op with while editing the rest of the documentation. This defaults to the "MIT-License", but feel free to put anything in there. This list might be a good starting point to find an identifier, though.

For your own spring cleaning session you can now choose to "leave project" on the patch page once your collaboration is finished- to keep "My Patches" clean and tidy.

In case you want to get some help from the community and are unsure on how to best share a patch for feedback, we added a small guide to the FAQ section of our docs.

Some New Ops

Control Blending

As an addition to the existing simple blendmode operator, the new GlBlendFunc op gives you full control to use all combinations of OpenGL blend equations.
Editing Positions

Are you annoyed by typing in coordinates or importing 3D scenes to extract points? Now you can simply edit them by moving objects with your mouse and fill up an array. 

Array3PointEditor allows for quick position adjustments of objects or points using the well-known helper gizmo. 

In the future this will be improved to feature scaling, rotation and more....
Scene Switching

One of the most asked questions we get is how to easily create transitions between scenes.

We already have RouteTrigger to switch between scenes in a hard way. The new RouteTriggerAnimated adds animation capabilities to it, so you can easily cross fade your scenes now!

Since this is a SubPatchOp you can clone it and easily make adjustments to it to serve your very personal requirements. Without having to write any code!

Going Outside

While we were working on increasing server performance, allowing for releases without any downtime (did you notice?), we also added more projects to "made with cables". Check them out to see what people are using cables for in commercial or artsy projects and even for teaching purposes.

Especially worth mentioning here is a new platform created by cables users kikohs and bagoof. They started "decode.gl" and published videos on more than 20 topics, to get you started at different levels of cables. You will find them on their website, or directly on YouTube.

To give you a small teaser, here is the introduction:

...definitely check it out!

And for your calendars: Every first Wednesday of the month we host a meetup on discord. Join us to keep updated and share your creations!

Make sure you give us feedback! Talk to us on social media, on discord or on github discussions.

best,
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.

The following users helped to make this release possible by their membership on patreon.

kikohs - thanks for your "Gold" membership
wirmachenbunt - thanks for your "Gold" membership

Thank you!

February 2024 Release

The first release of the new year goes out with a bang!

If you want a real quick look at all the changes: head over to the changelog directly. But don't, you will be missing out on a lot of the fun.

Have you ever felt the need to share SubPatches? Now you can! Have you never been keen on learning to code but still wanted to create Ops? Now's your chance!
Are you sitting in a dimly lit area and need the editor to be just a bit brighter? Tweak it now! Is your display too small to handle both editing AND rendering? Pop it out, now!

Read up on all the new additions that come with this release below. Have fun!

Patching Your Own Ops

How about killing two (or maybe even a whole flock) of birds with one stone?!

For a long time there have been plenty of feature-requests, bug-reports and general nuisances with SubPatches in cables.gl. We didn't feel like fixing them, we’ve given our SubPatches a complete overhaul!

SubPatches are now fully-fledged, "first class" Ops that you can create, reuse within and across projects, and share with your team or the entire community. Check out the example for the new ComposingGridOverlay-op. See how the Op has a thin, grey border? Double click and jump right in to see what other ops it is composed of. Clone it, tweak it, use it in your own projects.

No more copies and different versions of subpatches in one patch, no more copy-pasting functionality that you reuse in different patches of the same project! 

All the features that come with "normal" Ops are immediately available to SubPatches as well, now. Document them, create example patches, see how they are used, share, collaborate, rename, clone, create new versions, you name it...

Getting Started

To get you started with creating your own Ops, from Ops, you can click on "Patch a new op" in the Editor-Menu, or mark some ops and pick "Create Op From Selection".

Depending on the context you are in, cables will automatically create an op for your from your selection, pick a name and open the editor. You know this from somewhere, right?

Clicking on "Manage Op" of a newly generated SubPatchOp will open the new port editor...
Creating Ports

...from where you will be able to create new ports for your Op. These ports can be named anything and have all the basic types for ports that are provided by cables.

Pick wisely, as this will be the outside interface of your Op. All the ports will be available on the inside of your SubPatch for you to work with. Make sure to connect all the exposed outputs, so people can work with the results of your patching.

Feel fine with all the ports but made a mistake? Wrong order? Wrong name? Did cables autogenerate to your dislike? Edit them...
Pushing Things Into Place

Once you enter the "Manage Op"-Tab of a SubPatch-Op, you can reorder ports, rename them or, as with any other op, clone, rename and document the op.

Moving around ports will reflect immediately in the patch field, this way you can fiddle around with order and names until you like it. Hint: most of the time you want the triggers (in and out) on the far left, so your ops snap in easily when dragged into the MainLoop.

Pushing The Limits

All the people that already support cables.gl on Patreon will love this! We used to limit upload sizes for files to 100 MB. A reasonable size that let everyone upload images, models and audiofiles but also kept our storage-costs at bay.

With the rise of things like Gaussian Splatting, HDR-Images, Multichannel-Audio and, last but not least, AI-Models things start to take up a bit more space. We got you covered for the future!

We now link these "limits" to you support-level on Patreon (or some special memberships for contributing code to cables directly). So if you really need more space or have to upload bigger files, simply chip in to one of the sponsorship-levels on Patreon, link your Patreon-Account to cables and immediately take advantage of your new freedom.

To see what we think are reasonable limits, we added some stats, a list of your current usage of storage and exports and your current memberships on cables.gl to "My Data" in your account section. Some of the memberships (like the Patreon Level and a Contributor Badge) will also show up publicly on your user profile. Your claim to fame!


Changes To The Editor

PopOut Canvas 

We started this journey with ExternalCanvas in the last release. This update will give you the power of "multi-screen-patching" in the editor. 

Click the new "pop out" icon below the renderer and have your render window seperated from your patching window. This (different from ExternalCanvas) will also display any HTML-Elements you added to your patch, and update them accordingly. 

Want to test your patch in portrait-mode? Working on responsive layouts? Need to test on retina? Fiddling around with external touch displays? Just pop out the renderer, patch on one screen, render on another!

All The Colors

The colors in the cables-editor got a fresh new breeze. All the Ops are now also visually sorted into their respective namespaces.
You will recognize by the color of the op which type of data they are working with and what family of ops they belong to.

These colors also are reflected in links, ports, the opselect and even the reworked op-page on the website. Getting a quick grasp on wtf is going on in a patch is now a lot easier on the eyes.

Customize It

All these colors come from a "theme". And what's the best tool to use when creating a theme for the cables editor? Exactly: cables.

See the patches in this patchlist, clone them, tweak your own colors and store them in your browsers storage to use them in all your patches.
Made something nice? Winter-Theme? Summer-Theme? Paper-Theme? Share them with us via Discord, and we'll put them in the patchlist.
Keeping Context

Data flows. Where from? Where to? Sometimes it's not easy to tell.

Cables will now highlight all the relevant parts of any connection for you. Once you click any Op, it's connections become highlighted.
Once you hover any cable, it will also highlight and illuminate the ports that it starts and ends at.

If you are not using intercontinental cables across your patch, this will show you where your data goes at a single glance...


Slowly Fade Away

...and if you indeed ARE using intercontinental cables...we also have something new for you.

Any connection between two ops that reaches a certain length will now "fade out" in the middle to make way for other crossing cables or ops that are in the way.
Hovering the link, or clicking any connected op, will show you the cables at full glance again. 

Never again feel bad about all those overlapping cables! At least they are now hidden under the carpet.


Ops To The Rescue

Below is a short list of new ops that come with this release. As mentioned above, take a closer look at ComposingGridOverlay, as it is the first Op in the core of cables that is made entirely of other ops. More to come!

If you are still into coding ops, for whatever reason. We also tweaked the "Op Rescue Editor" for your. With this simple text editor outside of the cables editor you can easily recover from most of the mistakes you made when writing Ops or shaders. We added text editors for attachments, formating code and fine tuned the looks a bit. How do you get there? Oh...didn't we tell you that there is a new page that lists all Ops that where created by you? Head over there, pick any Op, scroll down on the op-page and press the edit button...or simply click on the link in the error-modal that will pop up if you screwed up too hard 😉

Anyhow, check these out...

...and we thought this would be a small release. Well then, here we are.

Make sure you give us feedback! Talk to us on social media, on discord or on github discussions.

For your calendars: The next cables meetup will take place on February 14th (20:00 CET). Check the event on discord to keep up to date with speakers and topics!

best,
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.

The following users helped to make this release possible by their membership on patreon.

kikohs - thanks for your "Gold" membership
wirmachenbunt - thanks for your "Gold" membership

Thank you!

Using cables in the classroom

While trying out a new creative tool for yourself is fairly easy, deciding on the right platform to introduce to your students as a teacher or professor is probably a bit more of a serious task. First and foremost, your platform of choice will need to be easily accessible to all of your students. But you will also want to make sure it is easy to learn, and provides enough material to empower self-paced progression.

Running fully in the browser, free of charge, and with tons of published projects to learn from, we believe cables is the perfect visual programming platform to use in the classroom. And we are excited to see that more and more universities around the world are starting to use cables. Digital Art, Web, Graphic and Motion Design, UX, Digital Humanities - the range of areas students are coming from is impressive, and so is the variety of projects they have been creating using cables. 

We wanted to learn more about how people are using cables to teach creative coding. So we reached out to some of our dearest community members who work in education. Let’s hear their take on introducing new tools to their students, and how that is going with cables specifically. By the way, they didn’t get paid for any of what they said 🙂

Please meet…

Kathi Mayrhofer (kathl)
Spatial experience developer at Austria based ‘responsive spaces’.

Teaches Design Technology Tools at Linz Art University in the Media Institute, and Generative and Interactive Art at the University of Applied Sciences in Hagenberg.

Kathi has been teaching in the field of interactive, generative projects, project support and tools since 2008, and her passion is the connection between code and design (in class). Professionally she has been working independently since 2008, and is now in a permanent position working on interactive, immersive room installations.


Alberto Barrios (n4hui)
Digital artist from Mexico City.
Teaches Art, Digital Media, Video Games and Educational WEB Platforms at the Autonomous University of México.

Alberto is a passionate creator of interactive audiovisual experiences, such as art installations in the real world or web apps. He also uses his art and projects to promote native Mexican language and culture. Visit his website to see an example of his work with cables, teaching Mexican native language with interactive content.



Based in Hamburg, teaches interactive media at Muthesius University, using cables and Unity3D.

Chris is running wirmachenbunt, a design studio creating and developing interactive experiences for commercial use. 


Bérenger Recoules (b2renger)
Head of digital workshop at L'école de design Nantes Atlantique in France.
Teaches digital and media design master's students, as well as ux, graphic and motion design bachelor students.

Bérenger has a background in engineering, musicology and cognitive sciences. He worked as a composer, taught himself how to code and was a media artist before starting his position at the university. He provides support for teaching, helps students throughout their projects, and teaches them as well, working with anything that is digital or new media, for example audiovisual, code, electronics, and digital fabrication.


Dr Kirell Benzi (kikohs)
Data artist, Senior applied scientist at EPFL university in Switzerland, teaching courses such as cultural data sculpting (Masters in digital humanities) and Motion Design (Creative Technologist).

Kirell is an impressive data artist working, as well as teaching at one of the world class universities in Switzerland. He creates data-driven art pieces and works mostly with data and machine learning. Visit his website to learn more about his projects.

… and here is what they said:

How did you get into cables yourself, and then into using it in your classroom?  

Kathi: “I use cables to quickly try out ideas for interfaces and communication tools. I focus on vvvv, but I wanted to give my students the opportunity to learn another tool besides that. I find it incredibly helpful that there are so many online tutorials available, which makes self-study a lot easier! I often work with students who are in the field of design/programming/concept, and as cables is a browser solution, it's easy for them to get started, no matter if they are on mac or windows.”

Alberto: “I searched for an alternative to vvvv without luck, when suddenly a video of cables appeared in my youtube. I went to the page and with my experience using vvvv and the video tutorials I learned fast, it was a dream come true, cables is my favourite app since then. I was using vvvv and vvvv.js with my students of digital art so it was natural to start to use cables and more because it is free, no need to install it, just the browser, so it is perfect for school.”

Bérenger: “I got into cables thanks to the covid pandemic. Basically I did a lot of courses online on discord about new tools and technologies when we had some gaps in our schedules because of sick teachers or other technical reasons. Cables was one of them 🙂 I followed the byte size tutorial playlist, and a few days later I made the first introduction classes about cables. It was really awesome because of the search engine and the exhaustive documentation. Even if it can get hard (because we do advanced 3D in the browser ...) it really empowers students to search by themselves.

With everything that went in cables I can really bridge the gaps between technologies: I can do mqtt with esp32 and build interfaces to control them, use arduino to build tangible interfaces (recognisable as midi devices or gamepads), include 3D models, manipulate them and display them in VR with no setup needed. I can also do interaction design with the webcam and the media pipe ops (as well as teachable machines) - and all that with beginners. I think it has the potential to be the fastest prototyping tool for almost every use.”

Kirell: “I have been using cables for almost 3 years now. Found it by accident by looking at realtime alternatives to Houdini on the web. It is a great tool for teaching because it has a short learning curve to get started yet is powerful enough to create impressive projects.”

Chris: “After teaching vvvv for almost 15 years, i switched to cables because it is so much more accessible and visually appealing to artists and designers. Cables is a clear winner for the classroom since it doesn't need any special hardware, runs almost everywhere, since it is browser based. Students don't have to tackle any installation madness or licensing issues. You just register and off you go. I personally love the startup speed, just open the browser and I can sketch whatever I like. Most other tools take some time to even start or setup, which kills the flow. I totally love the teams feature. It is a beautiful way to collect student sketches and let everyone learn from the collective. While also giving me the ability to directly help students without the hassle of sending project files. Since i use and teach vvvv, Unity3D and Unreal, i can say cables is definitely the easiest one, to get into realtime graphics and creative coding.”

What’s your typical approach to getting your students started with cables?

Kathi: “I always show motivating projects, discussing them together to show that everything is possible if you approach it in small steps. Students need to see that they can find a lot of help online, and in addition to that I always write down all the ops that we look at and put up a link list so they can read more in their own time easily.”

Alberto: “From the beginning to celebrate the Mexican "day of the death" and 3D tours of the schools to help new students. Also when teaching Web Design I show them how to make things with html, css and java script but in cables, and I also teach how to make video games.”

Bérenger: “I do a few introductory classes to let students know that the tool is here and what it can do. Often the first half hour is about building a cube and controlling its size with your hand through a media pipe - it's always a big success to be able to make this kind of thing so fast with beginners. And then we customise aspects with a sidebar, go into compositing and displacement maps and make all that react with audio. After that we do a lot of 3D with gltf files, shadows, physics etc. If we have time I do a bit of html/css and sometimes coding.”

Chris: “The documentation is very helpful to get started. What stands out is the ability to inspect every published patch, enabling you to learn from others. It's dead simple to share your projects to collaborate or seek help. And let's not forget the hybrid character of cables. It's not just a patching environment, but invites you to code your own javascript ops. Again, it is very easy to get into op coding since every op code can be looked at, hence you can start alternating other people's code and learn from it. I typically start by showing my professional projects, making demo patches for every class, showing works of former cables students, and surfing through the best of the best patches on the cables website.”

Kirell: “I quickly show how easy it is to use instancing and start building small time driven particles movement. We generally need 5 or 6 hours to cover most of the aspects of the tool and then we switch to personalised help for students’ projects every week for 8 weeks.”

What do your students typically work on with cables?

Kathi: “At Kunstuniversität Linz my students are taking their first steps in graphical surfaces, aiming at transforming data and numbers into visual language, creating data based patches, and querying sound or APIs. Topics at FH Hakenberg are computer graphics (know your roots), generative patterns, animation-based 3d world, pointclouds + data, and sound-reactive experience. I do many, many small exercises, and the more diverse the group, the more open the tasks. It is important to make sure that everyone is able to meet the minimum requirement of a deliverable. I also always share the patch of the hour.”

Bérenger: “The first class was about making an interactive poster with graphic designers - it was only 4 sessions of 3 hours but the students did some pretty nice work. We will soon use cables on a project called Oceans to do some museography installations with our digital master and we are preparing a very exciting workshop about interactive narration with our second year students from our ux and game bachelor program!”

Chris: “Students come from Industrial / Interface Design, Communication Design and Architecture, therefore the application of cables varies a lot. We work on interactive data visualizations, product presentations, generative art and large spatial installations with physical inputs. And probably much more categories since cables is a blank canvas which can be used in many ways. One focus is definitely the use of cables outside of the web realm, using cables in combination with physical computing, all sorts of sensors to transform spaces and create exciting exhibitions.“

Alberto: “I use cables with my students mainly in team work, so they are part of the process making suggestions, materials or tweaking already done patches. I am currently making a modular course in Spanish to teach the basics, how to make 3D tours, web pages and digital art based on my artworks. I also did some YouTube tutorials and soon that will be updated.”

Kirell: “I’ve used it in the classroom for designers and engineers at master level. It is a very good tool to create interactive experiences on the web. Most of the grade was on a personal individual project made with cables.”

How is it going for your students, did you get any feedback from them?

Kathi: “The course is still running, so I only have little feedback, but it looks like they're really enjoying it at the moment. From what I have seen so far, I think I’ll just reduce the pace a bit next time.”

Chris: “The feedback I get is pretty good. But with every development environment, you need to practise a lot, no matter how easy the software is. In order to get your ideas into a patch, you need to know the language. I can guide the students only so far, offer them 1 to 1 help, discuss their projects in the class, analyse real applications of cables... but in the end, students need a strong interest in real time graphics and 3D.”

Bérenger: ”Students are really impressed by the UX and the flow you can get in this environment. Passing a patch in VR mode is always impressive for students because it's so simple. The documentation is a big aspect to empower them - I can teach them how to explore the docs and how to use the amazing search engine (by categories etc.), so they are more independent before even facing any issue. The collaborative aspects, remote control and export modes (video / image / code download and exe building) make them really confident in being able to produce something useful for any projects. And for many of my students the timeline is also something reassuring.”

Kirell: ”Students are thrilled to get started and happy to quickly see results.”

If you too are using cables in classrooms, workshops, at hackerspaces or anywhere else to teach people, sure let us know! Share your experience on social media or discord.

Thanks so much to everyone who contributed to this article by sharing their teaching experience! We are looking forward to seeing more of what you are doing in your classrooms!

best,
Team Cables

November 2023 Release

Coding ops and working together on projects or in teams is an important part of the cables community. Therefore, making it easier to find out what's going on in your teams and patches, without breaking your flow of working, has been long overdue.

Read on here or visit our changelog to find out how that works, and what else we’ve got for you in this update.

But Before We Start…

We would like to thank everyone who chimed in to support us via Patreon so far! 

Your paid memberships already provide enough budget to cover server costs and the monthly discord "boosts". This means a lot! Up until now, we had to stem this purely through undev, our small, two dude company behind cables. 

If you enjoy using cables, please consider supporting us as well. Patreon is now offering annual memberships as well, with a 10% discount!

Activityfeed

Lots of patches, collaborators and teams working on different projects or ops, and public patches collecting likes and comments. That’s a lot, and it was a little hard to keep track of what needs doing, and what else is happening in the cables community. 

With this release we are introducing the Activityfeed. This is the one place where cables will notify you about actions required, likes to your patches and comments left for you. 

If people are requesting access to your patches or teams, simply find a note on the Activityfeed, click the red bubble on the website or in the editor, and act on these right away.

Go check it out. The last 30 days of activity on your feed have been pre-filled by us...

Notification Settings

To flag even more what needs your attention (access requests, invites, ...) you can now set how to get notified.

Get an email (as you used to), get a small hint in the editor when you are currently working on a patch, or register different devices to receive push-notifications.

Try registering your mobile phone for really quick reactions on access requests and invites by people you are working with.

All these are for "action items" only, keeping the signal-to-noise ratio in check, even with large teams and collaboration projects.

Editor Changes

Texture Preview

We’ve updated the texture preview in the editor to allow for quick rescaling of the preview image. Along with the VizTexture-Op this gives you a nice, quick way to see the outputs of your different render- or post processing stages. 

Did you know you can also make it stick open?
Color Indicators

To give you more visual feedback on the state of your patch, we added an indicator for the color that is set on basically any Op that works with RGB inputs. 

This works even when animated and provides a quick overview of all the colors that make up your patch.
Color Schemes

Using the ColorScheme op you can now act on a scheme that's set in the browser or device.

Create dark- and light-themed versions of your patch by querying the preferred settings of your users.

Manage Op Code

There is room for parameters now! To save you from clicking back and forth while working on ops, we moved the tabs below the renderer to the "three dots menu" of the op.

Select "Manage Op Code" to open up a new editor tab with all the functionality you need for your ops work. Add libraries, clone or rename the op, work on attachments...you name it.

You can now also select all of this with a simple click in the top of the code-editor tab.

More Neat Things

Unlisted - View Only

We implemented the concept of "patch visibility" in the last release, and removed the "secret url" while we were at it. But we heard your feedback, so now we are introducing the "Unlisted View-Only" mode mode option. Share patches with the community or your clients, but keep your cables magic to yourself.

PBR Material Revisited

Thanks to amajesticseaflapflap for revisiting PBRMaterial and adding more "clear coat" options and "thin film iridescence" for everyone to use!

You can now finally coat your automotive models in a metallic look and put some oily, shiny puddles underneath.
Patch Page Improvements

On the patch page, collaborators will now find all your used User-Ops and Team-Ops along with all the Patch-Ops that belong to the patch. 
Time to clean up before you publish your patch!

With the right permissions, you will also be able to access the settings or export the project directly.

Faster Loading And Saving

Thanks to the support through Patreon, we were able to revisit our server-infrastructure and optimize it significantly. And while we had our eyes on loading and saving speed, we went through a lot of pages on cables.gl to reduce loading time, waiting for saving (i.e. in the editor), the size of requests by removing unneeded data and a lot more… You should notice that immediately. Sorry, less coffee breaks for you!

Ops

A few new ops also appear in this release, check them out in the changelog, or individually


...that concludes the November 2023 Release.

Make sure you give us feedback! Talk to us on social media, on discord or on github discussions.

For your calendars: The next cables meetup will take place on December 13th (20:00 CET). Check the event on discord to keep up to date with speakers and topics!

best,
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.

The following users helped to make this release possible by their membership on patreon.

kikohs - thanks for your "Gold" membership
wirmachenbunt - thanks for your "Gold" membership

Thank you!

September 2023 Release

Hello Everyone,

after handing out the roadmap for what's to come last time, we are back again with a new release of cables.gl.

Head over to the changelog to see all the changes one-by-one, but read on to get a rundown of some highlights.

You will find that we improved the workflow of collaboration even more, give you some nifty tools for VJing, let you organize your favourite patches and make you animate your 3D models even easier. And that's not even all of it!

External Canvas

Cables already has the means to edit patches and view on other devices or windows in near real-time for quite some while. This needed a networking connection, proper setup of credentials and still comes with a few drawbacks, though.

With the "ExternalCanvas" op, most of these are a thing of the past. Patch live - in a club of your choice - project to different displays, test on second monitor...

VJing with cables

Open your patch, add the ExternalCanvas op, put it somewhere into your MainLoop and click "Open Window". Pick different names, if you need multiple windows. 

Tweak some parameters and see things update in real-real-time.

Shape Keys

GltfScene now has better support for morph targets and shape keys (weighted morph targets) or vertex animations.

This makes it possible to - for example - create unique generative animations of predefined shape states - or simply export complex vertex animations that were created in an external tool without skinning or rigging.

Visible Patches

To improve the workflow of finding, remembering and working on patches we are adding patchlists to the mix of options to collect a bunch of patches together.

Patchlists integrate nicely with all the other "lists" in cables, be it teams, collaborators, featured patches, ...

Patchlists

Adding a patch to a list - or managing which of your lists the patch appears on - can be done right on the patchpage.

Via the new "Patchlists" option in the "My Patches" navigation you can create new lists, make them private or keep them as "unlisted". If go for "public" visibility, the list will be shown to everyone. 

Share your favourite patches containing cubes, best practices, curated demos, ...
Good-Bye Secret URL

The new way of deciding on visibility of everything finally made it's way to patches themselves. 

Gone are the days of creating, finding and copy-pasting a secret URL to share a patch with certain people. Just put your patch on "unlisted" and share the URL. 

Patch Summary

All of this now integrated nicely into the new patch summary and a refined patch-page. Find the teams and lists a patch is related to right where they belong. The new patch summary in the editor also gives you a bit more space. 

Click any free space on the background of the editor to check it out!

Working With The Editor

Working on the releases also involves a lot of patching. Sometimes we stumble across something that could improve the general "quality of life" when working with the cables editor. Here is what we found this time:

Math

What started as an idea on github - and already made its way into the last releases - finally made us go all the way and make adding math to your patches way easier.

Press "Esc", type "/100", press "Enter" and you just added a Divide op that already divides by 100...check all the other ones, as well!
GPU Profiler

The GPU-Profiler shows you how long each drawcall takes to render on the GPU. You can analyze which texture effects or instancers take the most time. 

Use the GPU- and CPU-Profiler to fine out what is slow in your patch and optimizing.
Cut Links

You really want to isolate an op? Need to cut a few links at once? 

Simply hold the "y"-key and draw with your mouse, where you want to cut, and they are gone.  Like a hot knife through butter.

More Ops

These were all our highlights of updates to platform and editor. 
The changelog mentions a few more improvements.  But here are all new ops:

To wrap things up: 
If you want to meet some of the people behind cables, there is a good chance at deadline demoparty in Berlin.

Check our the awesome invitation "BRVTL" by "slay bells" and "farbrausch", that we were kindly allowed to snatch a screenshot from for this blogpost:

If that doesn't keep you exploring for a few days: more fixes and improvements can be found in the changelog, as always.

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

Also: Join our meetup on discord on September 20th (20:00 CEST) to hear cables user kolektyw talk about "Building AI tools with cables.gl".

best,
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.

The following users helped to make this release possible by being at least "gold member" on patreon.


Thank you!

Supporting Cables

For a long time we have been asked on how we can keep cables free and open to everyone.


We finally made the move to make cables.gl a project that you can easily support financially using Patreon!

By supporting cables on Patreon you will be able to pick from one of five levels. The levels differ in the monthly amount - obviously - but also in the benefits you get with each level.

Keeping our word that cables will always be free to use, we keep the benefits of supporters "visual" and "early access". 
No "freemium" or "pro account". Some also get awesome shirts!
Pick some level that you feel comfortable with and rest assured that we love supporters at every level.

For a up-to-date list of what the different levels contain, head over to Patreon itself.

All of the levels will give you one of the icons above on your user's profile and a smaller one on discord. 
We mention everyone on the credits page, and supporters of any level will join a super-exclusive channel on our discord server.

We will be releasing new tutorial videos early for supporters of the silver level and above.
If you are in for the shirts and stickers, you should pick the gold level or above.

Once you go above gold, we set aside some time at your request to help you with anything cables related. Book us!

So now you might want to know what exactly we are up to that you could be a part of, right?

The Future

Here are some things to come, with your support
Editor

Blueprints

Create ops by using the editor, just like patches
Editor

Helper/Overlay System

See and know the bounds of your 3D world and navigate with ease
Editor

Scoped Variables

Avoid conflicts when using lots of variables in one patch
Engine

Shadergraph

Code shaders, without programming
Engine

WebGPU

Support the next generation of accelerated graphics on the web
Engine

Particle System

Create, simulate and animate clouds of particles
Platform

Patchlists

Organize your favourite patches into lists. Collect them all!
Platform

Notifications

Keep track of your invites, team members and all the updates on cables.gl
Ecosystem

Offline Version

Work on your patches on the go, present without an internet connection
Ecosystem

Open Source

Open up the code of cables.gl to the world

Rest assured that all the other ways of supporting cables are still good way to go.

Along with all that, you can check on more fixes and improvements in the changelog of this release.

So...head out and support the development of cables, in one form or another.

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

best,
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.

June 2023 Release – Part III

ops ops ops

This is just a selection of some new ops.
Expect more youtube tutorials in the next weeks where we will go into the details and how to use them etc.

If you have any questions or requests let us know on discord or the forums!

Check out the last changelog entries for more new ops

Render To Multiple Textures

This Op received a complete overhaul: Render many arttributes to different textures at once.
You can render the XYZ positions of each pixel or mesh to a RGB texture.
Now its easily possible to render id for current material, index of instancer or many other things into color values!

Debugging colors

When working with data textures it is often hard to debug. The VizTexture op now can show RGBA values at a pixel position for much more direct visualization of your data
Intersection Ops
This is a new group of ops for just very simple picking/raycasting and inter body collisions.
Often we don't want to use the >1mb big ammo library when we don't need any physics simulation, just some simple clickable 3d objects.

check out the intersection example
Composing Data Structures

For a long time we have ImageCompose to compose images. The same workflow now can be used to compose Arrays and Objects!
You can now use trigger ops like repeat to store values in arrays!

Check out compArray and compObject
Spring Animation Op

The new Spring operator is an advanced version of the good old smooth op. Just plug in a number and it gets animated in a springy fashion!

Thanks to lorenzomf for this contriubtion!


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