Archive for August 2008

Processing – A Fireworks Show

This is my first attempt at creating something in Processing which I started to work with a few days ago. Originally my goal was to create a fireworks show that resembled what I saw this 4th of July on the Mall in Washington DC, with my wife, two boys, and my sisters family. I had fond memories of that trip and was hoping to re-create it in some artwork. I am not sure this qualifies as artwork, but when my three year old came into my office, saw this running and instantly exclaimed “Fireworks Daddy! Auntie Kim!” I knew I had reached a modicum of success.

With Processing you can very rapidly iterate and experiment with sketches, this version is about my 5th iteration, after experimenting with some Handel (Classical) I settled on Radiohead (my favorite band.) Each iteration had its own unique appeal, and some things happened quite by accident. For instance the circles that form and shoot off were a result of tweaking one number by .01. I continue to be impressed with the power of processing, and I will probably see if something similar can be done in Flash.

I am also using this work to serve as partial inspiration for what I am doing within Degrafa and with the Flash Player.

You will need the java runtime installed and the appropriate security permissions to view this, also please be patient when it launches as it is loading up a 4mb song. Click here to view.

August 29th, 2008 | Processing | 2 Comment

Chart Slicer Component Released

Today I am releasing a chart slicer component that behaves like the one seen on Google Finance.

I had several requests for the source code for my Google Finance sample, but regretfully the code is embarrassingly sloppy, and I am not sure when I will be getting back to cleaning it up. One of the components within that example is this chart slicer control, which I have now created a simple example for, with source code included.

This control can target any Flex cartesian chart, although I have only tested it with a few, so I am sure people will find edge cases (or perhaps not so edge cases) that break the component. It is easy enough to change the display in the control from an area chart to any of the MicroCharts included with a little customization.

This component has a liberal use of Degrafa to make all the magic work, from custom skins on the sliders, to the microcharts used to represent the data, to the tick marks within the slider track the reference the positioning of the items in the target chart. You will also notice some extra logic that has the sliders snap into alignment with the actual item renderers of the target chart. With larger data sets this is less noticeable, but with small ones it is very effective.

Many thanks to Doug McCune for his HSlider control, and the efforts put forth by Brandon Meutzner.

You can see the example and download the code here. As usual all code is released under an MIT license.

August 27th, 2008 | Component Development, Dashboards, Data Visualization, Degrafa, Flex | 15 Comment

Processing is Amazing

I recently discovered Processing, and I am still in awe of what can be created with it. For those of you not familiar with Processing, it is a c syntax (pretty much java) language created at MIT’s multi-media center designed to be used by artists and non-programmers to create visual/animated/physical works of art. The primer written by two of Processing’s creators walks a person with no prior programming experience through learning to program.

As someone who has been programming since I was 10 years old and close to 30 years now, I found their approach so simple, powerful, and very approachable. Probably even more valuable to me was the plethora of examples that come with the simple IDE. Full particle and physics systems encompassed in less than 100 lines of code! OpenGL support, texture, uvt mapping, typography, and the list goes on.

I see some of what has been accomplished with Processing as the inspiration of what I think will be possible with Degrafa, and I look forward to seeing how far I can push the boundaries of what is possible in Flex/Flash by adopting similar constructs within Degrafa. The interesting twist Degrafa will bring is that we may be able to step away from procedural abstracts and work directly with declarative ones. Degrafa repeaters is one example of how this might manifest.

The animation at the top of this entry was created by Glenn Marshall, who just started working with Processing, but obviously has an incredible amount of artistic talent. What I find just mind blowing is that the animation he created is all done procedurally using sin/cos, looping, recursion and math. There was no use of After Effects, 3DS, or any other tool that translates analog inputs (hand drawing) into something digital, this is purely abstract programming – which just adds a sublime level of beauty to the finished work.

Note: Watch the video in its entirety it gets better, and better, and better ….

August 23rd, 2008 | Processing | 1 Comment

360 Flex Data Visualization Code Examples

This is a pretty short post that I wanted to get out to the community. Below are the links and source code (view source) for the presentation I gave today at 360 Flex in San Jose.

GoogleFinance Example: (view source coming soon, still needs some refactoring and clean up.)

http://www.brightpointinc.com/flexdemos/googlefinance.html