跳到内容

语言设定

入门

This page walks you through setting up a p5.js project and making your first sketch. The easiest way to start is using the p5.js editor, you can open the web editor and can scroll down to Your First Sketch. If you would like to work on the the desktop version of p5.js you can scroll down to downloading instructions.

Your First Sketch

Code snippet with ellipse

In the p5.js web editor you should find the following code:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

After the background(220); include this line of code: ellipse(50,50,80,80);.

Now your code should be like this:

Code snippet with ellipse


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

The line you just added draws an ellipse, with its center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.

On the editor press play to display your code in action!

Note for screenreader users

If you are using a screen reader, you must turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn more visit using p5 with a screen reader tutorial.

If you've typed everything correctly, this will appear in the display window:

canvas has a circle of width and height 50 at position 80 x and 80 y

If nothing appears, the editor may be having trouble understanding what you’ve typed. 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, the line should end with a semicolon, and ellipse has to be spelled correctly.

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. In the bottom left of the editor you will find the console section. Here, you can find messages from the editor with details about any errors it encounters.

Code snippet with interaction

Next, we'll skip ahead to a sketch that's a little more exciting. Modify the last example to try this:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

This program creates a canvas that is 400 pixels wide and 400 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. Run the code, move the mouse, and click to experience it.

canvas has multiple circles drawn on it following the path of the mouse

下一步

Setting up p5.js with an editor on your own computer

您可以使用任何 代码编程器 。以下为设置 Sublime Text 2 的步骤。其他不错的代码编程器包括BracketsAtom. 如果您使用荧幕阅读器但不使用 p5 Editor,您可考虑使用 Notepad++Eclipse.

Downloading a copy of the p5.js library

最简易的起点是使用 p5.js 完整版 下载所提供的空白范例。

After download, you need to set up a local server. See instructions here . Run your local server within the downloaded folder and on your browser, go to http://localhost:{your-port-num}/empty-example

查看 index.html 您可以发现其中有个 p5.js 的链接。如果您想要使用极简化的档案(以加速网页加载的速度),将链接档案名改为 p5.min.js

<script src="../p5.min.js"></script>

Using a hosted version of the p5.js library

另外,您也可以选择链接去网络上的 p5.js 文档。所有 p5.js 版本都被上载到多个 CDN (Content Delivery Network) 上,您可在此链接参考所有 p5.js 版本: p5.js CDN。接下来您只需要将链接改为:

<script src="https://cdn.jsdelivr.net/npm/[email protected][p5_version]/lib/p5.js"></script>

一个极简但完整的 HTML 档案如下:


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected][p5_version]/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>
        

编程环境

开启 Sublime。选择 File 目录项目然后选择 Open... 接着在对话框中选择含有您的 .html 及 .js 档案的文件夹。在窗口左边的文件栏您应该能看到文件夹的名字在最上方而往下都是该文件夹里面所含的档案。

点击 sketch.js 档案即会在右边开启该档案,您也能在这时更改该档案。 p5 starter code opened up in sublime editor."

在文件浏览器内双击 index.html 以在您的网页浏览器内开启该档案,或您也可以直接在网页浏览器内的网址栏输入: file:///html文件在硬盘上的位置/ (or http://localhost:{your-port-num}/empty-example if you are using a local server) 以查看您的绘图。

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. All rights reserved. Last modified at the p5.js 2019 Contributors Conference.