p5.js是一个面向艺术家，设计师和教育者JavaScript库，尤其侧重于视觉艺术。 这是您在浏览器中创建交互式艺术品，动画和原型的极其简单的方法。
它在很大程度上受编程语言Processing的启发， Processing称自己为“灵活的软件素描本”。 Processing创建于2001年，目的是教非程序员如何编码，但从那时起，它已成为成千上万艺术家，设计师和学生的首选语言。
但是，p5.js的目标稍有不同。 p5将处理的强大功能和简单性带到了Web上。 本教程将向您展示如何创建您的第一个p5“草图”，以及一些您可以用它做的有趣的事情。
入门
因为p5是为Web设计的，所以我们需要一个网页。 在您的计算机上创建一个新目录，并在其中创建一个index.html文件。 在这里，我们不需要太多，仅需要标准位和鲍勃。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first p5 sketch</title>
</head>
<body>
</body>
</html>接下来，我们需要p5库本身，可以从p5下载页面轻松获得。 我们只需要基本库，因此只需下载p5的单个文件版本。
将下载的文件与HTML文件放在同一目录中。 然后，我们可以像这样在HTML中引用它：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first p5 sketch</title>
</head>
<body>
<script src="p5.js"></script>
</body>
</html> 我们还需要一个JavaScript文件来绘制草图。 草图是为我们使用p5创建的图形或动画进行处理。 再次在同一目录中创建另一个文件，并将其命名为my-first-sketch.js 。 这需要在p5库之后引用，因此我们的脚本知道p5提供的所有方法。
<body>
<script src="p5.js"></script>
<script src="my-first-sketch.js"></script>
</body>这就是所有的设置！ 我们现在准备开始创建我们的杰作。
核心概念
p5提供了两种在创建草图时必不可少的方法： setup()和draw() 。 您可能会猜出它们各自的用途，但是它们之间有着重要的隐藏差异。 打开my-first-sketch.js并添加以下内容：
// Setup code
function setup () {
console.log('Hi from setup!');
}
// Drawing code
function draw () {
console.log('Hi from draw!');
} 现在，即使我们只是定义了这些函数，也没有做其他任何事情，因为p5希望我们这样做，所以它会在加载页面时自动执行它们。 在您喜欢的浏览器中打开index.html ，然后打开JavaScript控制台。 这是我看到的：
如您所见，两个函数都被自动调用，但是setup()函数仅被调用一次，而draw()被一遍又一遍地调用—在几秒钟内进行768次！ 稍后我们将了解其重要性。
好了，要开始绘画，我们需要所有艺术家都需要的东西：一块画布。 我们需要做的就是使用p5的createCanvas()函数并将其宽度和高度作为参数。 我们应该从哪里调用此函数？ setup()当然。
function setup () {
// Create a canvas 200px wide and 200px tall
createCanvas(200, 200);
} 如果刷新页面，您将看不到任何不同。 这是因为默认情况下画布是透明的。 让我们用一点颜色修饰一下。 好的红色怎么样？ 将此行也插入setup()中。
background('red'); p5非常聪明，可以知道我们使用的是HTML颜色名称还是十六进制值，即background('#FF0000'); 同样有效。
形状
让我们来画画。 我们有一些内置形状可供使用。 让我们从一个基本的矩形开始。 在我们的绘制函数中，我们可以编写以下内容。 请记住，所有坐标均始于（0，0），即画布的左上角。
function draw () {
rect(0, 0, 50, 50);
}如果刷新页面，则应该看到以下内容：一个以（0，0）开始，宽50像素，高50像素的矩形（一个正方形）。
这个正方形可以像我们的背景一样容易地被上色。 我们要做的就是在绘制矩形之前指定填充颜色。 这次我们使用一些十六进制。
fill('#CC00FF');
rect(0, 0, 50, 50);现在我们有了一个紫色正方形。 并非完全是杰作，但我们正在走向某个地方。 另一个形状呢？ 一圈，我听见你说什么？ 没问题。
// Draw an ellipse that's 25px from the top and
// 25px from the left of the edge of the canvas.
// The ellipse is 25px tall and 25px wide making
// it a circle.
ellipse(25, 25, 25, 25);您会注意到，我们的圆不仅在矩形的顶部绘制，而且与矩形的颜色相同。
这是因为我们调用这些函数的顺序非常重要。 如果我们在椭圆之后绘制矩形，则完全看不到圆，因为它会被绘制。 至于圆的填充颜色，它与正方形相同，因为调用fill()函数后绘制的任何形状都将使用该颜色。 要更改圆形的颜色，只需再次使用其他值调用填充颜色即可。
fill('#66CC66');
ellipse(25, 25, 25, 25);我们现在有这个：
嗯，还是不那么令人兴奋。 让我们看看我们能做什么。 现在，请记住这里的大多数代码都包含在draw()函数中，并且如我们之前所见，draw函数中的所有内容都会被反复调用。 因此，本质上，我们的正方形和圆形是在上一次调用draw函数时绘制的正方形和圆形之上反复绘制的。
如果我们每次都在不同的地方绘制形状怎么办？
不同的时间，不同的地方
为了在其他位置绘制形状，您可能会想更改它们的坐标值。 这是完全可以接受的，也是完全控制图形的好方法。
还有一种选择。 我们可以更改整个画布的偏移量，这意味着我们可以将原点（左上角的坐标（0，0））更改为其他值。 这样的结果是我们的形状以该偏移量绘制。 如果我们要编写translate(10, 10); 我们最终会这样。
请注意，我们的形状现在从左侧绘制了10像素，从顶部绘制了10像素。
这并没有真正解决我们最初反复绘制形状的问题，但是如果我们通过每次draw()调用更改画布的原点怎么办？ 每次将在不同位置绘制形状。 但是什么位置呢？ 每次调用draw()时，我们将如何提出不同的建议？ 幸运的是，p5让我们覆盖了random()函数—一种生成随机数的简便方法。 我们将使用它来随机更改画布的偏移量。
function draw () {
// Offset the canvas
// random(0, width) returns a value between
// 0 and the width of the canvas.
// As does random(0, height) for height.
translate(random(0, width), random(0, height));
// Existing code here
}这为我们提供了动画版本：
呜！ 您可能会很快发现该动画。 这是因为p5尽可能快地绘制我们的形状，并且一次又一次调用draw() 。 如果要放慢速度，可以更改帧速率以减少调用draw()的频率。 在设置函数中调用frameRate() 。
function setup () {
createCanvas(200, 200);
background('red');
frameRate(5);
}这样更好 同样，正方形和圆形总是彼此重叠有点无聊。 让我们尝试旋转形状使事情变得更有趣。 那么，我们该怎么做呢？ 是的，你猜对了，p5让我们再次讨论了。 首先，我们告诉p5我们要使用度数而不是弧度旋转，并且在绘制每个形状之前我们要随机旋转。
angleMode(DEGREES); // uses global DEGREES constant
rotate(random(1, 360)); // rotate to random angle
fill('#CC00FF');
rect(0, 0, 50, 50);
rotate(random(1, 360));
fill('#66CC66');
ellipse(25, 25, 25, 25);我们创建了一个怪物。
我很确定我早在1991年就有一件衬衫，上面印有相同的图案...
不，我的错，上面有一些黄色三角形。 让我们全力以赴并添加一些。
// Random positioned yellow triangle
rotate(random(1, 360));
fill('yellow');
// 3 pairs of triangle points
triangle(25, 0, 50, 50, 0, 50);可爱。 糟糕的90年代衬衫还是现代的杰克逊·波洛克（Jackson Pollock）？ 随你（由你决定。 正如他们所说，艺术在情人眼中。
摘要
我希望您已经从本教程中看到了使用p5.js在浏览器中开始绘制是多么容易。 p5提供了许多有用，方便的方法来帮助我们绘制形状，设置动画和处理用户输入。 如果您想了解更多信息，请访问p5参考页 ，或查看我的Envato Tuts +课程Interactive Art Withp5.js 。
作为参考，这是我们的p5草图的完整资源：
function setup () {
createCanvas(200, 200);
background('red');
frameRate(5);
}
function draw () {
translate(random(0,width), random(0,height));
angleMode(DEGREES);
rotate(random(1, 360));
fill('#CC00FF');
rect(0, 0, 50, 50);
rotate(random(1, 360));
fill('#66CC66');
ellipse(25, 25, 25, 25);
rotate(random(1, 360));
fill('yellow');
triangle(25, 0, 50, 50, 0, 50);
}翻译自: https://code.tutsplus.com/tutorials/introduction-to-p5js--cms-25665
扫一扫
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
