JSinSA - JS Visualisation APIs

JSinSA - JS Visualisation APIs

• 1.
  Javascript visualisation frameworkswww.JSinSA.comJSin SA Conference 2011SVG via Raphäel, Canvas and othersBrendon McLean, Intellection Software@brendon9x
• 2.
  State of theWeb 2-oh-nowww.JSinSA.comJS in SA Conference 2011
• 3.
  The Tale ofTwo Rendering Modeswww.JSinSA.comJS in SA Conference 2011Immediate Mode:function draw() { context.fillStyle = "red"; context.fillRect(0, 0, 100, 20); } setInterval(draw, 1000 / 20);}Examples: Almost everything.
• 4.
  The Tale ofTwo Rendering Modeswww.JSinSA.comJS in SA Conference 2011Retained 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.
• 5.
  www.JSinSA.comJS in SAConference 2011Pros & ConsRetainedImmediateFastRobustLimitless possibilityEasy client side programmingAll the benefits of a DOM
• 6.
  Much easier forevents
• 7.
  Exportable as document
• 8.
  Mostly constructed intools or on server sideRaphäel Javascript Librarywww.JSinSA.comJS in SA Conference 2011Simple JS APIAffects the DOMEasy eventsAnimationAll browsersby Dmitry Baranowskiy.
• 9.
  The unlikely hero:VMLwww.JSinSA.comJS in SA Conference 2011“This is me doing my online banking in the year 2010”“Yes, we wear jump suits…”
• 10.
  At a glancewww.JSinSA.comJSin SA Conference 2011PropertiesPrimitivescirclerectellipsepathtextstroke
• 11.
  fill
• 12.
  opacity
• 13.
  x, y, w,h
• 14.
  rotation, scale, translation
• 15.
  etc...ExtraEvents similar toDOM & all attributes can be animatedBar chart demowww.JSinSA.comJS in SA Conference 2011varrect = canvas.rect(bar.x(), bar.y() + bar.height(), bar.width(), 0); rect.attr({ fill: "0-rgb(255,48,48)-rgb(255,74,74)-rgb(230,43,43)-rgb(255,48,48)", stroke: "none"}); rect.animate({height: bar.height(), y: bar.y()}, 2000, "<>");
• 16.
  Bezierswww.JSinSA.comJS in SAConference 2011Like logocanvas.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 chartwww.JSinSA.comJS inSA Conference 2011Events just like DOMvarslider = 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 gallerywww.JSinSA.comJS inSA Conference 2011vari = canvas.image(src, x, y, w, h); i.translate(dx, dy); i.animate({rotation: 45}, 1000, "<>"); i.scale(sx, sy);
• 19.
  Canvas (2D)Similar primitivesto SVGProceduralResults in bitmapsPixel accessContext transformswww.JSinSA.comJS in SA Conference 2011
• 20.
  WebGL (Canvas 3D)Basedon OpenGL ES (iOS, etc)Extremely low-levelEnd user likely to use libraries (like THREE.js)www.JSinSA.comJS in SA Conference 2011
• 21.
  What’s it goodfor?www.JSinSA.comJS in SA Conference 2011“...a solution looking for a problem.” - 1960
• 22.
  FutureCool stuffShaders –powerful like lasersWebCL future (512 core computation)Not cool stuffHardware supportNo IE support (Mozilla plugin coming)www.JSinSA.comJS in SA Conference 2011
• 23.
  www.JSinSA.comJS in SAConference 2011Questions