Home >
One of the most common themes that I write about on this blog is data visualization, especially with Flex and AIR. This time I decided to change things up a bit and am exploring data visualization with Processing.
From the Processing web site:
Please bear with me... this is my first processing visualization.
I decided to put together a simple dynamic line chart to test out the potential of processing for data visualization in RIAs, and things certainly look promising. This example is a constantly changing line chart (however is completely based on random data).
While the chart itself is still very basic, it performs well, and could easily be extended to include labels, overlays, or interactive elements. In this example, I am shifting the data on every draw event. Better yet, the jar file containing this visualization is only 160K. However Java is required to run any processing application.
First Impressions: Data rendering is fast. I haven't run any benchmarks yet, but things appear to render quickly. The language is based on Java, so it is familiar, and the instructions used to render shapes on the screen are very easy to work with. The IDE is basic, however it allows you to rapidly prototype your visualizations. The only other thing I would ask for there is code completion.
Not only was this visualization easy to write, there is very little code involved. You can check out the full source below. Additionally, there's a "boat load" of examples that come with the processing IDE to help get you started.
Based on what I've read so far, advanced users can import the processing JAR libraries to other IDEs (such as eclipse), or you can use any Java library in your processing visualizations.
I'll be sure to write more here as I explore processing for RIA development.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
From the Processing web site:
Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is an alternative to proprietary software tools in the same domain.I've seen Processing quite a bit in the past, and it has been covered here on insideria.com. Processing is Java based, and from the demos, it appears to be quite fast for graphics processing. You really should check them out to see what it is capable of.
Please bear with me... this is my first processing visualization.
I decided to put together a simple dynamic line chart to test out the potential of processing for data visualization in RIAs, and things certainly look promising. This example is a constantly changing line chart (however is completely based on random data).
While the chart itself is still very basic, it performs well, and could easily be extended to include labels, overlays, or interactive elements. In this example, I am shifting the data on every draw event. Better yet, the jar file containing this visualization is only 160K. However Java is required to run any processing application.
First Impressions: Data rendering is fast. I haven't run any benchmarks yet, but things appear to render quickly. The language is based on Java, so it is familiar, and the instructions used to render shapes on the screen are very easy to work with. The IDE is basic, however it allows you to rapidly prototype your visualizations. The only other thing I would ask for there is code completion.
Not only was this visualization easy to write, there is very little code involved. You can check out the full source below. Additionally, there's a "boat load" of examples that come with the processing IDE to help get you started.
Based on what I've read so far, advanced users can import the processing JAR libraries to other IDEs (such as eclipse), or you can use any Java library in your processing visualizations.
I'll be sure to write more here as I explore processing for RIA development.
final int FRAME_RATE = 30;
final int ARRAY_SIZE = 40;
final int WIDTH = 400;
final int HEIGHT = 250;
float[] datum = new float[ARRAY_SIZE];
float x1 = 0;
float y1 = 0;
float x2 = 0;
float y2 = 0;
float xIncrement = WIDTH/(ARRAY_SIZE-1);
float value;
void setup() {
size(WIDTH, HEIGHT);
frameRate(FRAME_RATE);
colorMode(RGB,255,255,255,100);
for ( int i = 0; i < ARRAY_SIZE; i ++ )
{
datum[i] = (float) Math.random();
}
smooth();
}
void draw() {
strokeWeight(0);
stroke( 0 );
fill(0, 50);
rect(0, 0, width, height);
strokeWeight(2);
stroke( #FFFF00 );
for (int i = 0; i < ARRAY_SIZE-1; i++) {
x1 = i * xIncrement;
y1 = datum[i] * HEIGHT;
x2 = (i+1) * xIncrement;
y2 = datum[i+1] * HEIGHT;
line( x1, y1, x2, y2 );
}
for (int i = 0; i < ARRAY_SIZE-1; i++) {
datum[i] = datum[i+1];
}
value = datum[ARRAY_SIZE-2] + ( (Math.random() > .5) ? 1 : -1)* (float) (Math.random() * .15);
value = (float) Math.max( value, 0 );
value = (float) Math.min( value, 1 );
datum[ARRAY_SIZE-1] = value;
}
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Comments
7 Comments
Leave a comment
Tag Cloud
New Recommended eBooks
Get free updates and all-access to O'Reilly eBooks on your iPhone, Kindle, Sony Reader, or other mobile device.
Learn more about eBook bundles
News & Events
Books Excerpts
Read excerpts of RIA books provided by InsideRIA and O'Reilly Digital Media.
Find more book excerpts
2 additional things:
1) This apparently doesn't work in Google chrome
2) Those trails for the lines are on purpose
:)
If you want to do something more than sketches, I definitely recommend using Eclipse. Other option would be to use JEdit, if you look around there should be a template for it. The problem is the JVM, I tried to look at your applet with all the JVMs on my Mac with Leopard (1.4.2, 5, 6) and I got errors.
Andrew,
This works with Google Chrome and Java version 6, update 10
Nice application! I'm also really excited about processing and wrote a blog entry on it on this site not too long ago - its very cool.
Here is my Blog entry:
http://www.insideria.com/2008/08/curl-and-the-java-processing-l.html
Your demo is not working on my Firefox browser (v. 2.0.0.17) on my Mac OS X (v. 10.5.4), which is strange because the demos on processing.org work fine with that browser and OS.
Your demo does work, however, when I use Safari (v. 3.1.2) on the same machine.
Very cool Richard, I'll have to check it out. I compiled everything using the default Java SDK in the Processing distribution... I'll have to check what version it actually needs for the run-time player.
I can't see the demo in FF3/MacOSX. Like Richard's situation, it works in Safari.
a few nits:
1) use background(0,50)
2) use height instead of HEIGHT draw()
3) use Processing's built-in min, max, and random functions