关于前端:p5js-光速入门

本文简介

点赞 + 关注 + 珍藏 = 学会了

本文的指标是和各位工友一起有序的疾速上手 p5.js，会解说 p5.js 的根底用法。

本文会波及到的内容包含：

• 我的项目搭建
• p5.js 根底 2D 图形
• 文字
• 图形款式设置
• 图片
• 事件（交互相干的）
• 根底动画

其中还会解说局部 p5.js 全局办法。

本文不波及 3d 局部（放到下一篇吧）。

官网文档很重要，但对于初学者来说可能会有点懵。因为官网文档次要解说 api 的用法，第一次接触 p5.js 的工友可能不是那么容易将各个知识点串联起来。

本文在基于官网案例的根底上，把我感觉入门必学的知识点过一遍，而后串起来搞一个小特效。

要疾速学习一个库，尤其是可视化方面的库，最疾速的办法是找到一个好教程，而后跟着敲代码，建设本人的“demo 仓库”。

学习本文内容，你须要有 JavaScript 根底。

什么是 p5.js

p5.js 简介

援用官网的话：

p5.js 是个 JavaScript 创意编程程式库，其专一在让编程更易于应用及更加宽泛的容纳艺术家、设计师、教育家、初学者以及任何人！p5.js 是个收费及开源的软件因为咱们置信所有人都应该能自在应用软件及用于学习软件的工具。

p5.js 应用绘图的比喻并有一副残缺的绘画性能。除此之外，您也不单限于您的绘图画布。您能够将您整个浏览器页面当作您的绘图，这包含了 HTML5 物件，如文字、输入框、视频、摄像头及音频。

简略来说，p5.js 能让“切图仔”更容易做出具备艺术感的作品（很能整活）。

举个例子，p5.js 很善于实现下图成果。

p5.js 是 Processing 往浏览器延长的一个 canvas 库。Processing 是应用 Java 编写的，而 Java 对于从事艺术工作的工友来说上手是有点难度的。

浏览器临时只承受 HTML、CSS 和 JavaScript，如果能将 Processing 间接搬上浏览器运行的话，对于艺术家来说是大大的坏事。于是，p5.js 应运而生！

p5.js 第一个测试版在 2014 年 8 月 公布。

更多的故事可在 p5.js 官网 中寻找，本文的指标是光速入门 p5.js。

找到 p5.js

• p5.js 官网
• p5.js github 地址
• p5.js npm 地址

疾速上手

本文的指标是和各位工友疾速上手 p5.js，所以 CDN 的形式引入 p5.js，因为这样十分快！

接下来咱们试试在画布创立一个圆形吧~

环境搭建

CDN

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

[p5_version] 改成指定版本号即可，本文应用的版本是 1.5.0，所以我是这样引入 1.5.0 版的 p5.js：

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>

查看其余版本能够浏览：https://cdn.jsdelivr.net/npm/…

npm

装置

npm i p5 --save

引入

import p5 from 'p5'

在画布创立一个圆形

我应用的开发工具是 vs code，并装了 Live Server 插件。这个插件能够帮咱们疾速启动一个服务端运行以后页面，并具备热更新的能力。启动完服务，在浏览器运行指定页面后，你代码的每一次保留，浏览器都会主动刷新。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200) // 创立一个 200 * 200 像素的画布
    background(180, 180, 180) // 画布背景色 background(r, g, b)
  }

  function draw() {circle(60, 60, 100) // 画一个圆形
  }
</script>

下面的代码用到几个“奇怪”的办法，逐个解说一下。

• setup(): 能够了解为 p5.js 的一个生命周期，创立画布的办法通常写在 setup() 里。
• draw(): 同样能够了解为 p5.js 的一个生命周期，在这函数里的代码会以 60 帧每秒 的速度执行。
• createCanvas(): 创立画布的办法，这个办法是 p5.js 在全局创立的，传入画布的宽高后，p5.js 会主动在页面的最初插入一个 canvas 元素。
• background(): 设置背景色，能够别离传入 r、g、b，该办法也是 p5.js 在全局创立的。
• circle(): 创立圆形的办法，3 个参数别离代表：圆心 x 坐标、圆心 y 坐标、直径。

临时只需大略理解一下怎么画一个圆就行，具体的前面会讲到。

我的项目代码构造

应用 p5.js，你能够了解为用这个工具发明一个“有生命”的世界。

• 发明世界的工作是放在 setup() 函数里的。
• “有申明”的意思是这个世界有生物，生物无时无刻都在流动。而流动的过程是放在 draw() 函数里。

setup() 和 draw() 这两个函数十分重要，在前端的世界里，你能够把 setup() 和 draw() 了解为生命周期函数。

启动函数 setup

应用 CDN 的形式开发时，引入 p5.js 后就会在全局创立一些函数和常量。

setup() 是 p5.js 里一个很重要的办法，你能够简略的了解为 setup 是 p5.js 里的一个生命周期函数。在该函数里能够做很多初始化工作，比方创立画布并设置大小、画布背景色等。

setup() 在每个页面都只能呈现一次，并且它不能在一开始执行后再次被调用。

更多阐明可查看 setup()阐明文档

绘图 draw

draw() 是 p5.js 里另一个很重要的函数。

draw() 会在 setup() 之后执行，并且会反复的执行。如果想打断 draw() 能够试用 noLoop() 办法。

draw() 每秒执行次数受到 frameRate() 影响，frameRate() 默认每秒 60 帧。如果须要批改帧率，能够间接传入指定数值，比方 frameRate(20)。

如果要做动画，代码能够写在 draw() 里。

更多阐明可查看 draw()阐明文档

2D 根底图形

p5.js 能够绘制 2D 和 3D 图形，但在光速入门阶段只会解说 2D 图形的根底用法。

先从最简略的点线面开始学起~

点 point

点是 p5.js 的根底元素之一，语法如下：

point(x, y, [z])

point() 接管 3 个参数，其中 x 和 y 是必传参；如果是在 2D 画布里，z 不须要传。

• x 示意点在 x 轴的坐标
• y 示意点在 y轴的坐标

点呈现在画布的两头

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {point(100, 100)
  }
</script>

下面的例子中，画布的宽高是 200 像素，点在 100, 100 的地位，认真看能够发现点呈现在画布的核心。

如果须要画一个更大的点，能够通过 strokeWeight() 办法设置

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {point(100, 100)
    strokeWeight(10) // 更大的点
  }
</script>

其实 strokeWeight() 办法是用来设置描边粗细的，用在 point 里也齐全没问题。

更多阐明可查看 point()阐明文档

线段 line

要画一根线段的语法：

line(x1, y1, [z1], x2, y2, [z2])

留神下面的参数程序，肯定不能写错的。

其中 z1 和 z2 在 2D 状况下是不须要传的，所以语法变成这样：

line(x1, y1, x2, y2)

• x1 和 y1 代表终点坐标
• x2 和 y2 代表起点坐标

应用 line() 办法会主动将终点和起点连接起来，造成一根线段。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {line(60, 30, 130, 140)
  }
</script>

更多阐明可查看 line()阐明文档

三角形 triangle

三角形的语法是：

triangle(x1, y1, x2, y2, x3, y3)

和后面的 点(point) 和 线段(line) 不同，三角形(triangle) 的所有参数都是必传的。

三角形有 3 个点，每个点须要用 2 个坐标 (x 和 y) 来形容，所以 triangle() 一共要传入 6 个参数。

通过后面的 点(point) 和 线段(line) 练习，置信你看到三角形的参数名称就曾经晓得什么意思了。

确定了 3 个点的坐标后，triangle() 会应用直线连贯这 3 个点，造成一个三角形。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {triangle(100, 30, 40, 140, 160, 140)
  }
</script>

更多阐明可查看 triangle()阐明文档

正方形 square

正方形是非凡的四边形，也能够说是非凡的矩形。

所以先从正方形讲起。

创立正方形用到的办法是 square()，语法如下所示：

square(x, y, s, [tl], [tr], [br], [bl])

• x 和 y 是正方形左上角的坐标
• s 是正方形的边长

tl、tr、br、bl 是用来设置正方形的圆角半径，别离是 上左 、 上右 、 下右 、 下左。如果不传这几个参数，正方形的角默认是 90°（直角）。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {square(10, 10, 80)
  }
</script>

圆角半径

圆角半径参数遵循以下规定：

省略的角半径参数设置为参数列表中先前指定的半径值的值。

意思是，如果只传入 1 个半径值，那么前面 3 个圆角半径的值会取左上的圆角半径。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {square(10, 10, 80, 10)
  }
</script>

如果是传入 2 个圆角半径，那第三和第四个圆角半径的值会取第二个的值。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {square(10, 10, 80, 10, 30)
  }
</script>

更多阐明可查看 square()阐明文档

矩形 rect

后面理解完 正方形(quad) 如何创立后，学习 矩形(rect) 会感觉非常简单。

p5.js 提供了 rect() 办法绘制矩形，而且会依据参数的数量判断绘制矩形还是绘制正方形。

语法如下：

rect(x, y, w, [h], [tl], [tr], [br], [bl])

• x 和 y 是矩形左上角坐标地位
• w 是边长

如果只传 3 个参数，绘制进去的是正方形（长和宽的值都应用第三个参数）

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {rect(10, 10, 60) // 矩形
  }
</script>

如果传 4 个参数的话，就能够别离设置长和宽了，第 3 和第 4 个参数别离是 w 和 y。

• w: x 轴方向的长度（宽）
• h: y 轴方向的长度（高）

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {rect(10, 10, 60, 100) // 矩形
  }
</script>

前面的 4 个参数 tl、tr、br、bl 别离设置四个角的圆角半径，不设置的话默认就是 90°。用法和正方形一样的，本人入手试试看吧~

更多阐明可查看 rect()阐明文档

四边形 quad

如果须要绘制四边形，应用 quad() 即可。

四边形有 4 个顶点，1 个定点用 2 个参数示意 x 和 y 坐标。

语法如下：

quad(x1, y1, x2, y2, x3, y3, x4, y4)

须要留神绘制四边形时顶点的绘制程序

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {quad(80, 40, 180, 40, 140, 80, 40, 80) // 四边形
  }
</script>

更多阐明可查看 quad()阐明文档

圆形 circle

圆形是“非凡椭圆”，应用 circle() 办法能够创立圆形。

语法如下：

circle(x, y, d)

• x 和 y 是圆形的坐标
• d 是圆的直径

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {circle(80, 80, 100) // 圆形
  }
</script>

下面代码的意思：圆心在 (80, 80) 的地位，直径是 100。换算一下半径就是 50 咯。

更多阐明可查看 circle()阐明文档

椭圆 ellipse

应用 ellipse() 能够创立椭圆，椭圆(ellipse) 的创立办法和 矩形(rect) 其实是有点像的。

ellipse() 办法会依据传入的参数数量判断创立圆形还是创立椭圆。

语法如下：

ellipse(x, y, w, [h])

• x 和 y 确定了椭圆的圆心
• w 椭圆在 x 轴的宽度
• h 椭圆在 y 轴的高度

如果只传 3 个参数，h 会取 w 的值，所以画进去的是正圆形。

如果传 4 个参数，并且 w 和 h 的值不一样，那画进去就是一个椭圆。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {ellipse(80, 80, 100, 50) // 椭圆
  }
</script>

更多阐明可查看 ellipse()阐明文档

弧状 arc

弧形(arc) 是一个很好玩的办法，你能够用 arc() 画圆形、椭圆、饼图和弧线。

随着性能的减少，arc() 所需的参数也会比圆形和椭圆更多。

先来看看语法：

arc(x, y, w, h, start, stop, [mode], [detail])

• x 和 y: 圆弧的圆心坐标
• w : x 轴方向的宽度
• h: y 轴方向的高度
• start: 弧形开始的角度（用弧度定义）
• stop: 弧形完结的角度（用弧度定义）
• mode: 定义弧形的画法。可选值：开放式半圆形（OPEN），封闭式半圆形（CHORD），封闭式饼形段（PIE）
• detail: 指定形成圆弧周长的顶点数量，在 2D 模式下不会用到

我晓得有很些工友对弧度制不太熟悉，其实也不须要放心，p5.js 提供了 radians() 办法，能够将角度转成弧度。

接下来我就用角度的形式去画图展现一下 arc() 是如何应用的。

我画 4 个弧形，别离示意 90°、180°、270° 和 360°。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {
    // 左上角的图形，0-90°（角度）arc(50, 50, 50, 50, radians(0), radians(90))

    // 右上角的图形，0-180°（角度）arc(250, 50, 50, 50, radians(0), radians(180))

    // 左下角的图形，0-270°（角度）arc(50, 250, 50, 50, radians(0), radians(270))

    // 右下角的图形，0-360°（角度）arc(250, 250, 50, 50, radians(0), radians(360))
  }
</script>

从下面的代码能够看出，0°（角度）是在图形的正右方。

顺便展现一下不同 mode 的成果

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {
    // 左上角的图形，默认
    arc(50, 50, 50, 50, radians(0), radians(270))

    // 右上角的图形，开放式半圆形（OPEN）arc(250, 50, 50, 50, radians(0), radians(270), OPEN)

    // 左下角的图形，封闭式半圆形（CHORD）arc(50, 250, 50, 50, radians(0), radians(270), CHORD)

    // 右下角的图形，封闭式饼形段（PIE）arc(250, 250, 50, 50, radians(0), radians(270), PIE)
  }
</script>

OPEN、CHORD 和 PIE 这几个常量都不须要咱们定义的，p5.js 曾经在全局定义好了。

更多阐明可查看 arc()阐明文档

其余图形

除了后面讲到的几个根底图形，p5.js 还提供了贝塞尔曲线、球体、立方体、圆锥等图形元素，甚至还能自定义多边形。

但在光速入门阶段咱们只需把握根底的图形，再加上本人的创意就能够做出很漂亮的作品。

文本

创立文本的办法叫 text()。

语法如下：

text(str, x, y, [x2], [y2])

• str: 文本
• x 和 y 是文本基线左侧的坐标
• x2 和 y2 定义文本内容占用的面积，x2 示意宽度，y2 示意高度。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {text('雷猴', 10, 20)
  }
</script>

咱们还能够传入 x2 和 y2 参数来管制内容的展现形式。

x2 会影响文本换行形式，y2 管制文本显示的内容。

先说 x2，这个参数是管制文本在 x 轴方向的展现长度，x2 - x 就能够得出这段文字在 x 轴方向能够展现的长度。

比方一个字符的宽度是 5px，x 设为 10，x2 设为 20，那么一行就能够展现 2 个文字。

但 x2 并不能很好的管制文本长度，它只会判断这行文本里有没有空格，如果呈现空格，且超出文本框宽度的内容就会换行。

y2 - y 得出的长度就是 y 轴方向可展现的区域。超出这个区域的文本都不会展现进去了。

举个例子

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
      background(220, 220, 220)
  }

  function draw() {
    text(
      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque et assumenda quibusdam quis, rerum incidunt animi nihil perspiciatis temporibus neque!',
      10,
      20,
      40,
      60
    )
  }
</script>

此时，在 x2 和 y2 的限度下，文本曾经无奈齐全展现进去了。

根底款式

p5.js 提供了几个设置款式的办法，我挑罕用的几个来讲讲。

色彩

p5.js 反对多种色彩值，比方 色彩关键字 、 十六进制 CSS 色彩字符串 、RGB、HSB、HSL、 灰度。

关键字 与 十六进制

色彩关键字 和 十六进制 CSS 色彩字符串 就不多说了，合格的切图仔都懂这个。

• 关键字: ‘red’、’blue’ 等
• 十六进制: #ff0000 等

须要留神的是 RGB、HSB、HSL 和 灰度。

其中，RGB、HSB 和 HSL 都反对传入第 4 个参数，这个参数示意通明通道。

RGB

RGB 的第 4 个参数取值范畴是 0 ~ 255，0 示意齐全通明，255 示意齐全不通明。

如果不传第 4 个参数，默认值是 255。

我用 background 背景色来举例。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(152, 231, 162) // 设置绿色背景色
  }
</script>

如果此时在 background() 里传入第 4 个参数就能够扭转背景色的不透明度。

比方

background(152, 231, 162, 100)

HSB 与 HSL

HSB 和 HSL 都是色彩示意的一种办法。

• HSB: H(Hue) 色相、S(Saturation) 饱和度、B(Brightness) 亮度
• HSL: H(Hue) 色相、S(Saturation) 饱和度、L(Lightness) 明度

它们二者之间的区别能够自行百度搜搜，或者能够看看这篇文章：《色调空间中的 HSL、HSV、HSB 有什么区别？》。这不是本文的重点。

HSB 和 HSL 在 用法 上差不多，但和 RGB 是有区别的。

1. 应用 HSB 和 HSL 前，要设置色彩模式，通知 p5.js 要应用哪种颜色模式去渲染。而 RGB 就省略了这步。
2. HSB 和 HSL 第 1 个参数取值 0 ~ 360，第 2 和第 3 个参数取值是 0 ~ 100。而 RGB 前 3 个参数的取值都是 0 ~ 255。
3. 在透明度上，HSB 和 HSL 在第 4 个参数的取值范畴是 0 ~ 1，而 RGB 是 0 ~ 255。

如果要应用 HSB，就须要应用 colorMode(HSB) 设置一下；HSL 就用 colorMode(HSL) 设置一下。

还是用 background() 举例

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    colorMode(HSB) // 设置 HSB 色彩模式
    background(360, 30, 80) // 设置背景色
    // background(360, 30, 80, 0.5) // 背景色，增加通明通道
  }
</script>

灰度

灰度模式的意思是只有“黑白灰”三种色彩，而灰色是过渡色彩。

灰度模式是默认的色彩模式，不须要进行非凡设置。

灰度模式的取值范畴是 0 ~ 255。0 示意彩色，255 示意红色，两头的其余值示意不同水平的灰色。

应用 RGB 设置色彩，须要传 3 ~ 4 个参数，而应用灰度模式只需传 1 个参数。

还是拿 background() 举例

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(128) // 设置背景色
  }
</script>

背景色 background()

后面始终应用背景色，置信大家曾经对 background() 的用法十分相熟了。

通常 background() 会在 2 个中央用到。

一个是写在 setup() 里，在初始化画布时能够设置画布背景色。

还能够写在 draw() 里，每次刷新画布都能够设置画布背景色。写在 draw() 里，画布每次刷新都会从新设置一次背景色。某些状况下是很有用的，比方挪动图像时，如果背景色没从新设置一次，那么图形挪动后会产生“残留”的景象。这个放在动画章节说。

填充色彩 fill()

创立图像后，图像默认的填充色是红色。

要批改图像填充色，应用 fill() 办法即可。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }
  function draw() {fill('#f2c0ca') // 设置填充色
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

须要留神的是，一旦设置了 fill()，在它前面创立的图形都会应用雷同的填充色，正如下面的例子那样。

如果心愿前面的图形应用别的色彩，能够再从新调用一遍 fill() 进行设置。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }
  function draw() {fill('#f2c0ca') // 设置填充色
    rect(30, 30, 100, 80)
    fill('yellow') // 从新设置填充色
    circle(220, 70, 80)
  }
</script>

无填充 noFill()

如果不想设置填充色，能够应用 noFill() 办法。

不填充的状况下，图形外部将会设置成通明，会间接显示在它上层的色彩，如果它上层没有其余元素，则会间接显示背景色。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }

  function draw() {noFill()
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

边框色彩 stroke()

p5.js 创立进去的元素默认是有一个彩色边框，如果想要批改边框色彩，能够应用 stroke() 办法。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }

  function draw() {stroke('red') // 设置边框色彩
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

和 fill() 一样，在应用 stroke() 设置完色彩之后的图形都会应用这个边框色彩。如果要再次批改边框色彩，只需再次应用 stroke() 即可。

无边框 noStroke()

如果不心愿图形有边框，能够应用 noStroke() 办法。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }

  function draw() {noStroke() // 无边框
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

设置边框粗细 strokeWeight()

应用 strokeWeight() 办法能够设置图形边框的粗细。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }

  function draw() {strokeWeight(10) // 设置边框粗细
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

批改文字大小 textSize()

应用 textSize() 办法能够批改文字的字号

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(200)
  }

  function draw() {textSize(100)
    text('雷猴', 20, 100)
  }
</script>

对于文字的款式，后面说到的 fill()、stroke()、strokeWeight() 办法都能够对文字的填充色、描边等款式进行设置。本人入手试试吧~

图片

在打算将图片退出到画布之前，咱们须要理解 preload() 函数。

preload() 函数也是 p5.js 的一个生命周期函数，它会在 setup() 前执行。

preload() 能够强制程序期待，直到 preload() 函数内的资源加载实现或者事件执行完再执行其余代码。

所以个别会把图片和视频等资源加载写在 preload() 里。

理解完 preload() 后，咱们就能够应用 loadImage() 办法加载图片，应用 image() 办法渲染图片。

留神：加载和渲染是离开 2 步操作的！

本例请来的演员是我的猫 Bubble

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  let img = null

  function preload() {img = loadImage('./cat-bubble.jpg') // 加载图片
  }

  function setup() {createCanvas(200, 200) // 创立画布
  }

  function draw() {image(img, 0, 0) // 渲染图片
  }
</script>

• loadImage() 办法传入图片地址
• image(img, x, y) 办法第一个参数是图片对象。x 和 y 是图片左上角的坐标。

除了能够渲染 jpg 和 png 外，p5.js 还能够渲染动图 gif。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  let img = null

  function preload() {img = loadImage('./portrait.gif') // 加载 gif
  }

  function setup() {createCanvas(240, 150)
  }

  function draw() {image(img, 0, 0) // 渲染图片
  }
</script>

能够在 setup() 函数里应用 frameRate() 办法设置帧率，这能够影响 gif 的刷新率。

交互事件

p5.js 提供了很多鼠标和键盘的交互事件，入门阶段咱们挑 2 个来学就行。

交互事件通常写在 draw() 函数里。

鼠标点击 mouseIsPressed

本例应用 mouseIsPressed 判断用户是否点击了鼠标，点击鼠标时画布背景是蓝色，松开鼠标后画布背景是橙色

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background('orange')
  }

  function draw() {if (mouseIsPressed) { // 检测鼠标是否按下
      background('skyblue')
    } else {background('orange')
    }
  }
</script>

draw() 函数在页面运行时会始终执行，所以 mouseIsPressed 写在 draw() 里能够被捕捉到。如果用户点击鼠标，且被捕捉到 mouseIsPressed 时，mouseIsPressed 会返回 true。

按住键盘 keyIsPressed

keyIsPressed 能够检测用户以后是否按住键盘，如果键盘被按下会返回 true，否则返回 false。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background('orange')
  }

  function draw() {if (mouseIsPressed) { // 检测键盘是否按下
      background('skyblue')
    } else {background('orange')
    }
  }
</script>

动画

动画其实就是在批改元素属性的同时一直刷新画布。

在 p5.js 里做动画成果其实很简略，只须要在 draw() 里批改元素属性即可。

举个例子：圆形图案追随鼠标指针挪动

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(100)
  }

  function draw() {background(100)
    circle(mouseX, mouseY, 40, 40)
  }
</script>

有没有发现，下面的例子在 draw() 里首先设置背景色，再创立一个新的圆。

如果没从新设置背景色的话，上一帧的圆会保留下来。很多时候保留上一帧的数据会产生不错的艺术作品。

试试把 draw() 里的 background(100) 这句删掉

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {createCanvas(300, 300)
    background(100)
  }

  function draw() {circle(mouseX, mouseY, 40, 40)
  }
</script>

这个也是 p5.js 官网的例子

到此，置信各位工友曾经对 p5.js 有肯定的理解了。

代码仓库

⭐P5.js 学习案例

举荐浏览

👍《Canvas 从入门到劝敌人放弃（图解版）》

👍《SVG 从入门到悔恨，怎么不早点学起来（图解版）》

👍《Three.js 腾飞》

👍《Fabric.js 从入门到收缩》

👍《纯 CSS 实现 117 个 Loading 成果》

👍《这 18 个网站能让你的页面背景炫酷起来》

点赞 + 关注 + 珍藏 = 学会了
代码仓库