Showing posts with label canvas. Show all posts
Showing posts with label canvas. Show all posts

Monday, 22 April 2013

Newton's playground: Javascript physics engines



This awesome animation is actually the recorded output of a real-time #Javascript-powered physics engine. There has been quite a lof of progress in this field lately using technologies like #canvas and #WebGL, here are some recent developments:

The "dragable/tearable cloth" demo above comes from lonely-pixel.com. Play with it live and get the code here http://bit.ly/15wyK0F There are more demos on the developer's website, like this "ball curve collision" http://bit.ly/1078otN (balls fall through the curves which you can re-arrange as you like :))


Then we go to Verlet-js http://bit.ly/XY0okC a simple (according to SubProtocol, the developer) Verlet integration physics engine written in Javascript by. Check out the "spider" demo
http://bit.ly/ZGWIy6 where you can push a spider around on it's web (yes, the spider moves around on it's own as well :))



Finally, CoffeePhysics (http://bit.ly/11XpGxF) by +Justin Windle. Yes, every bubble there moves around in a frantic manner :)  More experiments by Justin here http://bit.ly/XYfjeJ

Links via +Veljko Sekelj , +Lo Sauer and +Steve Mayne. Many thanks! :)

Monday, 18 March 2013

Chart.js: cross-browser, animated, HTML5 charts


//Non-Flash charts is a favourite topic of mine (see more here http://bit.ly/g-chart), basically because charts have been one of the last things Flash could do that HTML couldn't. This of course has been changing a lot the last few years. 

Another very recent (released yesterday!) example of is Chart.js. It packs: 
- 6 animated chart types: Line, bars, radar, pie, polar area and doughnut
- Canvas-based vector output which means crystal clear graphics at any resolution
- Cross-browser support on modern browsers, support for IE8 and below through ExplorerCanvas
- No Flash = Mobile-ready (kind of obvious since it's HTML5 but worth noting) 
- Lightweight and very good documentation (for a 0.1 release) 

Get Chart.js here http://bit.ly/chartjs

(Found via +Michael Mahemoff and +Stephen Bond)