程式基本架構

//初始化，只在程式開始運行的時候執行一次
function setup(){
  createCanvas(800,600); //建立寬高為 800 x 600 的畫布，單位是像素
}

//在初始化之後一直循環執行
function draw(){
  //渲染循環
}

系統變數

windowWidth / windowHeight
//視窗的寬度和高度

width / height
//畫布的寬度和高度

mouseX / mouseY
//滑鼠的位置

測試輸出

console.log(data);
//在控制台裡輸出資料

//用雙斜槓開頭來寫註解（不會被當程式執行）

顏色

fill(120); //gray(灰度): 0-255
fill(100,125,255); //r（紅）, g（綠）, b（藍）: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha（透明度）
fill('red'); //顏色名稱
fill('#ccc'); //3位Hex色碼
fill('#222222'); //6位Hex色碼
color(0, 0, 255); //p5.Color物件

數學

+ - / *  //基本運算符號

random(low,high); //產生一個介於特定範圍的隨機數

map(value, in1, in2, out1, out2);
//把一個數值從一個範圍內映射到另一個範圍

2d 基本圖形

line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //添加更多的頂點
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);

• 網格系統

• line() 線條

• ellipse() 圓

• rect() 矩形

• arc() 扇形

• vertex() 頂點

屬性

background(color);
//指定背景色

fill(color);
//指定填色

noFill();
//不填色

stroke(color);
//指定描邊顏色

strokeWeight(weight);
//指定描邊寬度

noStroke();
//不描邊

ellipseMode(MODE);
rectMode(MODE);
//設定參數被解讀的方式：CENTER（中心模式），CORNER（邊角模式）

textSize(pixels);
//設定文字大小

if/then 邏輯

if(condition){
  //語句
}

===  //等於
!==  //不等於
>   //大於
<   //小於
>=  //大於等於
<=  //小於等於
|| //或
&& //且