Graphics Programming For the Web

Pushkar Joshi
Motorola Mobility		 Zhenyao Mo
Google Inc.		 Kenneth Russell
Google Inc.		 Mikael Bourges-Sevenier
Motorola Mobility

Introduction

Mint.com
(personal finance)		ChemDoodle.com
(scientific viz.)		Motorola Ninja
(creative design)

Course Overview

9:05 am Canvas & CSS (Joshi)
10:00 am WebGL Part 1 (Mo)
10:30 am break
10:45 am WebGL Part 2 (Russell)
11:30 am WebCL (Bourges-Sevenier)
12:10 pm End

Web Programming Primer

JavaScript (ECMAScript):
  • Prototype v/s object-oriented
  • Can be confusing for C++/Java programmers

V8 Benchmarks per Chrome Version

Canvas

Drawing Context

<script type='text/javascript'>
<html>
<head>
<script type="text/javascript">
function initCanvas() {
    var canvas = document.getElementById("mycanvas");
    if (canvas.getContext) {
           var context = canvas.getContext("2d");
           //issue drawing commands here...
     }
  }
}
</script>
</head>

Path API 

            //the nose
            context.beginPath();
            context.moveTo(250,275);
            context.lineTo(200,375);
            context.lineTo(250,375);
            context.stroke();

            //the eyebrows
            context.beginPath();
            context.arc(190, 220, 40, 210 * Math.PI/180, 300 * Math.PI/180, false);
            context.stroke();
            context.beginPath();
            context.arc(310, 220, 40, 240 * Math.PI/180, 330 * Math.PI/180, false);
            context.stroke();

            //the eyeballs
            context.beginPath();
            context.arc(190, 250, 40, 0, 2 * Math.PI, false);
            context.stroke();
            context.beginPath();
            context.arc(310, 250, 40, 0, 2 * Math.PI, false);
            context.stroke();

            //the lower lip
            context.moveTo(200, 400);
            context.bezierCurveTo(225, 475, 275, 475, 300, 400);

            //the upper lip
            context.moveTo(200,400);
            context.quadraticCurveTo(250, 450, 300, 400);
            context.stroke();

Path API Geometric Queries


Layout and Transformations


Image Editing 

var imageData = context.getImageData(0,0,canvaswidth,canvasheight);
var pixels = imageData.data;
for (var i = 0, n = pixels.length; i < n; i += 4) {
   pixels[i]   = //red
   pixels[i+1] = //green
   pixels[i+2] = //blue
   pixels[i+3] = //alpha
}
context.putImageData(imageData, 0, 0);
Link to a demo

Animation

Optimizing Animation

setInterval, setTimeout (DO NOT USE!)

requestAnimationFrame

  • allow the browser to optimize canvas animation
function animateCanvas() {
	window.requestAnimationFrame(animateCanvas);
	drawCanvas();
}
(complete code at http://paulirish.com/2011/requestanimationframe-for-smart-animating/)

Questions?

Cascading Style Sheets
(CSS3)

Cascading Style Sheets

Planes in Space 

<html>
<body>
<div style="
width: 500px; height: 500px;
position: relative;
left:100; top: 25;
background-color:#CCCCFF">
  Hello!
</div>
</body>
</html>

Planes in Space (3D) 

<html>
<body>
<div style="
width: 500px; height: 500px;
position: relative;
left:100; top: 25;
-webkit-transform: rotateY(60deg) rotateZ(30deg);
background-color:#CCCCFF">
  Hello!
</div>
</body>
</html>

Animation with Transitions

Hello!

<div style="-webkit-transition: -webkit-transform 1s ease-in;"
onclick="this.style.webkitTransform='rotate(180deg) rotateY(180deg)'">
    <p style="font-size:40px">Hello!</p>
</div>

Link to 3D Transforms

CSS Animation
(Keyframes)

Hello!

 @-webkit-keyframes wobble {
0% { -webkit-transform: scale3d(1,1,1) rotateZ(0deg);}
33% {-webkit-transform: scale3d(1.2,1.2,1) rotateZ(30deg);}
66% {-webkit-transform: scale3d(1.2,1.2,1) rotateZ(-30deg);}
100% {-webkit-transform: scale3d(1,1,1) rotateZ(-deg);}}
    
<div style="-webkit-animation-name: wobble;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;">
    <p style="font-size:40px">Hello!</p>
</div>

Image Editing

SVG Filter Effects on any DOM element
e.g. “style=‘ -webkit-filter: blur(2px) grayscale(1);’ ”

Link to Demo.

Simple (1-2 extra lines in element style)

Fast (natively supported, hardware accelerated)

CSS Shaders

GLSL Shaders for any DOM element

images © Adobe Systems
(http://www.adobe.com/devnet/html5/articles/css-shaders.html)

Demo, Take-Aways, and Questions

Ninja Authoring Tool

  • Open Source, BSD license
  • freely available on Chrome Store and Github

Take-aways

  • large "native-class" applications now possible on the web
  • graphics applications especially suitable as web apps

Questions?

Comparison with SVG

CanvasSVG
Rendering ModeImmediateDeclarative
GroupingNot supported*Supported
Filter EffectsNot supported*Supported
(* not supported natively)

<Thank You!>