WebGL in Cinder

At The Barbarian Group, we have an impressive 9 screen rig that was used for the Samsung CenterStage project. Since it’s been running the same application nonstop for 2 years, we figured it was time to give some other applications a shot up on the big screen. In addition to running other Cinder apps, I wanted to figure out how to get WebGL running on it.

CenterStage Rig

The original Samsung CenterStage rig

Read More

Animated Gifs in Cinder

It’s crazy to think that we are all still talking about animated gifs in 2015. But we are. Even though it may seem like a silly thing to do, Cinder supports the loading and displaying of animated gifs.

Following is a simple class for loading and playing said animated gifs. All it does is loads the animated gif from your asset folder. You can optionally set the framerate to something other than the default 60fps. Note, this doesn’t take the original gif framerate and timing into account. It simply loads and stores references to the frames of the gif. If you want more advanced control over decoding and encoding animated gifs, check out Jesús Gollonet’s GifEncoder and GifDecoder Open Frameworks add-ons. You should be able to use them in Cinder with relatively little effort.

The Road to Cinder Docs

Cinder Docs homepage

Last week, the latest version of Cinder (v0.9.0) was released. This release is kind of a big deal. At least it is for the creative coding C++ developer community. Over the last year and a half or so, Cinder has been going through a rewrite to enable the use of Modern OpenGL and to pave the way for for supporting future platforms ports, like Android and Linux. This was a massive undertaking and it’s been amazing to witness the steps taken by the Cinder development team in real time. Other features this update includes are the inclusion of GLM for all math functions, the Logging API, EXR support and much more. You can read the release notes here. This release also came with a new Cinder website and a new docs website.

Read More

The Nature of Code for Cinder

Last year, Daniel Shiffman released The Nature of Code, a book that explores and explains how to simulate systems that appear in nature using processing. In the intro of the book, he made a declaration to anyone that cared to contribute to convert all of the examples in the book into other relevant languages that might be useful to people, be it flash, javascript, openframeworks, etc. I took this as a chance to learn the principles taught in the book and convert everything to Cinder.

I’m still working on it in my spare time, but I’ve made some progress. You can check out the first 4 chapters on github. I hope to have the next chapter done in December. Enjoy.

And if you haven’t checked it out yet, take a look at The Nature of Code. Buy the ebook or print copy. Whatever. Dan does a great job breaking down the principles that are necessary to simulating these different systems in a way that’s accessible and makes you actually feel kind of smart. It’s quite great.

Flash to Cinder – Timed Event Loops

This is the first tutorial in a series designed to help Flash developers transfer their skills to the C++ creative coding framework Cinder. I’ll provide links to sample code at the end of the post. There’s a lot to learn, so lets get started.

Timing events to happen in a repeating loop is a common technique used in games and applications. It’s commonly used in games when for instance, you want a missile to attack you’re hero every 2 seconds or in an application when you want to remind the user where to click if they haven’t touched anything in a few minutes. I recently used a timed event loop for an installation that required an image transition every 30 seconds.

Read More

PathFitter Block for Cinder

PathFitter Screenshot

I created and released my first cinder block and wanted to put it out there to see if it’s useful to anyone else.

What it does is simplifies and returns a smoothed out, simplified Path2d object based on a vector of Vec2fs that you pass to it. It uses the same algorithm that paperjs uses, but c++-ified. It’s a slightly modified version of An Algorithm for Automatically Fitting Digitized Curves from “Graphic Gems.”

There are 2 samples in there.

  • PathSimplification: Drag to draw a line on the screen. Once the line is finished, it analyzes and smooths out the line, letting you know how many lines you saved. It’s based on this paperjs example.
  • ContinuousPath: Analyzes and smooths a path as you draw it. Could be good for making a drawing application.

Read More

SWC File as Embedded Runtime Asset Library

This post is really for myself so that I have somewhere that I can look this up again. Maybe it’ll be helpful to someone else in to the future too.

When working in flash (which I find myself doing less and less now a days), one of my favorite ways to work with assets is through the use of swc files. That’s what they’re there for anyways right? Well what’s not so obvious is how to use swc files to load assets at runtime without using the import command. There are times that it’s useful to refer to an asset at runtime by name that you may or may not use, so you don’t want to explicitly go through the hassle of writing the lines to embed it. This often happens with sounds or items that are easier to loop through to use, such as when using a map of the US. It’s much easier to write a loop vs writing 51 embed statements (yes, I know that there are a million different ways of doing this without writing all of that).

When you do something like going through a loop and saying getDefinitionByName(“state_”+i) to grab a library item that resides in the swc asset file, there are no compiletime errors because Flash Builder can find that swc in the library. But once it runs, the debugger will yell at you. To fix this, you need to embed the swc file at compile time. In Flash Builder, this is done in the Actionscript Compiler settings and all you have to do is add this line (replacing it with the path to your asset swc file obviously)

-include-libraries /assets/assets.swc

Now when you run your swf, it’ll work like a charm and you’ll have those assets available without having to import them in the head of your class file. That being said, be sure to only do this when it makes sense. This embeds the swc file into your swf. So if there are assets in the library that are outdated and set to export at compile time, they’ll be included adding extra senseless bloat. As I write this, I’m using this method for a prototype where bloat doesn’t really matter, but just be mindful of that.

Setting the swf Base Directory in HTML

Have you ever completed a flash project and started testing it online only to realize that the swf is looking for assets either in a different directory than the one you specified? Or that the folder that you have all your media stored is not in a relative directory like it was when working on it locally?

The solution that I mustered up in the past was to create a flashvar called something like “mediafolder” and put that in the embed code. From there, I would go back into my actionscript code and make sure all external media had the passed “mediafolder” variable appended to the beginning of the url for each external asset and then republish my swf.

This always worked well, so I usually plan for this, but my latest project didn’t have that built in. When it came to testing and we realized that the media folder was going to be in a different location than the base swf file and it was supposed to launch soon, it was time to see if there was another alternative to the usual solution. That’s when I discovered the “base” attribute in the swf object embed code.

The “base” attribute is actually an href attribute that specifies a base URL for all relative URLs on a page. Traditionally, you should be able to put it in the head of an html page and have all links on a page link relative to the string specified in the base attribute. For this it’s just specified for the swf, which picks it up when passed as a param and picks up any external asset from that folder by default instead of the folder that the actual swf is in.

Here’s a sample of the swfobject embed code:


With the example above, any asset that the main swf is trying to load relative to itself can now be placed in “../project/subfolder” without having to change any actionscript and republishing your swf. This is a tip that has saved me hours of work and would have saved me even more time had I discovered it in the past.