-
Notifications
You must be signed in to change notification settings - Fork 18
Week 4 Notes
p5.js is a Javascript library that lets you use the functionality of Processing in a Javascript context. Much of what you already know how to do in Processing, you'll be able to do seamlessly in p5.js. Developed at ITP by Lauren McCarthy and others, p5.js shares Processing's philosophy of making programming accessible to students, artists, and makers.
In order to use p5 in your project, you just need to include the p5.js javascript file in your HMTL, the same way you would any other Javascript file. (That's what the term "Javascript library" means, by the way -- a script written by someone else that you bring into your project and use.)
Follow the steps in Getting started with p5.js.
Your p5 project will have 3 files:
- p5.js -- the p5 library file you downloaded from http://p5js.org/download/
- sketch.js -- your custom javascript file (call it whatever you like)
- index.html -- HTML file that references your 2 javascript files (doesn't have to be named "index")
For reference, start with these example p5 projects in this repo:
- Skeleton files; useful as a template when starting a new project: https://github.com/robynitp/networkedmedia/tree/master/week4/01-p5js/01-empty_example
- Creates a few simple shapes: https://github.com/robynitp/networkedmedia/tree/master/week4/01-p5js/02-simple_example
For an additional walk-through of how p5.js works, see the p5.js overview.
A note about Canvas
P5.js takes advantage of the HTML5 element <canvas> to render to the browser the type of visual content that we're used to in Processing. Canvas exists independently of p5, and has its own set of Javascript methods that can be used directly. Behind the scenes, p5.js creates a <canvas> element in the browser and draws on it. If you use the element inspector in Dev Tools with your p5 project, you'll see that the HTML element <canvas> shows up in your <body> tag even though you didn't write it in your HTML file. You may not ever need to interact with the canvas element directly in your p5.js projects, but it's worth knowing that it's there.
FYI:
- Differences between p5.js and Processing: Processing - p5.js transition
- The HTML5 Canvas element without p5: HTML5 Canvas Tutorial
See the p5.js Reference for a list of methods available. You'll notice the similarities to Processing; many of the drawing methods -- like rect(), line(), ellipse(), etc -- are exactly the same. The mouse and keyboard methods are also very similar, and are a good place to start. Take a look at the many examples and demos for more ideas.
You can use p5.js with the canvas element while at the same time interacting with DOM elements as we did in plain Javascript last week. However, p5 also has a library especially designed for manipulating the DOM with p5. You don't have to use it -- regular Javascript will still work just fine -- but you might find that it simplifies some of Javascript's lengthy functions. For an intro to the p5 DOM library, see Beyond the Canvas.
Example using p5.js with p5.dom: jsfiddle | github (This is possible in jsfiddle by using the hosted versions of p5.js and p5.dom.js in the "External Resources" area on the left sidebar in jsfiddle)
If you find that your project needs a lot of fine-tuned DOM control and you don't need the p5 drawing tools, you might try using the jQuery library instead of the p5.dom library. jQuery makes it easy to access DOM elements using CSS syntax, and add event listeners to them. It also provides some nifty visual effects. Start with this jQuery introduction to get a sense of how it works.