Category: Uncategorized

A new update to cables.gl, with new features, quality of life improvements and some bug fixes.

Read up on all the changes in the changelog, or continue reading to see how we improved working with HTML and CSS, how you can now manage and rename ops directly in the editor, and how you keep track of everything that might go wrong while patching.

Sounds interesting? Let's start...

HTML and CSS are the bread and butter of every web developer. Even when working in 3D-Space, you might end up using CSS, since that is what the browser is more used to.

We added Ops that make it easier to create CSS code - without actually writing it - and integrated HTML-Elements into some of the well known cables workflows.

To give everyone a bit more insight on what is actually happening "behind the scenes" - what might what actually does go wrong - we revisited error-handling in cables.gl and cables standalone. 

This should help clarify which errors are critical, which ones are on the authors of the op, on the users of the op, or on us...

...check out the changelog for more features, improvements and fixes.

Stay tuned for the upcoming new version of cables standalone!

...spring took a bit longer to turn into summer (at least in Germany), so we extended our spring-cleaning session as well.

But, as always, the new release also comes with new features, improvements and changes. Read up on everything at a glance in the changelog, or continue reading for some hand-picked highlights in the following blog post.

Feel free to leave feedback, reports and further ideas on our issue tracker or on discord. Here we go...

While we hope that summer will finally come, this (and more) should keep you busy for a bit.

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

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.

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.

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!

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

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!

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.

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 🙂

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.

Christian Engler (wirmachenbunt)

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.

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.

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.”

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.”

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.”

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!

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.

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!

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.

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!

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

...that concludes the November 2023 Release.

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!

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?

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.

Team Cables