p5.js 庫
p5.js 是一個用於創意編碼的 JavaScript 庫。一組預先編寫的代碼，它為我們提供了簡化在 Web 瀏覽器中使用代碼創建交互式視覺效果的過程的工具。
p5.js 項目結構
p5.js 項目與任何其他 Web 項目一樣——它使用 HTML、CSS 和 JavaScript。一個典型的 p5.js 項目包括 p5.js 庫、index.html、style. css和sketch.js。
包括 p5 .js 庫
p5.js 庫必須使用< script>標記包含在< head >HTML 文檔的部分中。只有這樣，p5.js 庫才能在 JavaScript 文件中使用。
< ! DOCTYPE html>
< html lang="en">
< head>
< script src="p5. js">< /script>
< link rel="stylesheet" type="text/css" href="style .css">
< meta charset="utf-8" />
< /head>
< body>
< script src="sketch.js">< /script>
< /body>
< /html>< /p>
p5.js 畫布
該< canvas>元素是一個 HTML 元素，它呈現使用 JavaScript 的 Canvas API 創建的圖形。
利用幕後的 Canvas API，p5.js 庫提供了許多內置的繪圖函數，這些函數可以< canvas>使用 JavaScript 即時簡化對 HTML 的繪圖。
createCanvas()功能_
該createCanvas()函數在網頁上創建一個 HTML 畫布，將所需的畫布寬度和高度作為參數。通常，它是函數中調用的第一個setup()函數。該createCanvas()函數只能在 p5.js 草圖中調用一次。
function setup() {
// No canvas element will be created for this p5.js sketch
noCanvas();
}
默認畫布
當沒有為函數提供參數時，p5.js 庫將創建一個寬度為 100 像素、高度為 100 像素的默認畫布createCanvas()。
noCanvas()功能_
如果由於某種原因，您的 p5.js 草圖不需要畫布，請顯式調用該noCanvas()函數以阻止 p5.js 庫在程序開始時創建畫布。
function setup(){
// Sets background to a gray color
background(127);
}
background()功能_
該background()函數設置 p5.js 畫布的背景顏色。p5.js 畫布的背景默認是透明的。
background()與一個參數一起使用
當background()使用 0 到 255 之間的數字參數調用該函數時，背景顏色將設置為灰度值，其中 0 為純黑色，255 為純白色。
function setup(){
// Sets the background color to white
background(255);
}
setup()功能_
在 p5.js 程序的開頭，p5.js 庫會自動執行該setup()函數。該setup()函數不應在草圖中顯式調用。
function setup() {
// Runs once at the beginning of the p5.js sketch
}
setup()函數的用途
該setup()函數通常包含定義草圖初始狀態的代碼，例如畫布大小、背景顏色和全局變量的初始值。
let beginSize;
// Initializing the canvas size, background color and beginlSize value
function setup() {
createCanvas(800, 600);
background(220);
beginSize = 5;
}
draw()功能_
該draw()函數在該函數之後自動調用，該setup()函數在程序啟動時運行一次。draw()循環從上到下無限運行函數內部的代碼塊。
function setup(){
// Runs once at the start of the program
}
function draw(){
// Loops infinitely after setup() is run
}
帆布起源
p5.js 畫布使用坐標係來描述空間。畫布的原點 (0, 0) 是畫布的左上角。
坐標系
畫布坐標系使用有序對 (x, y) 來描述，其中 x 坐標是到畫布左邊緣的距離，y 坐標是到畫布上邊緣的距離。
顏色
可以使用 p5.js 以多種方式表示顏色值。可以這樣給出：
- 灰度值作為 0 到 255 之間的一個數值。
- RGB（紅、綠、藍）值作為 0 到 255 之間的三個數值。
- RGBA（紅色、綠色、藍色、Alpha）值作為 0 到 255 之間的四個數值。
- 作為字符串的十六進制值。
- HSB（色調、飽和度、亮度）值作為三個數值，介於 0 和 360 之間的色調和介於 0 和 100 之間的飽和度和亮度。
point()功能_
該point()函數在指定坐標處繪製單個像素。它有兩個參數，第一個參數是 x 坐標，第二個參數是 y 坐標。
可以使用該stroke()功能更改點的顏色。點的大小可以用strokeWeight()函數改變。
line()功能_
該line()函數在兩點之間畫一條線，需要四個參數：每個端點的 x 和 y 位置。
線的寬度可以用strokeWeight()函數設置，線的顏色可以用stroke()函數設置。
rect()功能_
該rect()函數在畫布上繪製一個矩形。它有四個參數：前兩個參數是矩形左上角的 x 和 y 位置。第三個參數是寬度，第四個參數是高度。
square() 功能_
該square()函數在畫布上繪製一個正方形。它有三個必需的參數：前兩個參數是正方形左上角的 x 和 y 位置。第三個參數是正方形的寬度（和高度）。
ellipse()功能_
該ellipse()函數在畫布上繪製一個橢圓。它需要四個參數，其中第一個和第二個參數是橢圓中心的 x 和 y 位置。第三個和第四個參數是橢圓的寬度和高度。
circle()功能_
該circle()函數在畫布上繪製一個圓圈。它具有三個必需的參數，其中第一個和第二個參數是圓心的 x 和 y 位置。第三個參數是圓的寬度（和高度）。
triangle()功能_
該triangle()函數在畫布上繪製一個三角形。它有六個必需的參數：三角形三個頂點中每個頂點的 x 和 y 位置。
quad()功能_
該quad()函數在畫布上繪製一個四邊形。它有八個必需的參數：四個頂點中每個頂點的 x 和 y 位置。
width和height
width是一個內置變量，返回畫布的寬度，該height變量返回畫布的高度。
function setup() {
createCanvas(400, 800);
console.log(width); // Logs 400 to console
console.log(height); // Logs 800 to console
}
background()功能_
該background()函數設置用於 p5.js 畫布背景的顏色。默認背景是透明的。此函數通常在函數內部使用，用於在每幀開始時清除畫布，但如果背景只需要設置一次draw()，則可以在內部使用。setup()
function draw(){
// Sets a red background color
background(255, 0, 0);
}
fill()功能_
該fill()函數設置用於用指定顏色填充形狀的顏色。它必須在繪製形狀之前調用。默認填充顏色為白色。
function draw(){
// Sets the fill color of the circle to blue
fill(0, 0, 255);
circle(100, 100, 25);
}
noFill()功能_
該noFill()函數將形狀的填充顏色設置為透明。它必須在繪製形狀之前調用。
function draw(){
// Sets the square to have transparent fill
noFill();
square(50, 50, 25);
}
stroke()功能_
該stroke()函數將用於形狀的描邊顏色設置為指定的顏色。它必須在繪製形狀之前調用。默認筆觸顏色為黑色。
function draw(){
// Sets stroke color of the square to green
stroke(0, 255, 0);
square(50, 50, 25);
}
strokeWeight()功能_
該strokeWeight()函數將形狀筆觸的寬度設置為指定的像素。它必須在繪製形狀之前調用。默認筆劃粗細為 1 像素。
function draw(){
// Draws a line of 5px thickness
strokeWeight(5);
line(50, 25, 50, 75);
}
noStroke()功能_
該noStroke()功能禁用形狀的筆觸。它必須在繪製形狀之前調用。
function draw(){
// Draws a circle with blue fill color and no stroke/outline
noStroke();
fill(0, 0, 255);
circle(50, 50, 25
}
形狀順序
調用形狀函數的順序很重要，因為最後調用的形狀函數將呈現在先前繪製的形狀之上。
function draw(){
// The square will appear on top of the circle
circle(100, 100, 100);
square(50, 50, 100);
}
for循環
for循環可用於一次繪製多個形狀，這對於創建形狀圖案很有用。循環的迭代器變量for可用於 x 和 y 位置以繪製彼此相鄰的形狀。
function draw(){
// Draw a 5x5 grid of circles that are 25px apart horizontally and vertically
for(let posX = 0; posX < 5; posX++) {
for(let posY = 0; posY < 5; posY++) {
circle(posX * 25, posY * 25, 10);
}
}
}