You can put this code into a .lib file and import() it into your sketch to add support for quadratic curves to Processing.js.

The actual reason I created this was the need for flexible rounded rectangles, which don’t look smart unless you use quadratic curves for the corners. Because it’s a shape based on a path you can modify fill and stroke as usual.

Finally here’s the result. I’m using a stroke weight of 2 pixels and a 10 pixel radius for the rounded corners.

Evolving shapes and camera movement are controlled by audio events on the one hand, and my NintendoDS featuring the NDSVisuals-Project on the other hand.

The video below is a 2-min-overview of what potentially would happen — the actual colors usually depend on my current mood :). Watch it on the Vimeo Site for better quality. Additionally, there are some screenshots of the running VVVV-patch below.

Since I don’t have much experience in the animation business, I did some research and found a really good introduction to Motion Tweening by Robert Penner.
I also found an existing library for Processing called Shapetween. However, I favoured the approach Robert Penner takes for his ActionScript Motion Tweening Library. Letting a Motion Tween directly manipulate properties on objects totally makes sense to me (at least for Processing.js).

Fortunately Philippe Maegerman has already put together a Javascript version of Robert Penner’s tweening library. So all I had to do is adapting the code for use with Processing.js.

Here’s what I came up with:

Motion Tweening

This first example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Please click on the canvas to start/restart the Tween.

The code for this example is quite simple. Two Tween objects are created and bound to the object (most often “this”) and property that should be manipulated. You also specify start and end values, the desired easing function and the Tween’s duration (in seconds).

An easing function thereby is a mathematical function used to transform data. Provided a number between 0 and 1, an easing function will return a number usually between 0 and 1 corresponding to the nature of that function.

There are a couple of easing functions to choose from:

• Tween.backEaseIn
• Tween.backEaseOut
• Tween.backEaseInOut
• Tween.elasticEaseIn
• Tween.elasticEaseOut
• Tween.elasticEaseInOut
• Tween.bounceEaseOut
• Tween.bounceEaseIn
• Tween.bounceEaseInOut
• Tween.strongEaseInOut
• Tween.regularEaseIn
• Tween.regularEaseOut
• Tween.regularEaseInOut
• Tween.strongEaseIn
• Tween.strongEaseOut
• Tween.strongEaseInOut
• … more to come

Color Tweening

But Tweening is not restricted to motion. You can use the same approach to change a color over time.

In this example the blue level of a colored object is tweened from 255 downto 0 within two seconds.

In the wild

Additionally here’s the result of my animated donut chart, which will be integrated in the next version of ASKKEN™. It makes heavy use of Tweens.

You can find a dedicated demo page at http://quasipartikel.at/donut and get the source code from Github.

Finally

There’s a dedicated demo for the tweening library as well. And *surprise* you can get the source code at Github. Well, I have to put some more documentation to the example page.

Please let me know what you think. There’s so much room for ideas and improvements.
I’d be happy to get your feedback. If you’d like to contribute, I’d be even happier.

The 18Bit Webshop

Technical implementation and site layout was done here at the Quasioffice. This gave me a good opportunity to make some research on existing shop frameworks, which finally lead me to Spree, an open source e-commerce package based on ruby on rails.

Until now, this seems to have been the right decision, because the extendability and the way to customize the shop totally convinced me. Being a ruby-kind-of-nooby, I definitly had problems understanding all the ruby magic, while reading and adapting the source code. But yeah, it runs.

Carrot Snake Jake

You know what comes next: visit www.18bit.com, and get this awesome little guy, before someone else does!

The script depends on jQuery 1.3 and jQuery UI 1.7 and is style-able using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.

Usage

Add the library references.

Define your selectbox having the multiple attribute set.

Finally, you are ready to invoke the Multiselect spirits.

I already received a multitude of suggestions and contributions on this. The response was simply overwhelming.

List of potential improvements

• Search within available options, if there are a lots of them
• Displaying counts of selected and available items
• Select All / Deselect All Buttons
• Dragging items from the available list to the selected list directly
• AJAX Support (thanks to Yanick Rochon)

I’ll try to get some time for improving the widget based on the suggestions. I’ll keep you posted about progress. Please feel free to work on my code. The latest source code is always available on Github. Just let me know if you did some modifications, so I’m able to include them.

Update#1

Added search capabilities, count of selected items and Select/Deselect All Buttons.

Update#2

Added Drag&Drop support. Also some major IE bugs have been addressed (still some remaining…).

However, I put them together in a flickery animated gif, maybe some of you recognize their own monumental creation:

Those little guys were then projected on the wall, dancing to the music on the window edges and on top of pictures. This did in fact not at all look like on this photo below, which i found on my tiny spare-SD-card (it seems the camera was a bit tipsy too, that evening). But at least it’s some evidence.

Normally you would use MQL (Metaweb Query Language) to express queries against the database. If Freebase finds something that matches your request, you get a result back in form of a JSON Hash. With Ken at your hands, you no longer need to parse the JSON result. Instead you can work with Ruby Objects which should be much more convenient.

Enough the talk, let’s play around with young Ken:

Actually this the only way you can use Ken at the moment. But there’s more to come. The development is at an early stage and my focus lies on building a simple API for exploring Freebase Resources first. However, if things go right, you should be able to use this library as a Data Layer (instead of or in addition to ActiveRecord / DataMapper) for your web framework of choice (Merb, Rails).

You can track development progress at Github. There you can find a more detailed explanation on features as well. I’m planning to build a sample app in Ruby On Rails or Merb to demonstrate the features.

Please let me know what you think. There’s so much room for ideas and improvements.
I’d be happy to get your feedback. If you’d like to contribute, I’d be even happier.

Update #1

API Docs now available (generated using the brand-new docs.github.com service).

Elastic lists

Elastic Lists by Moritz Stefaner

Newsmap

Newsmap

SIMILE Exhibit

SIMILE Exhibit

JIT - JavaScript Information Visualization Toolkit

I just found out that Nicolas Garcia Belmonte (he was mentioned in the paper as the creator of the Javascript Hyperbolic Browser) combined his scripts to the so great JavaScript Information Visualization Toolkit.

My favorite visualization out of that toolkit, the RGraph is simply impressive.

RGraph

Now I’m totally excited about creating Visualizations in Javascript. Thus I’ll definitely have a look at John Resig’s Processing.js too.

Being my pet subject I’m still playing around with Semantic Web technologies, currently working on a Ruby API for accessing Freebase.com. I’ll keep you posted about that thing.