• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

p5.j​​s简介（什么是p5.j​​s）

ngkoma • 2年前 (2022-06-13) • JavaScript

p5.js是一个面向艺术家、设计师和教育工作者的javascript库，特别关注视觉艺术。这是您在浏览器中创建交互式艺术作品、动画和原型的一种极其简单的方法。 

它深受编程语言处理的启发，它自称为“灵活的软件速写本”。Processing 创建于 2001 年，旨在教授非程序员如何编码，但从那时起，它已成为数以万计的艺术家、设计师和学生的首选语言。 

然而，p5.js 的目标略有不同。p5 为 Web 带来了 Processing 的强大功能和简单性。本教程将向您展示如何创建您的第一个 p5“草图”以及您可以用它做的一些有趣的事情。

入门

因为 p5 是为 web 设计的，所以我们需要一个webp时代。在您的计算机上创建一个新目录并在其中创建一个index.html文件。我们这里不需要太多，只需要标准的零碎。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first p5 sketch</title>
    </head>
    <body>
         
    </body>
</html>

接下来，我们需要 p5 库本身，我们可以从p5 下载页面轻松获得它。我们只需要基础库，所以只需要下载p5的单文件版本。

p5.j​​s简介（什么是p5.j​​s） 第1张将下载的文件放在与您的 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 控制台。这是我看到的：

p5.j​​s简介（什么是p5.j​​s） 第2张

如您所见，这两个函数都是自动调用的，但该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 像素（正方形）。

p5.j​​s简介（什么是p5.j​​s） 第3张

这个正方形可以像我们的背景一样容易上色。我们所要做的就是 在绘制矩形之前指定填充颜色。这次让我们使用一些十六进制。

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);

我们现在有这个：

p5.j​​s简介（什么是p5.j​​s） 第4张

嗯，还是没那么刺激。让我们看看我们能做些什么。现在，请记住我们这里的大部分代码都包含在draw()函数中，正如我们之前看到的，draw 函数中的任何内容都会被一遍又一遍地调用。所以本质上，我们的正方形和圆形是在之前调用 draw 函数时绘制的正方形和圆形之上一遍又一遍地绘制的。 

如果我们每次都在不同的地方绘制我们的形状怎么办？

不同的时间，不同的地方

为了在不同的地方绘制你的形状，你可能想改变它们的坐标值。这是完全可以接受的，也是完全控制绘图的好方法。 

还有一个替代方案。我们可以更改整个画布的偏移量，这意味着我们可以将原点、左上角坐标 (0, 0) 更改为其他值。这样做的结果是我们的形状是用这个偏移量绘制的。如果我们要写translate(10, 10);，我们最终会得到这个。

p5.j​​s简介（什么是p5.j​​s） 第5张

请注意，我们的形状现在从左侧绘制 10 px，从顶部绘制 10 px。

这并没有真正解决我们最初重复绘制形状的问题，但是如果我们要在每次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.j​​s简介（什么是p5.j​​s） 第6张

呸！你可能会发现这个动画有点快。这是因为 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);

我们创造了一个怪物。

p5.j​​s简介（什么是p5.j​​s） 第7张

我很确定我在 1991 年有一件衬衫，上面有同样的图案……

不，我的错，上面有一些黄色三角形。让我们全力以赴并添加一些。

// Random positioned yellow triangle
rotate(random(1, 360));
fill('yellow');
 
// 3 pairs of triangle points
triangle(25, 0, 50, 50, 0, 50);

迷人的。糟糕的 90 年代衬衫还是现代的杰克逊波洛克？这取决于你。正如他们所说，艺术在旁观者的眼中。

p5.j​​s简介（什么是p5.j​​s） 第8张

概括

我希望您已经从本教程中看到使用 p5.js 在浏览器中开始绘图是多么容易。p5 有更多有用、方便的方法来帮助我们绘制形状、动画和处理用户输入。如果您有兴趣了解更多信息，请访问p5 参考页面，或查看我的 Envato Tuts+ 课程Interactive Art With p5.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);
}


文章目录
  • 入门
  • 核心概念
  • 形状
  • 不同的时间，不同的地方
  • 概括
    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：p5.j​​s简介（什么是p5.j​​s）
    文章地址：https://www.weixiaolive.com/en/index.php/post/407.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云