第 2 章 【 基礎繪製與色彩 】程式框架 - p5.js 開發入門

Date：2022/11/30

使用 open processing 平台

初始設定 setup()

• setup(){內容}
  初始設定，只會繪製一次

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}

不斷繪製 draw()

把想畫的程式碼放在這段中，放置在 draw 中的程式碼都會不斷的繪製疊加上去

function draw() {
  // 你的程式碼
  circle(mouseX, mouseY, 20);
}

畫布設定

createCanvas(寬, 高);

設定畫布 寬 高

基本圖案

• 圓形

// 是算與「圓心」的距離多少
circle(左側距離, 上面距離, 直徑);
circle(10, 10, 20);

• 橢圓

// 是算與「圓心」的距離多少
ellipse(左側距離, 上面距離, 寬, 高);
ellipse(10, 10, 20, 20);

填色

fill(顏色數值)

fill(100)
fill(255, 200, 0);
fill(100, 20) // 數值，透明度

背景色

background(顏色數值);

顏色類別：

• 單一數值 (100)
• RGB 數值 (255,200,0)
• 數值, 透明度 (100, 20)
• 色碼 ("#FFD48E")，要用引號包住

補充：

• 色碼 chrome 擴充套件
• Popular Color Palettes
• twitter 搜尋 #p5js 等相關標籤
• The Coding Train

background() 可以放在 setup() 或是 draw() 區域中

放在 setup()

成為最一開始的畫布底色

放在 draw()

單一顏色

不會有滑鼠軌跡

background(100);

顏色，設定透明度

有滑鼠軌跡，但是有被透明背景覆蓋(變黯淡)

background(100, 20);

變動數值

滑鼠左側和上面距離

要讓圖案某數值隨著滑鼠位置變化，使用 mouseX、mouseY

例如：讓橢圓的位置跟著滑鼠變動

ellipse(mouseX, mouseY, 50,50);

frameCount 幀數

執行後總共畫了幾次
用 print() 來看目前frameCount 次數

print(frameCount);

框線

stroke(顏色數值)
strokeWeight(框線粗度)

stroke(255, 204, 0);
strokeWeight(4);

偵測滑鼠行為

滑鼠有無被點按

mouseIsPressed

if (mouseIsPressed){
  fill(mouseX, mouseY, frameCount);
  ellipse(mouseX, mouseY, 100, 100);
}

實際應用範例

function setup() {
  createCanvas(500,500);
}

function draw() {
  background(100, 2);
  stroke(255, 0, 0);
  strokeWeight(20);
  fill(mouseX, mouseY, frameCount);
  // print(frameCount);
  ellipse(mouseX, mouseY, 100, 100);
}

cheatSheet

快捷鍵

Mac：將 ctrl 代換成 ⌘ cmd 即可

功能	快捷鍵
關鍵字搜尋	Ctrl + F
多重選取關鍵字	Ctrl + D
往左 or 右移動一個單字	Alt + 左右
往左 or 右刪除一個單字	Alt + Delete / Backspace
移動到句首 or 句尾	Ctrl + 左右
往左 or 右刪除一整行	Ctrl + Delete / Backspace
增加 / 減少縮排	Tab / Shift + Tab
執行 Code	Ctrl + enter

VS Code plugin 擴充套件

• Live Server