Slides from my talk at JSinSA

1. Javascript visualisation frameworks www.JSinSA.com JS in SA Conference 2011 SVG via Raphäel, Canvas and others Brendon McLean, Intellection Software @brendon9x

2. State of the Web 2-oh-no www.JSinSA.com JS in SA Conference 2011

3. The Tale of Two Rendering Modes www.JSinSA.com JS in SA Conference 2011 Immediate Mode: function draw() { context.fillStyle = "red"; context.fillRect(0, 0, 100, 20); } setInterval(draw, 1000 / 20); } Examples: Almost everything.

4. The Tale of Two Rendering Modes www.JSinSA.com JS in SA Conference 2011 Retained mode: <svgxmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="480"> <path fill="none" stroke="#666666</path> <circle cx="120" cy="390" r="8”></circle> </svg> Example: HTML – the DOM.

6. Much easier for events

7. Exportable as document

9. The unlikely hero: VML www.JSinSA.com JS in SA Conference 2011 “This is me doing my online banking in the year 2010” “Yes, we wear jump suits…”

11. fill

12. opacity

13. x, y, w, h

14. rotation, scale, translation

16. Beziers www.JSinSA.com JS in SA Conference 2011 Like logo canvas.path([ "M", start.x, start.y, // Move to "L", lineEnd.x, lineEnd.y, // Line to "Q", control.x, control.y, end.x, end.y, // Quadratic bezier to "Z"]);

17. Line chart www.JSinSA.com JS in SA Conference 2011 Events just like DOM varslider = canvas.rect(s.x, s.y, s.width, s.height).attr({ fill: "white", "fill-opacity": 0.3, stroke: "white" }).drag(function(dx, dy) { sliderModel.x = this.startX + dx; slider.attr({x: sliderModel.x}); update(); }, function() { this.startX = slider.attr("x"); });

18. The gallery www.JSinSA.com JS in SA Conference 2011 vari = canvas.image(src, x, y, w, h); i.translate(dx, dy); i.animate({rotation: 45}, 1000, "<>"); i.scale(sx, sy);

19. Canvas (2D) Similar primitives to SVG Procedural Results in bitmaps Pixel access Context transforms www.JSinSA.com JS in SA Conference 2011

20. WebGL (Canvas 3D) Based on OpenGL ES (iOS, etc) Extremely low-level End user likely to use libraries (like THREE.js) www.JSinSA.com JS in SA Conference 2011

21. What’s it good for? www.JSinSA.com JS in SA Conference 2011 “...a solution looking for a problem.” - 1960

22. Future Cool stuff Shaders – powerful like lasers WebCL future (512 core computation) Not cool stuff Hardware support No IE support (Mozilla plugin coming) www.JSinSA.com JS in SA Conference 2011

23. www.JSinSA.com JS in SA Conference 2011 Questions