本文简介

点赞 + 重视 + 保藏 = 学会了

本文的目标是和各位工友一起有序的快速上手 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>

检查其他版别能够阅读：cdn.jsdelivr.net/npm/p5@1.5.…

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 是有区其他。

运用 HSB 和 HSL 前，要设置色彩形式，告知 p5.js 要运用哪种色彩形式去烘托。而 RGB 就省掉了这步。
HSB 和 HSL 第1个参数取值 0 ~ 360，第2和第3个参数取值是 0 ~ 100。而 RGB 前3个参数的取值都是 0 ~ 255。
在通明度上，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步操作的！

本例请来的艺人是摸鱼的春哥

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  let img = null
  function preload() {
    img = loadImage('https://p3-passport.byteimg.com/img/user-avatar/848d36b5efa8e055ab080bff4f27e669~180x180.awebp') // 加载图片
  }
  function setup() {
    createCanvas(180, 180) // 创立画布
  }
  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('https://p3-passport.byteimg.com/img/user-avatar/221976c6804d412aa876fdd5154129ae~180x180.awebp') // 加载 gif
  }
  function setup() {
    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 有一定的了解了。

引荐阅读

《Canvas 从入门到劝朋友抛弃（图解版）》

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

《Three.js 起飞》

《Fabric.js 从入门到膨胀》

《纯CSS实现117个Loading作用》

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

点赞 + 重视 + 保藏 = 学会了

p5.js 光速入门

本文简介

什么是p5.js

p5.js 简介

找到 p5.js

快速上手

环境搭建

CDN

npm

在画布创立一个圆形

项目代码结构

发动函数 setup

绘图 draw

2D根底图形

点 point

线段 line

三角形 triangle

正方形 square

圆角半径

矩形 rect

四边形 quad

圆形 circle

椭圆 ellipse

弧状 arc

其他图形

文本

根底款式

色彩

关键字 与 十六进制

RGB

HSB 与 HSL

灰度

布景色 background()

填充色彩 fill()

无填充 noFill()

边框色彩 stroke()

无边框 noStroke()

设置边框粗细 strokeWeight()

修正文字大小 textSize()

图片

交互事情

鼠标点击 mouseIsPressed

按住键盘 keyIsPressed

动画

引荐阅读

相关文章

K8s 入门指南（一）：单节点集群环境搭建

如何实现一款接入chatGPT的智能音箱

字节开源 Monoio ：基于 io-uring 的高性能 Rust Runtime

Git入门图文教程(1.5W字40图)🔥🔥–深入浅出、图文并茂

作者信息

关键字与十六进制