Html5 Canvas and Mobile Graphics

Html5 Canvas and Mobile Graphics

• 1.
  Android Developer Days2013 Engin Yağız Hatay
• 2.
  Who Am I? Engin Yağız Hatay Computer Engineer Geek @ Codemodeon
• 3.
  Outline • Graphics inBrowser CSS3 /Canvas / SVG / WebGL • HTML5 Canvas • Browser Support • Libraries : Paperjs / ProcessingJS / SeriouslyJS • Canvas in Mobile • Performance • Mobile Graphics / Creative Coding • Tools
• 4.
  http://www.creativeapplications.net/ Idea/Inspiration
• 5.
  Graphics in Browser •CSS3 /Canvas / SVG / WebGL / Flash • Which one to use ? • User Interfaces ? • Rounded Corners, Shadows ? • 3D ? • Games, Fractals? • Animations ? • Scalable images ?
• 6.
  HTML5 - Canvas •2D Drawing platform • All you need is plain JavaScript • Created by Apple (Used for dashboard widgets) • Now it’s an HTML5 Standard • «Resolution dependent bitmap» Which means every visual is represented by pixels (non-vectoral)
• 7.
  HTML5-Canvas (cont.) • Youcan save the resulting image as a .png or .jpg. • There are no DOM nodes for anything you draw. It is all pixels. • Not suited for Web site or application user interfaces. • Requires you to manually redraw each element in the interface
• 8.
  Some Details • «Proxyingcanvases to workers» • What is a worker ? • Workers are unable to reach DOM elements • So we need a proxy • canvasProxy = canvas . transferControlToProxy() • canvasProxy . setContext(context)
• 9.
  SVG • Resolution independent •Allows scaling for any screen resolution. • Very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript. • Better solution for Web application user interfaces
• 10.
  WebGL • WebGL isa cross-platform web standard • Low-level 3D graphics API based on OpenGL ES 2.0 (Shaders/GLSL) • Exposed through the HTML5 Canvas element as Document Object Model interfaces. • canvas context mode : CanvasRenderingContext2D WebGLRenderingContext
• 11.
  Browser Support Canvas WebGL
• 12.
  Browser Support (cont.) SVG CSS
• 13.
  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 for video and image manipulation)
• 14.
  Performance • Hardware Acceleration •Pre-rendering Off-screen Canvas • Batching canvas calls Single draw call • Renderers: special for js,canvas and audio Ex: Ejecta http://bit.ly/cQ743c
• 15.
  Tools • JS PerformanceMonitor – Stats.js https://github.com/mrdoob/stats.js • Ai to Canvas – Drawing,Animation,Built-in Events http://visitmix.com/labs/ai2canvas/
• 16.
  Mobile Graphics /Creative Coding openFrameworks (C++) ProcessınG / Processıngjs (Java/JS) libCınder (C++) Graphics Libraries (OpenGL, GLUT,) Utilities (FreeType, Poco,Assimp) Tools(OpenCV),MathLibraries I/O,Sound,Video,Import-Export Top IDEs (Processing has its own IDE) Powerful Large Communities (Processing & OF) Cross Platform (Android/IOS/Mac/PC/Linux)
• 17.
  Thank You