Get Started

Paolo Pedercini edited this page Jun 24, 2015 · 4 revisions
Clone this wiki locally

Before you start you should be at least vaguely familiar with p5.js or javascript.

  1. Download and set up code editor of your choice like Sublime text, Brackets or the official p5.js editor - still in development.

  2. Download p5.js

  3. Open from the empty example included in the p5.js complete distribution and link p5.play in the

    <script src="lib/p5.play.js" type="text/javascript"></script>

Or you can create an html page (e.g. index.html) from scratch:

<!DOCTYPE html>
<html>
   <head>
     <title>p5.play Example</title>
     <!-- link p5.js and its addons like p5.dom.js or p5.sound.js -->
     <script src="lib/p5.js" type="text/javascript"></script>
     <!-- link p5.play.js -->
     <script src="lib/p5.play.js" type="text/javascript"></script>  
     <!-- link your javascript sketch -->
     <script src="sketch.js" type="text/javascript"></script>
   </head>
   <body>
   </body>
</html>
  1. Create a js project (e.g. sketch.js) and run it:
function setup() {
  createCanvas(800,400);
  createSprite(400, 200, 50, 50);
}

function draw() {
  background(255,255,255);  
  drawSprites();
}

If a square appears you are all set!