Download to read offline
[Aaron Koblin](aaronkoblin.com)
[Camille Utterback](camilleutterback.com)](https://image.slidesharecdn.com/jamesstonehtml5devconffinaldeck-140505105106-phpapp02/85/Canvas-Only-Creative-Coding-in-HTML5-5-320.jpg)
Uploaded byJames Stone
Canvas Only: Creative Coding in HTML5
The document discusses creative coding in HTML5 using libraries like Processing.js and Paper.js, targeting artists interested in interactivity. It includes code snippets for setting up projects, creating objects, and managing interactivity within a canvas. Additionally, it provides resources on various topics such as UI creation and physics engines for HTML5 games.
More Related Content
Similar to Canvas Only: Creative Coding in HTML5
Canvas Only: Creative Coding in HTML5
- 1. Canvas Only Creative Codingin HTML5
- 2. “Software for Makers” MakeMagazine #30 processing.js paper.js know processing want interactivity
- 5. artists --using code [CaseyReas](reas.com) [Aaron Koblin](aaronkoblin.com) [Camille Utterback](camilleutterback.com)
- 7.
- 8.
- 9. p5 live codingvideo • 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” eventbased KineticJS EasleJS
- 12.
- 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.
- 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.
- 23. Simple UI Creationlive 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 livecoding 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 vsChipmunk: 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 vsChipmunk: 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 everythingposted to: github.com/manofstone/canvas-only/