PowerPoint Presentation

Android Developer Days 2013Engin Yaz Hatay

Who Am I ?Engin Yaz HatayComputer EngineerGeek @ Codemodeon

OutlineGraphics in Browser CSS3 /Canvas / SVG / WebGL HTML5 Canvas Browser SupportLibraries : Paperjs / ProcessingJS / SeriouslyJSCanvas in MobilePerformanceMobile Graphics / Creative CodingTools

3http://www.creativeapplications.net/

Idea/InspirationGraphics in BrowserCSS3 /Canvas / SVG / WebGL / FlashWhich one to use ?User Interfaces ?Rounded Corners, Shadows ?3D ?Games, Fractals?Animations ?Scalable images ?

5HTML5 - Canvas2D Drawing platformAll you need is plain JavaScriptCreated by Apple (Used for dashboard widgets)Now its an HTML5 StandardResolution dependent bitmapWhich means every visual is represented by pixels (non-vectoral)

HTML5-Canvas (cont.)You can save the resulting image as a.pngor .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

Some DetailsProxying canvases to workersWhat is a worker ?Workers are unable to reach DOM elementsSo we need a proxycanvasProxy=canvas.transferControlToProxy()canvasProxy.setContext(context)

SVGResolution independentAllows 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

WebGLWebGL is a 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 : CanvasRenderingContext2DWebGLRenderingContext

Browser Support

CanvasWebGL

Browser Support (cont.)

SVG

CSS

LibrariesPaperJS Hard to Debug PaperScriptEasel.js/Kinetic.js/Fabric.jsProcessingJS Own language - .pde filesRaphaelJS SVG in every browserThreeJS - http://threejs.org/ - 3D JS WebGLSeriouslyJS Interesting WebGL library(Your shortcut to useful shaders Great for video and image manipulation)

13PerformanceHardware AccelerationPre-renderingOff-screen CanvasBatching canvas callsSingle draw callRenderers: special forjs,canvas and audioEx: Ejecta

http://bit.ly/cQ743c

http://www.html5rocks.com/en/tutorials/canvas/performance/http://www.useragentman.com/blog/2012/09/23/cross-browser-gpu-acceleration-and-requestanimationframe-in-depth/14ToolsJS Performance Monitor Stats.jshttps://github.com/mrdoob/stats.jsAi to Canvas Drawing,Animation,Built-in Eventshttp://visitmix.com/labs/ai2canvas/

Mobile Graphics / Creative Coding

openFrameworks (C++)ProcessnG / Processngjs (Java/JS)libCnder (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)16Thank You