Graphics in Browser• CSS3 /Canvas / SVG / WebGL / Flash• Which one to use ?• User Interfaces ?• Rounded Corners, Shadows ?• 3D ?• Games, Fractals?• Animations ?• Scalable images ?
HTML5-Canvas (cont.)• You can save the resulting image as a .png or.jpg.• There are no DOM nodes for anything youdraw. It is all pixels.• Not suited for Web site or application userinterfaces.• Requires you to manually redraw eachelement in the interface
Some Details• «Proxying canvases to workers»• What is a worker ?• Workers are unable to reach DOM elements• So we need a proxy• canvasProxy = canvas . transferControlToProxy()• canvasProxy . setContext(context)
WebGL• WebGL is a cross-platform web standard• Low-level 3D graphics API based on OpenGLES 2.0 (Shaders/GLSL)• Exposed through the HTML5 Canvas elementas Document Object Model interfaces.• canvas context mode :CanvasRenderingContext2DWebGLRenderingContext
Libraries• PaperJS – Hard to Debug – PaperScript• Easel.js/Kinetic.js/Fabric.js• ProcessingJS – Own language - .pde files• RaphaelJS – SVG in every browser• ThreeJS - http://threejs.org/ - 3D JS – WebGL• SeriouslyJS – Interesting WebGL library(Your shortcut to useful shaders – Great forvideo and image manipulation)
Performance• Hardware Acceleration• Pre-renderingOff-screen Canvas• Batching canvas callsSingle draw call• Renderers: special forjs,canvas and audioEx: Ejecta http://bit.ly/cQ743c
Tools• JS Performance Monitor – Stats.jshttps://github.com/mrdoob/stats.js• Ai to Canvas – Drawing,Animation,Built-inEventshttp://visitmix.com/labs/ai2canvas/
Mobile Graphics / Creative CodingopenFrameworks (C++)ProcessınG / Processıngjs(Java/JS)libCınder (C++)Graphics Libraries (OpenGL, GLUT,)Utilities (FreeType, Poco,Assimp)Tools(OpenCV),MathLibrariesI/O,Sound,Video,Import-ExportTop IDEs (Processing has its own IDE)PowerfulLarge Communities (Processing & OF)Cross Platform (Android/IOS/Mac/PC/Linux)