p5 js互動藝術程式創作 – 初階應用實戰教學！（上篇）

臺灣當代文化實驗場 C-LAB 在 2021 年 10 月 19 日到 10 月 24 日，邀請全球 Processing 使用者共同參與台灣第一屆「Processing 臺灣國際社群日」，活動中集結不同藝術家及設計師的觀點，帶領大眾以多方的視角，進入未來新媒體藝術的全新想像。
老闆在這一連串的活動中，除了擔任對談講者外（參考文章：創意程式設計：Processing／p5.js教學與趨勢觀察——王連晟、吳哲宇台美連線對談），也受邀為設計工作坊擔任講師，此次就是針對 p5.js互動藝術程式創作入門的主題進行為期兩天的分享，分別為第一天的基礎練習與第二天的生程式藝術實作，希望在兩天的時間內，讓同學能學習到生程式藝術創作的基礎，將自己的創意想像以技術實作呈現！在工作坊正式開始前，老闆提供下列素材讓學員進行課前準備，包含：p5.js 的簡短介紹與 Hahow 上的課程示範。
工作坊會從 p5.js 及工具介紹、p5.js 的開發入門、基本圖形繪製以及變數解說循序漸進。本篇文章為第一天的基礎練習介紹，影片總長兩個小時左右，那我們就事不宜遲開始進入工作坊啦！

什麼是 Creative Coding ？

老闆以自我介紹作為開場，從大學的電機工程背景到至紐約就讀新媒體藝術相關研究所，而開始了一連串生成式藝術的創作。對於什麼是 Creative Coding，老闆說自己也是在不太理解的狀況下開始的。是用程式創作藝術嗎？那到底程式創作出來的藝術，最終呈現出來的效果又會是如何呢？這些想必是初接觸生成式藝術的人都會提出的問題，因此老闆提供不同的案例分享，作為答覆的參考。
以目前最常看到的例子來說，視覺上，像是原先平面的設計海報以動態的方式呈現增加趣味性，或是模擬傳統媒材（如水墨）等等，藉由制定規則，讓每一次不同互動產生出的作品都有不一樣的呈現，這使每件藝術作品都是獨一無二的，並且在參與度提升的情況下，成為對互動者更特別的藝術存在。還有在互動網頁上，像是老闆成立的墨雨設計工作室，就有許多應用相關技術的案例，例如與台灣啤酒合作的網頁。或是現在有很多網頁，當使用者將滑鼠向下移動要瀏覽整個畫面時，也會有不同的動畫呈現，整個瀏覽體驗就像是一個完整的時間軸。

在執行設計創作時，老闆也提出自己建立規則的範例供大家參考，以下方作品為例，從中心散開的圓心，其規則並不複雜。先從中心設定隨機數量生成的粒子，粒子會向外成長擴散，並且在成長的過程中變化成不同的顏色，以及施加不同的外力讓粒子扭曲變形。綜合以上這四項變化，就會得出每一次都是不同作品的互動創作。

視覺平面的傳達外，像是在美術館裡的互動式藝術，或是在街角呈現的大型裝置都是可以用 p5.js 執行的。

p5.js 是什麼？

Processing 為一種開源式語言，最初的目的是希望能以視覺化的方式幫助非程式設計師學習程式語言，而後演變成在電子藝術或是互動式設計上都能發現其應用。

而 p5.js 即是將 Processing 以 Javascript 語言做應用，使其可在網路瀏覽器上進行直接創作，免費及開放資料庫的特性，降低了學習門檻，也吸引更多人進入創意程式設計 Creative Coding 的領域。

此外還有像是 MaxMSP，以 Creative Coding 應用在音樂的視覺化效果呈現。其撰寫時與 p5.js 的不同在於，p5.js 一般會以程式碼顯示，但在 MaxMsp 是直接以視覺的圖案的方式做呈現，將語言命令可視化成一塊一塊的圖形，再依位置的安排去創造不一樣的效果，串接出不同的流程，進行音樂的創作。

或是 Sonic Pi，一個使用文字創作音樂的程式設計環境。

Touch Designer 也屬於視覺為基礎的語言，採用圖形化的介面讓使用者創作，實現多媒體特效。

不同的創作環境，都說明 Creative Coding 不論在視覺上，或是聲音上都有豐富的創作應用。而 p5.js 代表的就是更全面的環境，整合了從3D 到聲音都有涵蓋。有同學提到，既然 p5.js 與 processing 的語法幾乎相容，那還有什麼狀況下選擇 processing 比較好呢？老闆回覆是，其實 processing 在過去的優勢現在幾乎在 p5.js 上都能進行，建議剛入門的同學以好操作上手的 p5.js 開始創作入門，這樣到後面如果真的因為 pocessing 可能在效能上有相對好一些，要回 processing 上進行創作，入門時間也不會過長。歸類以下 p5.js 的優勢，簡化了語法、減少了無程式背景的創作者的入門門檻，以及多項資料庫可使用或是簡易自行建立。

課程開始

首先，登入進 Openprocessing ，直接點擊連結便能開始以創作，或是也可以追蹤老闆及不同的創作者，參考不同的創作概念。進入個人創作頁面後，便能看到 「Create a Sketch」，每建立一個 Sketch 都代表一個新的創作實驗場域。點進去創作介面會先看到基本程式裡分成兩個部分， setup 與 draw 兩種不同的規則。前者代表在畫布上的設定，一次性的準備動作，後者代表不斷在畫布上重複著畫上新東西的動作。在創作同時，我們也可以在右方欄位做 layout 設定，讓撰寫程式同時在同一版面看到作品呈現。

一、顏色置換示範

推薦使用 Chrome 瀏覽器的擴充功能「 ColorZilla 」，可以挑選想要的顏色並顯示出色票。當有了色票後，便可以依上色元素不同，在 background() 或是 fill() 做更換。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255,181,35);
}

function draw() {
  circle(mouseX, mouseY, 20);
}

二、繪製圖形、圖形大小與顏色變更示範（筆刷變換）

基本變化像是圖形中不填色 noFill()、去掉圖形外框 noStroke()，或是 strokwWeight() 控制線框粗細。另外，當你要暫停一行程式的功能，請按下 ctrl 鍵與 /，就能看到反灰並且暫停功能的程式碼。

基本圖形控制可以至 p5.js 資料庫中做多方搜尋，以本次範例橢圓形 ellipse 為主，有設定位置是特別指定或是以滑鼠 mouseX、mouseY 代替，與形狀的長寬大小設定。

進入到顏色階段，針對圖形總共有兩個部份可以做編輯，分別是圖形內的顏色以及圖形線條的顏色。fill() 提供圖形內的顏色，stroke()則負責圖形線條的顏色，在顏色選取上，能使用顏色色票、顏色名稱（請記得要加上雙引號，例如：”white”）以及 rgb 顏色（CSS Colors 網站）。如果想要使顏色變化根據互動而有更多元的呈現，可以將 rgb 色彩數值的其中一項更改成滑鼠位置，如此一來顏色就會根據滑鼠位置變化。

滑鼠效果除移動中會有變化外，在 if 與 else 間進行條件判斷，就能在不同情況中呈現不同的效果，下方是根據滑鼠點按之間的效果呈現。

function draw() {
  noStroke()
  fill(mouseX/4,mouseY/4,200)
  print(mouseX/4)
  
  if (mouseIsPressed){
    ellipse(mouseX, mouseY, 100,100);
  } else {
    stroke(255)
    noFill()
    rect(mouseX,mouseY,100,100)
  }
}

如果要增加顏色多樣性，可以使用 random() 設定需要的顏色數值，讓不同的顏色隨機出現。也另外補充個撰寫程式小技巧，可以在選擇多組相同數字時，使用 ctrl 鍵加上 D 進行多重選取減少時間。

上述是由變換位置去進行筆刷的變更，那藉由時間來變更的部分，可以使用 frameCount() 編輯。以示範案例中的橢圓形舉例來說，假使要讓橢圓形的 Y 軸隨著時間來進行筆刷大小的變化，在相對應的 Y 軸編輯位置放上 frameCount 就可以執行，下方範例：

function draw() {
  noStroke()
  fill(mouseX/4,mouseY/4,200)
  print(mouseX/4)

  if (mouseIsPressed){
    ellipse(mouseX, mouseY, 200,frameCount);
  } else {
    stroke(255)
    noFill()
    rectMode(CENTER)
    rect(mouseX,mouseY,100,100)
  }
}

講解到這邊後，老闆給線上參與的同學進行五分鐘的線上練習，題目為：請設計出一個隨機大小為 0 到 50 的圓形筆刷。與此同時，也開放同學在製作時有任何問題能當場詢問，以下問題歡迎參考。

【問題一】 在 p5.js 裡面是否有質感筆刷可以應用或是製作呢？像是油漆筆刷般的效果？

答：有許多方式可以處理，目前先以比較便捷的方式做示範。

先至網路上找尋相關筆刷的圖樣，比如此次是製作油漆類型，那就搜尋相近的筆刷圖案，先下載圖片。

下載其中自己比較喜歡的圖片後，再至 openprocessing 的編輯頁面上傳圖片檔案。便可以開 使進行質感操作啦！

首先，需要先使用 var 宣告與 preload function 預載入，設置質感 texture 的出現，再設置筆刷 image 進行應用，程式與呈現效果如下：

var paintTexture

function preload(){
  paintTexture =loadImage("20190806101953yop172.png")
}

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

function draw() {
  noStroke()
  fill(mouseX/4,mouseY/4,200)
  print(mouseX/4)

  if (mouseIsPressed){
    image(paintTexture,mouseX,mouseY)
  } else {
    stroke(255)
    noFill()
    rectMode(CENTER)
    rect(mouseX,mouseY,100,100)
  }
}

【問題二】 如何分享在 openprocessing 上創作的作品呢？

答：將作品儲存後，可以使用網址直接分享，或是 openprocessing 作品頁面右上方的分享功能都可以使用喔。

接下來進到線上練習的分享時間！

經過五分鐘的練習後，同學應用上述老闆教學說明到的不同應用進行創作。老闆也針對這些分享作品提供不同的建議，或是告訴其他同學這些不同創作是怎麼製作的。例如，有作品使用透明度進行不同編輯，在這邊透明度的應用分為兩種：第一種為圖案顏色的透明度，此類型是在圖案填色 fill() 中，除了 rgb 填寫外，再增加一個代表透明度的數字，變成 rgba 模式，例如 fill(255,255,255,10)，代表顏色具有百分之十的透明度；另一種情況為圖形筆刷在背景留下軌跡與否，在 background() 編輯時，設定透明度，讓背景每秒覆蓋的顏色不會完全覆蓋，如此一來就能留下上一秒的軌跡。

三、變數解說教學

進入應用變數的環節，老闆以設計橢圓形為範例說明。如何快速的將兩個不同的，寬與高等比例放大呢？我們需要設置一個櫃子來存放將這些即將運用到的變數，在需要的時候就可以快速抓取使用。運用 let 設置存放變數，舉例來說 let r=50，後續在 draw 裡面，使用到 r 時程式就會帶入 50 這個數字。

延伸閱讀：使用 let / var / const 宣告變數的差異（鐵人賽：ES6 開始的新生活 let, const – 卡斯伯）

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

function draw() {
  noStroke()
  fill(mouseX/4,mouseY/4,200)
  print(mouseX/4)

  if (mouseIsPressed){
    let r =random(50,200)
    ellipse(mouseX, mouseY, r,r);
    image(paintTexture,mouseX,mouseY)
  } else {
    stroke(255)
    noFill()
    rectMode(CENTER)
    rect(mouseX,mouseY,100,100)
  }
}

四、如何繪製形狀

經由上述的基礎設定、顏色選填、變數教學與基本圖形設定解說後，接下來進行繪製形狀的教學。形狀除了先前提到的圓形或是方形外，還有線條、3/4圓甚至是自己建立的幾何形狀，其實都能應用函數的變化去繪製出。老闆先以線條舉例，函數式為 line(x1,y1,x2,y2)，分別代表連成線條的不同點，而線條粗細是以 strokeWeight() 調整。那該如何得知座標呢？可以先透過設定文字，顯示出滑鼠在座標上移動的位置。

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

function draw() {
  background(255)
  strokeWeight(10)
  line(0,0,500,500)
  textSize(50)
  text(mouseX + "," + mouseY,mouseX,mouseY)
}

老闆也提到如何將圖案融合文字，呈現對話框般的資訊。先設定隨機出現的長方形，並且將方角設定成圓角，使其更具有對話框的設定。並且運用變數設定，使文字與對話框在相同的設定下隨機出現。

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

function draw() {
  // background(255)
  strokeWeight(2)
  let x = random(width)
      y = random(height)
  rect(x,y,200,50,20)
  text("HELLO",x,y+40)
}

或者使用特定條件呈現更多層次的畫面，像是加上 if() 和 else() 的二元判斷變化，以及使用變數讓不同文字隨機出現在不同的對話框中。執行的同時，老闆也會分享一些在寫程式的快捷鍵和小撇步，假使不想只選取單一文字，而是同行多個文字選取，可以根據游標位置，按下 alt 和 shift 再向右或左按下鍵盤左右鍵。或是因為撰寫項目太多，想要進行分類時，可以將無效文字標註在程式中，以防後續搞混或忘記。另外，建立好形狀繪製的基礎後，我們也可以控制出現的頻率。其中一種作法是使用  frameRate() 來編輯。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  frameRate(10)
}

function draw() {
  strokeWeight(2)
  let x = random(width)
      y = random(height)

  if(random()<0.5){
    fill(0)
    rect(x,y,200,50,20)
    textSize(30)
    fill(255)
    text(random(["HELLO","TAIWAN","CREATIVE","CODING"]),x+20,y+40)
  } else {
    // 指定文字大小
    textSize(30)
    // 白底黑字
    let myText = random(["CLAB","TAIWAN","當代文化實驗場"])
    let w=textWidth(myText)
    // 對話框
    fill(255)
    rect(x,y,200,50,20)
    fill(0)
    // 文字
    text(myText,x+20,y+40)
  }
}

瞭解圖形與文字的隨機變化後，繼續進行隨機自行繪製形狀的產生，從三角形隨機顏色變化為例，以及自行繪製的圖形示範。

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

function draw() {
  strokeWeight(random(5))
  line(0,0,width/2,height/2)
  fill(random(0,255),random(0,255),200)
  triangle(0,0,width/2,height/2,mouseX,mouseY)
}

在隨機變化中，老闆習慣設定顏色要在哪種色調或色系間做變化進行設計，建議以這樣的方式進行才比較不易出現奇怪的顏色配置問題。

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

function draw() {
  strokeWeight(random(5))
  line(0,0,width/2,height/2)
  fill(random(50,100),random(100,150),200)
  triangle(0,0,width/2,height/2,mouseX,mouseY)
}

再來是自行繪製的圖形解說，老闆以王冠繪製示範。多邊形製作需要使用到 beginShape() 代表起始位置、 endShape() 代表終點位置，以及 vertex() 說明在起始與終點間會經過哪些點。

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

function draw() {
  background(255)
  // strokeWeight(random(5))
  strokeWeight(50)
  line(0,0,width/2,height/2)
  // line(width/2,height/2,mouseX,mouseY)
  // ellipse(mouseX, mouseY, 20,20);
  fill(random(50,100),random(100,150),200)
  // triangle(0,0,width/2,height/2,mouseX,mouseY)
  fill("#ffcc00")
  beginShape()
    vertex(200,200)
    vertex(200,600)
    vertex(750,600)
    vertex(750,200)
    vertex(600,350)
    vertex(470,200)
    vertex(350,350)
  endShape(CLOSE)
  // 繪製座標文字
  fill("red")
  textSize(50)
  text(mouseX+","+mouseY,mouseX,mouseY)
  // circle(mouseX, mouseY, 20);
}

或者是互動式的顏色應用，將王冠與背景顏色或是新增圖形都設定成會依據滑鼠位置的改變進行更動。使用預設函數改變線條粗細、圖案顏色或是模式等等，去繪製圓形、方形，甚至是多邊形，提供作者與互動者不同的作品溝通模式。像是在皇冠上，老闆進行顏色、大小和特別圖形繪製，主要是根據 mouseX 與 mouseY 的設定。

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

function draw() {
  background(mouseX/4,100,50)
  strokeWeight(20)
  line(0,0,width/2,height/2)
  fill(random(50,100),random(100,150),200)
  fill(255,mouseX/4,0)
  beginShape()
    vertex(200,200)
    vertex(200,600)
    vertex(750,600)
    vertex(750,200)
    vertex(600,350)
    vertex(470+mouseX/10,200)
    vertex(350,350)
  endShape(CLOSE)
  fill(255)
  circle(325,480,100)
  circle(600,480,100+mouseY/10)
  fill(0)
  circle(325,480,30)
  circle(600,480,30)
  line(355,550,500,520+mouseX/30)
  // 繪製座標文字
  fill(255)
  textSize(50)
  text(mouseX + "," + mouseY, mouseX, mouseY)
}

說明完後，又進到同學們自行練習的時間啦！

那也一樣，老闆趁這時解答同學問題。其中有一位同學詢問到霓虹效果該如何呈現，老闆拿出先前做過類似效果的作品說明示範（作品連結）。主要使用 shadow() 的疊色模式編輯，總體上分為兩個步驟，一個是指定形狀中的顏色，另一個是周圍光暈的 dawingContext() 代表周圍光暈的顏色及顯現的程度。老闆以王冠作品進行實際操作， 將王冠周圍的光暈，從最原始的單一色調設定，進階到隨滑鼠移動改變顏色，到最後是點按滑鼠鍵進行光暈顏色變更，多樣化的創作方式供同學參考。

var lightColor

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

function draw() {
  background(mouseX/4,100,50)
  strokeWeight(20)
  line(0,0,width/2,height/2)
  fill(random(50,100),random(100,150),200)

  // 畫王冠
  fill(255,mouseX/4,0)
  drawingContext.shadowColor = lightColor;
  drawingContext.shadowBlur =30;
  beginShape()
    vertex(200,200)
    vertex(200,600)
    vertex(750,600)
    vertex(750,200)
    vertex(600,350)
    vertex(470+mouseX/10,200)
    vertex(350,350)
  endShape(CLOSE)

  // 畫眼睛
  fill(255)
  circle(325,480,100)
  circle(600,480,100+mouseY/10)
  fill(0)
  circle(325,480,30)
  circle(600,480,30)
  line(355,550,500,520+mouseX/30)

  // 繪製座標文字
  fill(255)
  textSize(50)
  text(mouseX + "," + mouseY, mouseX, mouseY)
  // circle(mouseX, mouseY, 20);
}

function mousePressed(){
  lightColor = color(
    random([
      "#F2C400",
      "#F9C784",
      "#8AE1FC"
    ])
  )
}

後續特別應用，例如想讓 frameCount() 的變化是限制在特定範圍內，可以使用 constrain() 限制 frameCount() 隨機大小的範圍，或是使用 sin 或 cos 設計。 sin 是指一到負一之間，譬如 sin(frameCount)*50+200，就可以得知是設定在 負五十加兩百到五十加兩百間。或是，如果要設定由左到右的數字大小，使用 map 設定初始範圍與限制範圍進行有意識的創作編輯。

結語

主要實作教學結束後，老闆也傳授了一些編輯使用上的常用事項。例如，openprocessing 封面設定是可以藉由上方編輯按鈕，進行特定封面圖案設定，如下圖圖示，在此頁面按下右上方 edit 編輯即可操作。

也有同學問到，mouse 的座標是否可以連結到外部感應器的點位？可以開啟編輯頁面左方需連結感應的部分，但如何應用就需要後面再多做分享。或是，想要將 p5.js 的效果呈現在網頁上，能如何操作呢？老闆說明，最快的方式是使用 iframe，先至分享區域做壓縮檔下載、直接使用 emded code 程式碼崁入，或是使用 GitHub 將程式碼轉換成 index 檔案後，到 setting 的 GitHub Pages 上傳，並且再選擇 main 之後存檔，就能藉由網址看到自己已 p5.js 創作的互動程式以網頁的方式呈現。上述精彩的課程教學以及同學們多樣化的提問，就是說明互動藝術程式創作還有好多應用面向可以進行探討，與繼續發掘它不同的樣貌。閱讀到這邊，相信你也對互動藝術程式抱持著更高的興趣了吧！就讓我們接續收看下半場的精彩解說吧！

但，如果你已經迫不急待要開始進行創作，加入 互動藝術程式創作入門課程 開始進行深度學習吧！還有不要忘了 追蹤老闆 Twitter 和訂閱 老闆,來點寇汀吧。Boss, CODING please. Youtube頻道隨時補充新媒體藝術的養份，讓我們一起探索這多元的世界！

此篇直播筆記由幫手熊柑協助整理