JSinSA - JS Visualisation APIs
Upcoming SlideShare
Loading in...5
×
 

JSinSA - JS Visualisation APIs

on

  • 367 views

Slides from my talk at JSinSA

Slides from my talk at JSinSA

Statistics

Views

Total Views
367
Views on SlideShare
367
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Cape Town?
  • Note much that spans everythingFuture looking better

JSinSA - JS Visualisation APIs JSinSA - JS Visualisation APIs Presentation Transcript

  • Javascript visualisation frameworks
    www.JSinSA.com
    JS in SA Conference 2011
    SVG via Raphäel, Canvas and others
    Brendon McLean, Intellection Software
    @brendon9x
  • State of the Web 2-oh-no
    www.JSinSA.com
    JS in SA Conference 2011
  • 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.
  • 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.
  • www.JSinSA.com
    JS in SA Conference 2011
    Pros & Cons
    Retained
    Immediate
    Fast
    Robust
    Limitless possibility
    Easy client side programming
    • All the benefits of a DOM
    • Much easier for events
    • Exportable as document
    • Mostly constructed in tools or on server side
  • Raphäel Javascript Library
    www.JSinSA.com
    JS in SA Conference 2011
    Simple JS API
    Affects the DOM
    Easy events
    Animation
    All browsers
    by Dmitry Baranowskiy.
  • 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…”
  • At a glance
    www.JSinSA.com
    JS in SA Conference 2011
    Properties
    Primitives
    circle
    rect
    ellipse
    path
    text
    • stroke
    • fill
    • opacity
    • x, y, w, h
    • rotation, scale, translation
    • etc...
    Extra
    • Events similar to DOM & all attributes can be animated
  • Bar chart demo
    www.JSinSA.com
    JS in SA Conference 2011
    varrect = 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, "<>");
  • 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"]);
  • 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");
    });
  • 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);
  • Canvas (2D)
    Similar primitives to SVG
    Procedural
    Results in bitmaps
    Pixel access
    Context transforms
    www.JSinSA.com
    JS in SA Conference 2011
  • 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
  • What’s it good for?
    www.JSinSA.com
    JS in SA Conference 2011
    “...a solution looking for a problem.” - 1960
  • 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
  • www.JSinSA.com
    JS in SA Conference 2011
    Questions