Get Started

masterex1000 edited this page Oct 29, 2017 · 7 revisions

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 Atom, Sublime Text or Brackets.

  2. Download p5.js

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

<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!

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.