Starten met p5.js
Deze pagina leidt je door het opzetten van een p5.js-project en het maken van je eerste schets Als u wilt beginnen met de nieuwe p5.js Web Editor, kunt u naar uw eerste schets navigeren.
Downloaden en het aanmaken van een schets
The easiest way to start is by using the empty example that comes with the p5.js complete download.
If you look in index.html, you'll notice that it links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js.
<script src="../p5.min.js"></script>Alternatively, you can link to a p5.js file hosted online. All versions of p5.js are stored in a CDN (Content Delivery Network). You can see a history of these versions here: p5.js CDN. In this case you can change the link to:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>A sample HTML page might look like this:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>Je kunt ook beginnen met het volgende code codepen.
Ontwikkelomgeving
U kunt naar keuze een code editor kiezen. Instructies voor het instellen van Sublime Text 2 ijn hieronder opgenomen, andere goede editoropties zijn onder meer Brackets, Atom en OpenProcessing. Als u een gebruiker van de schermlezer bent en de p5-webeditor niet gebruikt, kunt u Notepad++ of Eclipse.
Open Sublime. Ga naar het menu Bestand en kies Openen ... en kies de map waarin uw html- en js-bestanden zich bevinden. In de linkerzijbalk ziet u nu de mapnaam bovenaan met een lijst van de bestanden in de map. map direct onder.
Klik op uw sketch.js-bestand en deze zal de rechterkant gaan openen waar u deze kunt bewerken
Open the index.html file in your browser by double clicking on it in your file manager or type: file:///the/file/path/to/your/html
in the address bar to view your sketch.
Your First Sketch
Processing users may want to check out the Processing transition tutorial.
In your editor, type the following:
function setup() {
}
function draw() {
ellipse(50, 50, 80, 80);
}
This line of code means "draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels".
Save your sketch and refresh your page view in your browser. If you've typed everything correctly, you'll see this appear in the display window:
Note: If you are using a screen reader, you must either turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn about using p5 with a screen reader click here and to learn more about the accessibility library here.
If you didn't type it correctly, you might not see anything. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, and the line should end with a semicolon.
One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. The browser isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. You'll get used to it with a little practice. Depending on the browser you are using, you can also see errors by looking at the JavaScript "console". In Chrome, for example, this is under View > Developer > JavaScript Console.
Next, we'll skip ahead to a sketch that's a little more exciting. Delete the text from the last example, and try this:
function setup() {
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
This program creates a window that is 640 pixels wide and 480 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black. We'll explain more about the elements of this program in detail later. For now, run the code, move the mouse, and click to experience it.
What Next?
- Read the Processing transition tutorial to learn how to convert from Processing to p5.js, and the main differences between them.
- View the reference for full documentation.
- Check out the learn page and examples page for more.
- If you wish to use p5 with a screenreader, check out the p5 with a screenreader tutorial.
Parts of this tutorial were adapted from the book, Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015. Copyright © 2015 Lauren McCarthy, Casey Reas, and Ben Fry. All rights reserved.