Instead of AdBlock, enjoy ad-free CAN by becoming a member. Everybody wins!

Working with Toxiclibs [Processing, Tutorial]

Would you like to create what you see in those videos? Well, read on! Because in this article I will show you how you can do just that using Processing and Toxiclibs. As Processing’s biggest open source collection of libraries, Toxiclibs can assist you in areas like geometry, physics, math and color. With so much code candy for the taking, the libs can still be a bit daunting for many people, especially Processing beginners. That’s why – in addition to great functionality and documentation – clear and inspiring examples on how to use the library are so important. Fortunately the collection of code examples bundled with the libs is growing steadily. I hope my examples can add to that and be helpful to those learning how to use this wonderful collection of code which is shared and continuously developed by Karsten Schmidt.

I’ve already shared the two code examples from the first video on my blog. As the video shows these concern creating, picking and dragging polygon shapes (example 1) and the destruction of voronoi tesselated circles (example 2). The full source code and a more detailed explanation of those two examples can be found HERE. In this follow-up I will share the source code for the two brand new examples you see in the second video. This time I’m venturing a little deeper into the physics capabilities of Toxiclibs, more specifically the VerletSpring2D class (example 3) and we will explore a whole new area of the libs, namely the color library (example 4). All of the examples are commented as much as possible. So by running them and looking through the code, you should be able to understand what’s going on. The rest of this blog post can be considered additional background information ranging from general description to specific pointers. Note (06/05/2011): Karsten came up with some useful suggestions to further improve the code, which of course I was happy to apply. This explains why the visuals when running the code may differ ever so slightly from what you see in the movie.

Example 3: The Infinite Rope

What’s better than a rope? Exactly. An INFINITE rope! This example demonstrates both the creation and efficient removal of particles, springs and behaviors. The three pillars of the physics system. Specifically it uses the VerletSpring2D class, which can connect two VerletParticles in space. For simplicity it’s kept 2D, but everything with regard to physics in Toxiclibs also has a 3D equivalent. Let me describe the way it works and some of the specific choices and solutions. When the mouse is dragged a new particle is created and connected to the last one, effectively making a digital rope. Release the mouse to start a new rope. Push behavior is added to each particle to make it look a little more realistic. For aesthetic reasons, the color of every segment is determined by the direction of each spring.

The most important part of the sketch however, is the code that removes off-screen objects. This is absolutely imperative to keep things running smoothly. Let me elaborate on two specific aspects with regard to the removeOffscreen() function. First, it’s running backwards through the for loop! This is because we are removing things from the list. Meaning the list is getting shorter while you are going through it. Therefore you need to go backwards to prevent problems and to make sure you cover every item in the list. Second, notice that I remove behavior(i+1) for particle(i). The reason is that the first behavior on the list is the gravity we added in setup(). Therefore the behavior of particle 1 can be found in position 2 of the behavior list and so on.

Example 4: NamedColors

Aesthetically somewhat similar, but technically completely different, this example is meant to demonstrate how to use TColors in general and NamedColors in particular. If Vec2D/Vec3D is the heart of the geometry lib, then you could say TColor is the heart of the color lib. It’s the basis for much greater possibilities such as color ranges, themes and gradients. But to grasp this part of Toxiclibs, I think it’s best to start with a basic example. For this I chose the NamedColors since they are less abstract than working with numbers alone. In the color portion of Toxiclibs there is a list of 143 NamedColors that you can use. They have names like azure, darkturquoise, lavender, orange and last but not least peachpuff. When working with TColors it’s important to remember that you need to convert them into something that can be used in a Processing fill() or stroke() function. In this example you can see that every time the color is actually used, it’s converted into a packed ARGB int using the toARGB() function.

So let me walk through the sketch real quick. In setup() all the names are loaded into an ArrayList of strings for the purpose of sorting them alphabetically. Running the sketch presents you with the full color palette. I’ve applied some ZoomLensInterpolation to bring out the selected color (mouseX) and made it move up and down with the user (mouseY). There are some checks to make sure both the name and it’s background are kept within the boundaries of the screen. The right mouse button changes the background color, while the left mouse button creates a colorWorm at the mouse position. Press any key to toggle the palette on/off, the mouse functionality will keep working. The colorWorm is basically a list of up to 25 points, a direction and a certain color. It starts at the mouse position and then moves randomly, adding new points along the way. Since the directional change is limited to 30 degrees, it will generally keep going into a certain direction instead of wriggling around the same spot. To make it a little smoother all the points are loaded into a Spline2D which is then subdivided. From the vertices that come out, the line is drawn.

That concludes this round of code sharing. For all things Toxiclibs go to toxiclibs.org. A description of how to install contributed libraries for Processing can be found here. If you would like to know if and how Toxiclibs can help you with your project, but are unsure of where to start, I suggest asking for help in the Processing forum. There are quite a few people over there (including Karsten himself sometimes) who can help you out with advice and maybe even code examples. So good luck and get creative! ;-)

  • http://www.facebook.com/profile.php?id=551931496 Ashley James Brown

    stunning work as always and gt documentation

  • Victor Pardinho

    Hi, can you re-post making the videos didn’t play without a click on the play button?
    because now everytime I open my reader the musics starts to play. I believe other people will have the same problem and I don’t want to delete one of the best site about tech creativity because of this.
    Thank you.

  • http://www.creativeapplications.net Filip

    Done. Sorry about that, my fault :)

  • Victor

    Can you tell, how did you capture the video?

  • Processingparis

    Many thanks for these. We need more tutorials for ToxicLibs.

  • http://amnonp5.wordpress.com/ Amnon Owed

    I always capture image sequences using saveFrame(“/output/seq-####.tga”) and then composite them. The reason for choosing TGA is that it works close to real-time while ensuring 100% quality.

  • Victor

    Thank you!

  • Mtnsaray

    Finally someone made a guided us through toxiclibs, can’t thank you enough

  • Mtnsaray

    Finally someone made a guided us through toxiclibs, can’t thank you enough

  • Anonymous

    couldn’t get infinite single string to work; second one did just fine… am I missing something besides toxi?
    Processing 1.5.1

    Line 54…
    for (int i=physics.particles.size()-1; i>=0; i-) {

    processing.app.SketchException: unexpected token: )
        at processing.mode.java.JavaBuild.preprocess(JavaBuild.java:326)
        at processing.mode.java.JavaBuild.preprocess(JavaBuild.java:197)
        at processing.mode.java.JavaBuild.build(JavaBuild.java:156)
        at processing.mode.java.JavaBuild.build(JavaBuild.java:135)
        at processing.mode.java.JavaMode.handleRun(JavaMode.java:176)
        at processing.mode.java.JavaEditor$20.run(JavaEditor.java:481)
        at java.lang.Thread.run(Thread.java:680)

  • Anonymous

    Thanks!
    got all the other demos to work; infinite line threw a unexpected token error… line 54 – thought I was missing a semi or possibly a bad copy+paste… was there another class besides toxi (set) that I needed. processing.app.SketchException: unexpected token: )

    processing 1.5.1; mac os/x 10.6

    first time to toxi; haven’t worked with processing since ~1.2

  • Anonymous

    couldn’t find VerletSpring2D class, the link goes to a bad page…?

  • http://twitter.com/51joe Joe Stevens

    hi capitaltreasureson Line 54…
    for (int i=physics.particles.size()-1; i>=0; i-) {
    it should be
    for (int i=physics.particles.size()-1; i>=0; i–) {

    that is its missing another minus sign at the end