p5.js 光速入門

本文簡介

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了


本文的目標(biāo)是和各位工友一起有序的快速上手 p5.js 年缎，會(huì)講解 p5.js 的基礎(chǔ)用法疚宇。

本文會(huì)涉及到的內(nèi)容包括：

  • 項(xiàng)目搭建
  • p5.js 基礎(chǔ)2D圖形
  • 文字
  • 圖形樣式設(shè)置
  • 圖片
  • 事件（交互相關(guān)的）
  • 基礎(chǔ)動(dòng)畫

其中還會(huì)講解部分 p5.js 全局方法。

本文不涉及3d部分（放到下一篇吧）醇疼。


官方文檔很重要，但對(duì)于初學(xué)者來說可能會(huì)有點(diǎn)懵。因?yàn)楣俜轿臋n主要講解api的用法眼虱，第一次接觸p5.js的工友可能不是那么容易將各個(gè)知識(shí)點(diǎn)串聯(lián)起來脑溢。

本文在基于官方案例的基礎(chǔ)上兴喂，把我覺得入門必學(xué)的知識(shí)點(diǎn)過一遍，然后串起來搞一個(gè)小特效焚志。

要快速學(xué)習(xí)一個(gè)庫衣迷，尤其是可視化方面的庫，最快速的方法是找到一個(gè)好教程酱酬，然后跟著敲代碼壶谒，建立自己的 “demo倉庫” 。


學(xué)習(xí)本文內(nèi)容膳沽，你需要有 JavaScript 基礎(chǔ)汗菜。



什么是p5.js

p5.js 簡介

引用官網(wǎng)的話：

p5.js 是個(gè) JavaScript 創(chuàng)意編程程式庫，其專注在讓編程更易于使用及更加廣泛的包容藝術(shù)家挑社、設(shè)計(jì)師陨界、教育家、初學(xué)者以及任何人痛阻！p5.js 是個(gè)免費(fèi)及開源的軟件因?yàn)槲覀兿嘈潘腥硕紤?yīng)該能自由使用軟件及用于學(xué)習(xí)軟件的工具菌瘪。

p5.js 使用繪圖的比喻并有一副完整的繪畫功能。除此之外，您也不單限于您的繪圖畫布俏扩。您可以將您整個(gè)瀏覽器頁面當(dāng)作您的繪圖糜工，這包括了 HTML5 物件，如文字录淡、輸入框捌木、視頻、攝像頭及音頻嫉戚。


簡單來說刨裆，p5.js 能讓“切圖仔”更容易做出具有藝術(shù)感的作品（很能整活）。

舉個(gè)例子彬檀，p5.js 很擅長實(shí)現(xiàn)下圖效果崔拥。

file


p5.js 是 Processing 往瀏覽器延伸的一個(gè) canvas庫 。Processing 是使用 Java 編寫的凤覆，而 Java 對(duì)于從事藝術(shù)工作的工友來說上手是有點(diǎn)難度的链瓦。

瀏覽器暫時(shí)只接受 HTML、CSS 和 JavaScript盯桦，如果能將 Processing 直接搬上瀏覽器運(yùn)行的話慈俯，對(duì)于藝術(shù)家來說是大大的好事。于是拥峦，p5.js 應(yīng)運(yùn)而生贴膘！

p5.js 第一個(gè)測試版在 2014年8月 發(fā)布。

更多的故事可在 p5.js 官網(wǎng) 中尋找略号，本文的目標(biāo)是光速入門 p5.js 刑峡。


找到 p5.js



快速上手

本文的目標(biāo)是和各位工友快速上手 p5.js，所以 CDN 的方式引入 p5.js玄柠，因?yàn)檫@樣非嘲叻耍快搭幻！

接下來我們?cè)囋囋诋嫴紕?chuàng)建一個(gè)圓形吧~


環(huán)境搭建

CDN

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

[p5_version] 改成指定版本號(hào)即可鲁森，本文使用的版本是 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/p5@1.5.0/


npm

安裝

npm i p5 --save


引入

import p5 from 'p5'


在畫布創(chuàng)建一個(gè)圓形

我使用的開發(fā)工具是 vs code，并裝了 Live Server 插件这弧。這個(gè)插件可以幫我們快速啟動(dòng)一個(gè)服務(wù)端運(yùn)行當(dāng)前頁面娃闲，并具備熱更新的能力。啟動(dòng)完服務(wù)匾浪，在瀏覽器運(yùn)行指定頁面后皇帮，你代碼的每一次保存，瀏覽器都會(huì)自動(dòng)刷新蛋辈。


file
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {
    createCanvas(200, 200) // 創(chuàng)建一個(gè) 200 * 200 像素的畫布
    background(180, 180, 180) // 畫布背景色 background(r, g, b)
  }

  function draw() {
    circle(60, 60, 100) // 畫一個(gè)圓形
  }
</script>


上面的代碼用到幾個(gè)“奇怪”的方法属拾，逐一講解一下。

  • setup(): 可以理解為 p5.js 的一個(gè)生命周期，創(chuàng)建畫布的方法通常寫在 setup() 里捌年。
  • draw(): 同樣可以理解為 p5.js 的一個(gè)生命周期，在這函數(shù)里的代碼會(huì)以 60幀每秒 的速度執(zhí)行挂洛。
  • createCanvas(): 創(chuàng)建畫布的方法礼预，這個(gè)方法是 p5.js 在全局創(chuàng)建的，傳入畫布的寬高后虏劲，p5.js 會(huì)自動(dòng)在頁面的最后插入一個(gè) canvas 元素托酸。
  • background(): 設(shè)置背景色，可以分別傳入 r柒巫、g励堡、b ，該方法也是 p5.js 在全局創(chuàng)建的堡掏。
  • circle(): 創(chuàng)建圓形的方法应结，3個(gè)參數(shù)分別代表：圓心x坐標(biāo)、圓心y坐標(biāo)泉唁、直徑鹅龄。


暫時(shí)只需大概了解一下怎么畫一個(gè)圓就行，詳細(xì)的后面會(huì)講到亭畜。



項(xiàng)目代碼結(jié)構(gòu)

使用 p5.js 扮休，你可以理解為用這個(gè)工具創(chuàng)造一個(gè)“有生命”的世界。

  • 創(chuàng)造世界的工作是放在 setup() 函數(shù)里的拴鸵。

  • “有聲明” 的意思是這個(gè)世界有生物玷坠，生物無時(shí)無刻都在活動(dòng)。而活動(dòng)的過程是放在 draw() 函數(shù)里劲藐。

setup() 和 draw() 這兩個(gè)函數(shù)非常重要八堡，在前端的世界里，你可以把 setup() 和 draw() 理解為生命周期函數(shù)聘芜。


啟動(dòng)函數(shù) setup

使用 CDN 的方式開發(fā)時(shí)秕重，引入 p5.js 后就會(huì)在全局創(chuàng)建一些函數(shù)和常量。

setup() 是 p5.js 里一個(gè)很重要的方法厉膀，你可以簡單的理解為 setup 是 p5.js 里的一個(gè)生命周期函數(shù)溶耘。在該函數(shù)里可以做很多初始化工作，比如創(chuàng)建畫布并設(shè)置大小服鹅、畫布背景色等凳兵。

setup() 在每個(gè)頁面都只能出現(xiàn)一次，并且它不能在一開始執(zhí)行后再次被調(diào)用企软。


更多說明可查看 setup()說明文檔


繪圖 draw

draw() 是 p5.js 里另一個(gè)很重要的函數(shù)庐扫。

draw() 會(huì)在 setup() 之后執(zhí)行，并且會(huì)重復(fù)的執(zhí)行。如果想打斷 draw() 可以試用 noLoop() 方法形庭。

draw() 每秒執(zhí)行次數(shù)受到 frameRate() 影響铅辞，frameRate() 默認(rèn)每秒60幀。如果需要修改幀率萨醒，可以直接傳入指定數(shù)值斟珊，比如 frameRate(20)。


如果要做動(dòng)畫富纸，代碼可以寫在 draw() 里囤踩。


更多說明可查看 draw()說明文檔



2D基礎(chǔ)圖形

p5.js 可以繪制 2D 和 3D 圖形，但在光速入門階段只會(huì)講解 2D 圖形的基礎(chǔ)用法晓褪。

先從最簡單的點(diǎn)線面開始學(xué)起~


點(diǎn) point

點(diǎn)是 p5.js 的基礎(chǔ)元素之一堵漱，語法如下：

point(x, y, [z])

point() 接收3個(gè)參數(shù)，其中 x 和 y 是必傳參涣仿；如果是在 2D 畫布里勤庐，z 不需要傳。

  • x 表示點(diǎn)在 x 軸的坐標(biāo)
  • y 表示點(diǎn)在 y軸的坐標(biāo)


點(diǎn)出現(xiàn)在畫布的中間

file
<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像素埃元，點(diǎn)在 100, 100 的位置，仔細(xì)看可以發(fā)現(xiàn)點(diǎn)出現(xiàn)在畫布的中心媚狰。


如果需要畫一個(gè)更大的點(diǎn)岛杀，可以通過 strokeWeight() 方法設(shè)置

file
<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) // 更大的點(diǎn)
  }
</script>

其實(shí) strokeWeight() 方法是用來設(shè)置描邊粗細(xì)的，用在 point 里也完全沒問題崭孤。


更多說明可查看 point()說明文檔


線段 line

要畫一根線段的語法：

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

注意上面的參數(shù)順序类嗤，一定不能寫錯(cuò)的。

其中 z1 和 z2 在 2D 情況下是不需要傳的辨宠，所以語法變成這樣：

line(x1, y1, x2, y2)
  • x1 和 y1 代表起點(diǎn)坐標(biāo)
  • x2 和 y2 代表終點(diǎn)坐標(biāo)

使用 line() 方法會(huì)自動(dòng)將起點(diǎn)和終點(diǎn)連接起來遗锣，形成一根線段。


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

和前面的 點(diǎn)(point) 和 線段(line) 不同嗤形，三角形(triangle) 的所有參數(shù)都是必傳的精偿。

三角形有3個(gè)點(diǎn)，每個(gè)點(diǎn)需要用2個(gè)坐標(biāo)(x和y)來描述赋兵，所以 triangle() 一共要傳入6個(gè)參數(shù)笔咽。


經(jīng)過前面的 點(diǎn)(point) 和 線段(line) 練習(xí)，相信你看到三角形的參數(shù)名稱就已經(jīng)知道什么意思了霹期。

確定了3個(gè)點(diǎn)的坐標(biāo)后叶组，triangle() 會(huì)使用直線連接這3個(gè)點(diǎn)，形成一個(gè)三角形历造。


file
<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

正方形是特殊的四邊形甩十，也可以說是特殊的矩形船庇。

所以先從正方形講起。


創(chuàng)建正方形用到的方法是 square()侣监，語法如下所示：

square(x, y, s, [tl], [tr], [br], [bl])
  • x 和 y 是正方形左上角的坐標(biāo)
  • s 是正方形的邊長

tl鸭轮、tr、br橄霉、bl 是用來設(shè)置正方形的圓角半徑窃爷，分別是 上左、上右酪劫、下右吞鸭、下左寺董。如果不傳這幾個(gè)參數(shù)覆糟，正方形的角默認(rèn)是90°（直角）。


file
<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>


圓角半徑

圓角半徑參數(shù)遵循以下規(guī)則：

省略的角半徑參數(shù)設(shè)置為參數(shù)列表中先前指定的半徑值的值遮咖。

意思是滩字，如果只傳入1個(gè)半徑值，那么后面3個(gè)圓角半徑的值會(huì)取左上的圓角半徑御吞。


file
<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個(gè)圓角半徑麦箍，那第三和第四個(gè)圓角半徑的值會(huì)取第二個(gè)的值。


file
<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) 如何創(chuàng)建后陶珠，學(xué)習(xí) 矩形(rect) 會(huì)覺得非常簡單挟裂。

p5.js 提供了 rect() 方法繪制矩形，而且會(huì)根據(jù)參數(shù)的數(shù)量判斷繪制矩形還是繪制正方形揍诽。

語法如下：

rect(x, y, w, [h], [tl], [tr], [br], [bl])
  • x 和 y 是矩形左上角坐標(biāo)位置
  • w 是邊長

如果只傳3個(gè)參數(shù)诀蓉，繪制出來的是正方形（長和寬的值都使用第三個(gè)參數(shù)）

file
<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個(gè)參數(shù)的話，就可以分別設(shè)置長和寬了暑脆，第3和第4個(gè)參數(shù)分別是 w 和 y渠啤。

  • w: x軸方向的長度（寬）
  • h: y軸方向的長度（高）


file
<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個(gè)參數(shù) tl、tr添吗、br沥曹、bl 分別設(shè)置四個(gè)角的圓角半徑，不設(shè)置的話默認(rèn)就是90°碟联。用法和正方形一樣的妓美，自己動(dòng)手試試看吧~


更多說明可查看 rect()說明文檔


四邊形 quad

如果需要繪制四邊形，使用 quad() 即可鲤孵。

四邊形有4個(gè)頂點(diǎn)部脚，1個(gè)定點(diǎn)用2個(gè)參數(shù)表示 x 和 y 坐標(biāo)。

語法如下：

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

需要注意繪制四邊形時(shí)頂點(diǎn)的繪制順序


file
<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() 方法可以創(chuàng)建圓形委刘。

語法如下：

circle(x, y, d)
  • x 和 y 是圓形的坐標(biāo)
  • d 是圓的直徑


file
<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() 可以創(chuàng)建橢圓呕童，橢圓(ellipse) 的創(chuàng)建方法和 矩形(rect) 其實(shí)是有點(diǎn)像的。

ellipse() 方法會(huì)根據(jù)傳入的參數(shù)數(shù)量判斷創(chuàng)建圓形還是創(chuàng)建橢圓淆珊。

語法如下：

ellipse(x, y, w, [h])
  • x 和 y 確定了橢圓的圓心
  • w 橢圓在x軸的寬度
  • h 橢圓在y軸的高度

如果只傳3個(gè)參數(shù)夺饲，h 會(huì)取 w 的值，所以畫出來的是正圓形施符。

如果傳4個(gè)參數(shù)往声，并且 w 和 h 的值不一樣，那畫出來就是一個(gè)橢圓戳吝。


file
<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) 是一個(gè)很好玩的方法浩销，你可以用 arc() 畫圓形、橢圓听哭、餅圖和弧線慢洋。

隨著功能的增加， arc() 所需的參數(shù)也會(huì)比圓形和橢圓更多陆盘。

先來看看語法：

arc(x, y, w, h, start, stop, [mode], [detail])
  • x 和 y: 圓弧的圓心坐標(biāo)
  • w : x軸方向的寬度
  • h: y軸方向的高度
  • start: 弧形開始的角度（用弧度定義）
  • stop: 弧形結(jié)束的角度（用弧度定義）
  • mode: 定義弧形的畫法普筹。可選值：開放式半圓形（OPEN）隘马，封閉式半圓形（CHORD）太防，封閉式餅形段（PIE）
  • detail: 指定構(gòu)成圓弧周長的頂點(diǎn)數(shù)量，在 2D 模式下不會(huì)用到


我知道有很些工友對(duì)弧度制不太熟悉酸员，其實(shí)也不需要擔(dān)心蜒车，p5.js 提供了 radians() 方法，可以將角度轉(zhuǎn)成弧度沸呐。

接下來我就用角度的方式去畫圖展示一下 arc() 是如何使用的醇王。


我畫4個(gè)弧形，分別表示 90°崭添、180° 寓娩、270° 和 360°。

file
<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 的效果

file
<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() {
    // 左上角的圖形蓝角，默認(rèn)
    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 這幾個(gè)常量都不需要我們定義的昌抠，p5.js 已經(jīng)在全局定義好了。


更多說明可查看 arc()說明文檔



其他圖形

除了前面講到的幾個(gè)基礎(chǔ)圖形鲁僚，p5.js 還提供了貝塞爾曲線炊苫、球體、立方體冰沙、圓錐等圖形元素侨艾，甚至還能自定義多邊形。

但在光速入門階段我們只需掌握基礎(chǔ)的圖形拓挥，再加上自己的創(chuàng)意就可以做出很漂亮的作品唠梨。



文本

創(chuàng)建文本的方法叫 text()。

語法如下：

text(str, x, y, [x2], [y2])
  • str: 文本
  • x 和 y 是文本基線左側(cè)的坐標(biāo)
  • x2 和 y2 定義文本內(nèi)容占用的面積撞叽，x2 表示寬度姻成，y2 表示高度插龄。


file
<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 參數(shù)來控制內(nèi)容的展示方式愿棋。

x2 會(huì)影響文本換行方式，y2 控制文本顯示的內(nèi)容均牢。

先說 x2糠雨，這個(gè)參數(shù)是控制文本在 x 軸方向的展示長度，x2 - x 就可以得出這段文字在 x 軸方向可以展示的長度徘跪。

比如一個(gè)字符的寬度是 5px 甘邀，x 設(shè)為10，x2 設(shè)為20垮庐，那么一行就可以展示2個(gè)文字松邪。

但 x2 并不能很好的控制文本長度，它只會(huì)判斷這行文本里有沒有空格哨查，如果出現(xiàn)空格逗抑，且超出文本框?qū)挾鹊膬?nèi)容就會(huì)換行。


y2 - y 得出的長度就是y軸方向可展示的區(qū)域寒亥。超出這個(gè)區(qū)域的文本都不會(huì)展示出來了邮府。


舉個(gè)例子

file
<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>

此時(shí)，在 x2 和 y2 的限制下溉奕，文本已經(jīng)無法完全展示出來了褂傀。



基礎(chǔ)樣式

p5.js 提供了幾個(gè)設(shè)置樣式的方法，我挑常用的幾個(gè)來講講加勤。


顏色

p5.js 支持多種顏色值仙辟，比如 顏色關(guān)鍵字同波、十六進(jìn)制CSS顏色字符串、RGB叠国、HSB参萄、HSL、灰度煎饼。


關(guān)鍵字 與 十六進(jìn)制

顏色關(guān)鍵字 和 十六進(jìn)制CSS顏色字符串 就不多說了讹挎，合格的切圖仔都懂這個(gè)。

  • 關(guān)鍵字: 'red'吆玖、'blue' 等
  • 十六進(jìn)制: #ff0000 等


需要注意的是 RGB筒溃、HSB、HSL 和 灰度沾乘。

其中怜奖，RGB、HSB 和 HSL 都支持傳入第4個(gè)參數(shù)翅阵，這個(gè)參數(shù)表示透明通道歪玲。


RGB

RGB 的第4個(gè)參數(shù)取值范圍是 0 ~ 255，0 表示完全透明掷匠，255 表示完全不透明滥崩。

如果不傳第4個(gè)參數(shù)，默認(rèn)值是 255讹语。

我用 background 背景色來舉例钙皮。

file
<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) // 設(shè)置綠色背景色
  }
</script>

如果此時(shí)在 background() 里傳入第4個(gè)參數(shù)就可以改變背景色的不透明度。

比如

file
background(152, 231, 162, 100)


HSB 與 HSL

HSB 和 HSL 都是顏色表示的一種方法顽决。

  • HSB: H(Hue) 色相短条、S(Saturation) 飽和度、B(Brightness) 亮度
  • HSL: H(Hue) 色相才菠、S(Saturation) 飽和度茸时、L(Lightness) 明度

它們二者之間的區(qū)別可以自行百度搜搜，或者可以看看這篇文章：《色彩空間中的 HSL赋访、HSV可都、HSB 有什么區(qū)別？》进每。這不是本文的重點(diǎn)汹粤。


HSB 和 HSL 在 用法 上差不多，但和 RGB 是有區(qū)別的田晚。

  1. 使用 HSB 和 HSL 前嘱兼，要設(shè)置顏色模式，告訴 p5.js 要使用哪種顏色模式去渲染贤徒。而 RGB 就省略了這步芹壕。
  2. HSB 和 HSL 第1個(gè)參數(shù)取值 0 ~ 360汇四，第2和第3個(gè)參數(shù)取值是 0 ~ 100。而 RGB 前3個(gè)參數(shù)的取值都是 0 ~ 255踢涌。
  3. 在透明度上通孽，HSB 和 HSL 在第4個(gè)參數(shù)的取值范圍是 0 ~ 1 ，而 RGB 是 0 ~ 255 睁壁。

如果要使用 HSB 背苦，就需要使用 colorMode(HSB) 設(shè)置一下；HSL 就用 colorMode(HSL) 設(shè)置一下潘明。


還是用 background() 舉例

file
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
  function setup() {
    createCanvas(300, 300)
    colorMode(HSB) // 設(shè)置 HSB 顏色模式
    background(360, 30, 80) // 設(shè)置背景色
    // background(360, 30, 80, 0.5) // 背景色行剂，添加透明通道
  }
</script>


灰度

灰度模式的意思是只有 “黑白灰” 三種顏色，而灰色是過渡顏色钳降。

灰度模式是默認(rèn)的顏色模式厚宰，不需要進(jìn)行特殊設(shè)置。

灰度模式的取值范圍是 0 ~ 255遂填。0表示黑色铲觉，255表示白色，中間的其他值表示不同程度的灰色吓坚。


使用 RGB 設(shè)置顏色撵幽，需要傳 3 ~ 4 個(gè)參數(shù)，而使用灰度模式只需傳1個(gè)參數(shù)凌唬。

還是拿 background() 舉例

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


背景色 background()

前面一直使用背景色并齐，相信大家已經(jīng)對(duì) background() 的用法非常熟悉了漏麦。

通常 background() 會(huì)在2個(gè)地方用到客税。

一個(gè)是寫在 setup() 里，在初始化畫布時(shí)可以設(shè)置畫布背景色撕贞。

還可以寫在 draw() 里更耻，每次刷新畫布都可以設(shè)置畫布背景色。寫在 draw() 里捏膨，畫布每次刷新都會(huì)重新設(shè)置一次背景色秧均。某些情況下是很有用的，比如移動(dòng)圖像時(shí)号涯，如果背景色沒重新設(shè)置一次目胡，那么圖形移動(dòng)后會(huì)產(chǎn)生“殘留”的現(xiàn)象。這個(gè)放在動(dòng)畫章節(jié)說链快。


填充顏色 fill()

創(chuàng)建圖像后誉己，圖像默認(rèn)的填充色是白色。

要修改圖像填充色域蜗，使用 fill() 方法即可巨双。

file
<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') // 設(shè)置填充色
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

需要注意的是噪猾，一旦設(shè)置了 fill() ，在它后面創(chuàng)建的圖形都會(huì)使用相同的填充色筑累，正如上面的例子那樣袱蜡。

如果希望后面的圖形使用別的顏色，可以再重新調(diào)用一遍 fill() 進(jìn)行設(shè)置慢宗。

file
<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') // 設(shè)置填充色
    rect(30, 30, 100, 80)
    fill('yellow') // 重新設(shè)置填充色
    circle(220, 70, 80)
  }
</script>


無填充 noFill()

如果不想設(shè)置填充色坪蚁，可以使用 noFill() 方法。

不填充的情況下镜沽，圖形內(nèi)部將會(huì)設(shè)置成透明迅细，會(huì)直接顯示在它下層的顏色，如果它下層沒有其他元素淘邻，則會(huì)直接顯示背景色茵典。

file
<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 創(chuàng)建出來的元素默認(rèn)是有一個(gè)黑色邊框，如果想要修改邊框顏色宾舅，可以使用 stroke() 方法统阿。

file
<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') // 設(shè)置邊框顏色
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>

和 fill() 一樣，在使用 stroke() 設(shè)置完顏色之后的圖形都會(huì)使用這個(gè)邊框顏色筹我。如果要再次修改邊框顏色扶平，只需再次使用 stroke() 即可。


無邊框 noStroke()

如果不希望圖形有邊框蔬蕊，可以使用 noStroke() 方法结澄。

file
<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>


設(shè)置邊框粗細(xì) strokeWeight()

使用 strokeWeight() 方法可以設(shè)置圖形邊框的粗細(xì)。

file
<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) // 設(shè)置邊框粗細(xì)
    rect(30, 30, 100, 80)
    circle(220, 70, 80)
  }
</script>


修改文字大小 textSize()

使用 textSize() 方法可以修改文字的字號(hào)

file
<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>


關(guān)于文字的樣式岸夯，前面說到的 fill()麻献、stroke()、strokeWeight() 方法都可以對(duì)文字的填充色猜扮、描邊等樣式進(jìn)行設(shè)置勉吻。自己動(dòng)手試試吧~



圖片

在打算將圖片加入到畫布之前，我們需要了解 preload() 函數(shù)旅赢。

preload() 函數(shù)也是 p5.js 的一個(gè)生命周期函數(shù)齿桃，它會(huì)在 setup() 前執(zhí)行。

preload() 可以強(qiáng)制程序等待煮盼，直到 preload() 函數(shù)內(nèi)的資源加載完成或者事件執(zhí)行完再執(zhí)行其他代碼短纵。

所以一般會(huì)把圖片和視頻等資源加載寫在 preload() 里。


了解完 preload() 后僵控，我們就可以使用 loadImage() 方法加載圖片香到，使用 image() 方法渲染圖片。

注意：加載和渲染是分開2步操作的！

本例請(qǐng)來的演員是我的貓 Bubble

file
<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) // 創(chuàng)建畫布
  }

  function draw() {
    image(img, 0, 0) // 渲染圖片
  }
</script>
  • loadImage() 方法傳入圖片地址
  • image(img, x, y) 方法第一個(gè)參數(shù)是圖片對(duì)象养渴。x 和 y 是圖片左上角的坐標(biāo)雷绢。


除了可以渲染 jpg 和 png 外，p5.js 還可以渲染動(dòng)圖gif理卑。

file
<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() 函數(shù)里使用 frameRate() 方法設(shè)置幀率翘紊，這可以影響gif的刷新率。



交互事件

p5.js 提供了很多鼠標(biāo)和鍵盤的交互事件藐唠，入門階段我們挑2個(gè)來學(xué)就行帆疟。

交互事件通常寫在 draw() 函數(shù)里。


鼠標(biāo)點(diǎn)擊 mouseIsPressed

本例使用 mouseIsPressed 判斷用戶是否點(diǎn)擊了鼠標(biāo)宇立，點(diǎn)擊鼠標(biāo)時(shí)畫布背景是藍(lán)色踪宠，松開鼠標(biāo)后畫布背景是橙色

file
<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) { // 檢測鼠標(biāo)是否按下
      background('skyblue')
    } else {
      background('orange')
    }
  }
</script>

draw() 函數(shù)在頁面運(yùn)行時(shí)會(huì)一直執(zhí)行，所以 mouseIsPressed 寫在 draw() 里可以被捕捉到妈嘹。如果用戶點(diǎn)擊鼠標(biāo)柳琢，且被捕捉到 mouseIsPressed 時(shí)，mouseIsPressed 會(huì)返回 true润脸。


按住鍵盤 keyIsPressed

keyIsPressed 可以檢測用戶當(dāng)前是否按住鍵盤柬脸，如果鍵盤被按下會(huì)返回 true ，否則返回 false毙驯。


file
<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>



動(dòng)畫

動(dòng)畫其實(shí)就是在修改元素屬性的同時(shí)不斷刷新畫布倒堕。

在 p5.js 里做動(dòng)畫效果其實(shí)很簡單，只需要在 draw() 里修改元素屬性即可爆价。


舉個(gè)例子：圓形圖案跟隨鼠標(biāo)指針移動(dòng)

file
<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>


有沒有發(fā)現(xiàn)垦巴，上面的例子在 draw() 里首先設(shè)置背景色，再創(chuàng)建一個(gè)新的圓铭段。

如果沒重新設(shè)置背景色的話骤宣，上一幀的圓會(huì)保留下來。很多時(shí)候保留上一幀的數(shù)據(jù)會(huì)產(chǎn)生不錯(cuò)的藝術(shù)作品稠项。

試試把 draw() 里的 background(100) 這句刪掉

file
<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>

這個(gè)也是p5.js官網(wǎng)的例子


到此涯雅，相信各位工友已經(jīng)對(duì) p5.js 有一定的了解了。



代碼倉庫

?P5.js 學(xué)習(xí)案例



推薦閱讀

??《Canvas 從入門到勸朋友放棄（圖解版）》

??《SVG 從入門到后悔展运，怎么不早點(diǎn)學(xué)起來（圖解版）》

??《Three.js 起飛》

??《Fabric.js 從入門到膨脹》

??《純CSS實(shí)現(xiàn)117個(gè)Loading效果》

??《這18個(gè)網(wǎng)站能讓你的頁面背景炫酷起來》


點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
代碼倉庫

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市精刷，隨后出現(xiàn)的幾起案子拗胜，更是在濱河造成了極大的恐慌，老刑警劉巖怒允，帶你破解...
    沈念sama閱讀 218,682評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件埂软，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)勘畔，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門所灸，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人炫七，你說我怎么就攤上這事爬立。” “怎么了万哪？”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵侠驯，是天一觀的道長。 經(jīng)常有香客問我奕巍，道長吟策，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任的止，我火速辦了婚禮檩坚，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘诅福。我一直安慰自己询筏，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布畔况。 她就那樣靜靜地躺著贴谎，像睡著了一般。 火紅的嫁衣襯著肌膚如雪旺芽。 梳的紋絲不亂的頭發(fā)上沪猴，一...
    開封第一講書人閱讀 51,624評(píng)論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音采章，去河邊找鬼运嗜。 笑死，一個(gè)胖子當(dāng)著我的面吹牛悯舟，可吹牛的內(nèi)容都是我干的担租。 我是一名探鬼主播，決...
    沈念sama閱讀 40,358評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼抵怎，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼奋救！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起反惕，我...
    開封第一講書人閱讀 39,261評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤尝艘，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后姿染，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體背亥，經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狡汉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片娄徊。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖盾戴，靈堂內(nèi)的尸體忽然破棺而出寄锐，到底是詐尸還是另有隱情，我是刑警寧澤捻脖，帶...
    沈念sama閱讀 35,737評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布锐峭，位于F島的核電站，受9級(jí)特大地震影響可婶，放射性物質(zhì)發(fā)生泄漏沿癞。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一矛渴、第九天 我趴在偏房一處隱蔽的房頂上張望椎扬。 院中可真熱鬧，春花似錦具温、人聲如沸蚕涤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0贊 22
  • 一樁弒父案铣猩，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽揖铜。三九已至，卻和暖如春达皿，著一層夾襖步出監(jiān)牢的瞬間天吓，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工峦椰， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留龄寞，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3贊 371
  • 代替公主和親
    正文 我出身青樓汤功，卻偏偏與公主長得像物邑，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子滔金，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容