Canvas Only: Creative Coding in HTML5
Presented at HTML5 Developers Conference, April 2013 in San Francisco, CA. Source available at: https://github.com/jamesstoneco/canvas-only Description from Conference: Are you interested in creating cool games or interactions for web or mobile? Are you new to graphics programming and want to jump in and experiment. For many years artists and technologists have created amazing installations such as "Flight Patterns" by Aaron Koblin by using Processing (both a pre-processed language and api that sits on top of Java). Today the power and simplicity in syntax has been ported to the HTML5 Canvas in Processing.js. Explore creating 2d and 3d graphics, data visualization, algorithmic art and image generation/alteration. Topics covered include: Processing.js, Paper.js, Three.js, Box2DJS and toxiclibs.js. Examples will be shown in Processing, JavaScript and CoffeeScript and benefits and drawbacks of each approach will be given. Creating User Interfaces in the Canvas with Zebra.js will be explained as well as strategies for coding for a game style loop. Bio from Conference: James is a media artist specializing in digital technology and fabrication. His work involves creating interventions with the biological to augment and expand the notion of what is cyborg. His work has been exhibited in the ZERO1 Art + Technology Biennial and the International Symposium on Electronic Art (ISEA) in Istanbul, Turkey. He is a past resident of the Institute for the Arts and Humanities, served as Faculty for Eyebeam, and was recognized as a University Fellow at the Pennsylvania State University, where he also taught game and creative coding techniques using Processing.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to Canvas Only: Creative Coding in HTML5
Similar to Canvas Only: Creative Coding in HTML5 (20)
More from James Stone
More from James Stone (6)
Recently uploaded
Recently uploaded (20)
Canvas Only: Creative Coding in HTML5
- 1. Canvas Only Creative Coding in HTML5
- 2. “Software for Makers” Make Magazine #30 processing.js paper.js know processing want interactivity
- 5. artists --using code [Casey Reas](reas.com) [Aaron Koblin](aaronkoblin.com) [Camille Utterback](camilleutterback.com)
- 9. p5 live coding video • hello world • show java file, how it builds the scaffolding • show simple graphics demo • more complex example • arudino ide is based on the processing ide
- 11. “game loop” event based KineticJS EasleJS
- 12. paper.js
- 13. <!DOCTYPE html> <html> <head> <title>Prototype : Paper : Test</title> <script type="text/javascript" src="../../../lib/paper.js"> </script> <script type="text/paperscript" src="js/app.js" canvas="testCanvas"> </script> </head> <body> <canvas id="testCanvas" resize></canvas> </body> </html> html» «paper.js basics
- 14. var path = new Path.Circle(view.center, 30); path.strokeColor = 'black'; ! function onResize(event) { path.position = view.center; } js» «paper.js basics
- 15. Paper.js live coding video • setting up a basic paper.js project • creating some objects • creating some interactivity with the mouse
- 16. processing.js
- 17. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype : Processing + CoffeeScript : Test</title> <link rel="stylesheet" href="stylesheets/app.css" /> </head> <body> <canvas id="p5canvas"></canvas> <script type="text/javascript" src="../../../lib/jquery-1.9.1.min.js"> </script> <script type="text/javascript" src="../../../lib/processing-1.4.1.js"> </script> <script type="text/javascript" src="../../../lib/coffee-script-1.6.2.js"> </script> <script type="text/coffeescript" src="js/app.coffee"> </script> </body> </html> html» «p5js basics
- 18. html { overflow: hidden; } body { margin: 0px; } css» «p5js basics
- 19. $(window).resize -> processing.size $(window).width(), $(window).height() $(document).ready -> canvas = document.getElementById "p5canvas" window.processing = new Processing canvas, coffee_draw coffee/jquery» «p5js basics
- 20. coffee_draw = (p5) -> p5.setup = () -> p5.size $(window).width(), $(window).height() p5.draw = () -> p5.noStroke() circle_size = p5.random(10, 40) if circle_size < 30 then p5.fill 255, 0, 0 else p5.fill 0, 0, 255 p5.ellipse p5.random(0, p5.width), p5.random(0, p5.height), circle_size, circle_size coffee/jquery» «p5js basics
- 21. Processing.js live coding video • Setting up a basic processing.js sketch • Creating some objects • Creating some interactivity
- 22. css vs. canvas
- 23. Simple UI Creation live coding video • creating a simple object • trapping for interactivity / bounds • skinning objects • circular menu example
- 24. Canvas UI Libraries • Zebra UI • github.com/barmalei/zebra • FiveGUI • github.com/elhsmart/FiveGUI
- 25. Going Canvas Only • If we have our UI in Canvas what else do we need • Allowing for window resizing • Different devices, media queries, etc. • Whats next? Phonegap, AppCloud?
- 26. Cool Crossover Tech • Toxiclibs -> Toxiclibs.js (2d/3d graphics, color, math, physics) • Box2d -> jBox2d -> box2djs (2d physics, angrybirds)
- 27. Toxic Libs live coding video • Complex Color Interpolation and Modification • geometry calculations in 2d and 3d • complex 3d mesh generation
- 28. Box2d live coding video • Integrating box2d with processing.js • Angry Birds Style Physics • Physics Based UI Buttons and other elements
- 29. Additional Resources Box2D vs Chipmunk: which physics engine for HTML5 games? http://nine-software.com/2012/12/box2d-vs-chipmunk-html5-games/ ! AeroTwist Tutorials (three.js) http://www.aerotwist.com/tutorials/ ! Coffeescript's `for` loops http://www.jezng.com/2012/05/iteration-in-coffeescript/ ! ToxicLibs JavaDocs (documentation) http://toxiclibs.org/javadocs/ !
- 30. Additional Resources Box2D vs Chipmunk: which physics engine for HTML5 games? http://nine-software.com/2012/12/box2d-vs-chipmunk-html5-games/ ! AeroTwist Tutorials (three.js) http://www.aerotwist.com/tutorials/ ! Coffeescript's `for` loops http://www.jezng.com/2012/05/iteration-in-coffeescript/ ! ToxicLibs JavaDocs (documentation) http://toxiclibs.org/javadocs/ !
- 31. Thank you! Questions Comments? @manofstone everything posted to: github.com/manofstone/canvas-only/