Canvas Only: Creative Coding in HTML5


Published on

Presented at HTML5 Developers Conference, April 2013 in San Francisco, CA.

Source available at:

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.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Canvas Only: Creative Coding in HTML5

  1. 1. Canvas Only Creative Coding in HTML5
  2. 2. “Software for Makers” Make Magazine #30 processing.js paper.js know processing want interactivity
  3. 3. artists --using code [Casey Reas]( [Aaron Koblin]( [Camille Utterback](
  4. 4. java PApplet preprocessor core.jar
  5. 5. awesome p5 books
  6. 6. 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
  7. 7. “game loop” event based KineticJS EasleJS
  8. 8. paper.js
  9. 9. <!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
  10. 10. var path = new Path.Circle(, 30); path.strokeColor = 'black'; ! function onResize(event) { path.position =; } js» «paper.js basics
  11. 11. Paper.js live coding video • setting up a basic paper.js project • creating some objects • creating some interactivity with the mouse
  12. 12. processing.js
  13. 13. <!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/"> </script> </body> </html> html» «p5js basics
  14. 14. html { overflow: hidden; } body { margin: 0px; } css» «p5js basics
  15. 15. $(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
  16. 16. 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
  17. 17. Processing.js live coding video • Setting up a basic processing.js sketch • Creating some objects • Creating some interactivity
  18. 18. css vs. canvas
  19. 19. Simple UI Creation live coding video • creating a simple object • trapping for interactivity / bounds • skinning objects • circular menu example
  20. 20. Canvas UI Libraries • Zebra UI • • FiveGUI •
  21. 21. 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?
  22. 22. Cool Crossover Tech • Toxiclibs -> Toxiclibs.js (2d/3d graphics, color, math, physics) • Box2d -> jBox2d -> box2djs (2d physics, angrybirds)
  23. 23. Toxic Libs live coding video • Complex Color Interpolation and Modification • geometry calculations in 2d and 3d • complex 3d mesh generation
  24. 24. Box2d live coding video • Integrating box2d with processing.js • Angry Birds Style Physics • Physics Based UI Buttons and other elements
  25. 25. Additional Resources Box2D vs Chipmunk: which physics engine for HTML5 games? ! AeroTwist Tutorials (three.js) ! Coffeescript's `for` loops ! ToxicLibs JavaDocs (documentation) !
  26. 26. Additional Resources Box2D vs Chipmunk: which physics engine for HTML5 games? ! AeroTwist Tutorials (three.js) ! Coffeescript's `for` loops ! ToxicLibs JavaDocs (documentation) !
  27. 27. Thank you! Questions Comments? @manofstone everything posted to: