WebGL/bullet.js Demo

The demo shows two characters, the left is calculated using the physics library bullet.js, the right without physics. You can toggle the use of physics with a checkbox. On my Pc I get following framerates:

	with physics	without physics
Chrome 8	19 fps	59 fps
Firefox 4 beta 6	~17 fps (heavily varying)	60 fps

Its interesting, that there isnt the performance gap between Chrome and Firefox, that was observed in an earlier blogpost, anymore. The reason are improved javascript engines and webgl- instead of software-canvas output. Though the Firefox physics performance varies heavily (sometimes drops to 3fps), probably because of background optimizations, while Chrome display is smooth.

Update: bullet.js, together with this and 2 Canvas demos, is now also available here: http://code.google.com/p/bulletjs/

HistoryMaps: Migration period (Völkerwanderung) 150-500

On the left there is a first version of a HistoryMap. HistoryMaps are a concept to display historic developments, both in place and time. They combine traditional maps, which display places but no different times, and timelines, which show timepoints but no referring places. This first HistoryMap shows movement of tribes and battles during the migration period (Völkerwanderung) 150-500. Below the properties of HistoryMaps and its GUI are described in detail:

• Shapes and timeline: The content of HistoryMaps is made up of shapes (in this example there are bezier-curved shapes which represent tribes), which may be morphed between time-keyframes. The time is displayed in the upper timeline, a current time is highlighted. You can click or drag with the mouse the timeline to set the current time, the shapes will be morphed according to this time. Thus you can explore historic constellations at different times.
• Eventpoints: In addition to shapes there are eventpoints displayed, marking historic events (here battles). Eventpoints are drawn together with their corresponding times. If you move the mouse over a point additional information for that event is displayed. If you click an event point, the current time will be set to the corresponding time. Thus you see the global historic context of the event. This marks a virtue of the concept: In usual historic maps events are mostly drawn only with local context.
• Animation: At startup and when you click the animation-button an animation is running, where current time moves over the timeline. This gives an overview of the history shown.
• Timecolumns: When you click the timecolumn-button a static display is shown, where the shapes are drawn in columns of different times. Thus you see a picture of the historic content of all times at once. This gives insights on durations of historic developments, one can distinguish short processes that only appear in few columns from longlasting ones that are drawn in more columns.
• Completeness: HistoryMaps may display the complete history of all places and all times. For this the current programm must be extended with zoom facility. Thus you could zoom in and out places (like GoogleMaps) and you could also zoom within the timeline to set a time frame of interest.

Canvas graph demo, Usecase: Football results

FC Hansa Rostock
Kickers Offenbach
Wacker Burghausen

St. Pauli
HSV
FC Bayern München

On the left there is a interactive canvas graph demo, showing football results. You can switch highlighted graphs by mouse-clicking on the corresponding description. Since all the javascript is written in one line, all content of this blogpost could be uploaded to blogspot, there is no iframe needed here. Soon there will be a more advanced canvas demo and I'm also working on a webgl+bullet.js demo. Stay tuned! :)
Update: I made the graphs animate and added functionality: If the mouse moves over the graph, detail information is displayed.

Twitter client concept: Refer arcs

In my current twitter client, to follow conversations between users, I often have to scroll and search to find the corresponding tweets. To make this process more comfortable (especially the search part), I introduced refer arcs into a twitter client which visually connect tweets that probably refer to each other (replies, retweets).
On the right there is an animated gif, which demonstrates this technique. The updated twitter client ('Twaja') will be downloadable soon.

Thoughts on other stuff. Three recent (in my opinion) questionable developments in computation:

• Oracle sues Google over Java. Obviously the new owner has other priorities then the old one. Java might loose people working with it.
• Google and Verizon propose new policy to constrict net-neutrality. This might be a step toward the end of the open net.
• Google stops Google Wave. After just a year this innovative project is canceled. Thats quite few patience, reminds of canceled Google Lively.

End of rant. :)

What I like about Javascript (compared to Java)

This list was assembled, while I was coding some Javascript projects (see blogposts below), and is of course only a subjective view:

• dynamic typing: simpler declarations, no casts, no interfaces, less keywords, simpler syntax (but I see possible drawbacks: its may be more error prone, and probably less runtime performant)
• "this" is mandatory to access object-variables, in java its optional. This is more clear semantics and promotes the use of local variables.
• simple and powerfull Array and Hashtable (instead of Java's multitude of Array,Vector,List,Collections..)
• prototype based object system. its more flexible than javas class based system, e.g. you can add methods to existing objects.
• last but not least: it runs everywhere in the browser, quite like java, but in a more straightforward and powerfull way (direct dom access, not like a plugin).

Still, Java keeps being great, but above points make Javascript very much interesting, imho.

bullet.js - Javascript Ragdoll Physics

I ported more classes from JBullet to Javascript Physics engine bullet.js, wrote some new and assembled a new canvas demo showing javascript ragdoll physics: Click. Now almost all classes from JBullet are ported, except some for vehicle physics. The size of bullet.js is now about 330kB. The demo shows on my pc using Chrome ca. 40fps. The current drawing (software 3d using canvas) is not very performant, so soon there will be bullet.js+WebGl demos.

bullet.js - Javascript Physics Engine

I finished porting parts of the JBullet and Vecmath library from Java to Javascript. As the result there is another 3D Physics Engine for Javascript named bullet.js (because its based on the Bullet Physics Engine). Its size is about 200kB. Here is a canvas-demo, showing the engine in action. The demo consists of the same animation with 20 boxes as the java physics demo, I posted before. Thus one can compare the different performances. On my computer I get following frames per second:

• Java: 300 Fps
• Javascript Chrome: 45 Fps
• Javascript Firefox 4b1: 10 Fps
• Javascript Firefox 3.6: 3 Fps

This shows 2 points. Point 1: Google Javascript is quite performant, Mozilla must still improve things. Point 2: Although Javascript execution speed has great improved in the last years, there is still a big performance gap wrt. Java. Maybe javascript will never run as fast as java, because of its dynamic nature/typing? Time will tell. :)
Anyways, currently there is a canvas demo, but the real purpose of a 3d javascript physics engine would be WebGl. So there will be WebGL demos soon on this blog.
A issue exists with the javascript port: the boxes in the demo sometimes show strange behavior, they bump from the ground and fly through the air.. In the java demo they dont do that, so there must be a bug in the Javascript code. If there is someone who actually understands how the bullet engine works (I dont, I just ported it :) it would be nice, if I get help to find the bug.