一開始先以極座標的方式去定義點的位子，並用 curveVertex() 將點連成線。過程中不斷去調整 curveVertex() 中 X與Y的位置，到了步驟五，呈現出一顆中心原子核的時候才比較確定這次的主題，接下來就決定朝向物理以及科幻的風格去做，所以後面就加上了在四周圍繞的游離粒子、標示刻度的數字以及線條來包圍中間的量子完成作品。

透過此次互動藝術創作教學，你會學到

• 在製作 HUD 這類科幻類型主題時，可以使用哪些裝飾性的技巧
• 如何應用極座標的概念，來繪製線條，並透過旋轉角度速度、內外層圓圈、圓周上位子等不同的參數來調整出所希望的效果。
• 利用原有的素材 ( X與Y的位置)，來產生出不一樣的物件效果 (游離粒子)

在開始製作之前你該知道的p5.js小技巧

• 極座標 來繪製粒子位置，並將點的位子連接起來形成曲線
• vertex() 有極座標位置後，以 vertex() 將點連成線，需要在畫線的前後加上 beginShape() 與endShape()
• curveVertex() 與 vertex() 相同將點連成線，差異在於 vertex() 所連成的線為直線，而 curveVertex() 連成的為曲線
• 透過 noise() 產生隨機的效果，比起一般常用的 random() 來說會更自然、和諧一點。老闆的範例中會時常使用 noise，所以建議在開始之前點進去先稍微理解 noise 的概念
• drawingContext 繪製陰影
• push() / pop() 保存與還原畫布的狀態（可以參考老闆互動藝術程式創作入門的課程筆記：章節 7 進階繪圖 – 畫布操作與編織複雜圖形 (pop/push 的圖解)）
• setAlpha() 可設定顏色的透明度

就讓老闆帶你們一步步完成吧！

1. 繪製圓形與波形

在最初的時候我們先由畫布中心向外畫出同心圓，來確認一下每一個圓大致上的位置。（程式碼中的1. 同心圓版本）

接下來就將原本繪製圓形的 ellipse 替換成以極座標 cos 與 sin 來作呈現，詳細的原理可參考 來用可怕的三角函數做網頁吧! – Part 1 。這樣我們就可以動態地指定半徑 – rr 的大小。（程式碼中的2. 改成 vertex，並以 cos 以及 sin 來指定點的位置）

另外，也可以更改 ang 的角度，展示出不同的波形，而途中會產生動態旋轉效果的原因是因為老闆在設定 ang 中，加入了系統變量（也就是計算程式啟動以來的幀數 frameCount）。（程式碼中的3. 以 frameCount 來產生動態的角度變化 ang，隨時間製造出不同的波型）

這裡提供一個畫圓的示範連結，可以嘗試改變 cos 與 sin 裡面的 i ，以及後面所相乘的 50 ，透過修改去理解各個參數所代表的是甚麼含意。

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

function draw() {
  background(230)
  translate(width/2,  height/2)

  // 1. 同心圓版本
  for(var i=0; i<width; i+=100){
    ellipse(0, 0, width-i);
  }

  // 2. 改成 vertex，並以 cos 以及 sin 來指定點的位置
  for(var i=0; i<width; i+=100){
    beginShape()
    let rr = width-i;
    // ellipse(0, 0, width-i);
    for(var o=0; o<360; o+=3){
      vertex(cos(o)*rr, sin(o)*rr)
    }
    endShape()
  }

  // 3. 以 frameCount 來產生動態的角度變化 ang，隨時間製造出不同的波型
  for(var i=0; i<width; i+=100){
    beginShape()
    let rr = width-i;
    // ellipse(0, 0, width-i);
    for(var o=0; o<360; o+=3){
      let ang = o/1.2+frameCount;
      vertex(cos(ang)*rr, sin(ang)*rr)
    }
    endShape()
  }
}

2. 加上顏色

在顏色的選擇上，老闆一樣使用配色網站 https://coolors.co/ 抓取隨機產生的配色，在選定好顏色後，可以直接複製上面的網址到程式中處理，變成可以使用的色票格式。

而在波形上老闆有做三個更動：

• 減少連接點的數量，360 個 → 100個。
• 在點與點的連接上，由 vertex 改為 curveVertex，差異在於 curveVertex 在連接點與點之間會帶有弧形，會比較有滑順感，vertex 則是直線連接。
• 在 ang 角度的設定上，若是把係數拿掉，會長成 o / i + frameCount / o ，其中 i 所代表的是由內而外的每一圈，當它被放在分母的時候，這也代表當越外圈( i 越小)，o / i也會越大，再參數相加後，ang 也跟著變大，這樣就達成了越外圈頻率越快，越是內圈頻率越慢的效果。

/*1. 設定顏色 */
let colors = "3d348b-7678ed-f7b801-f18701-f35b04".split("-").map(a=>"#"+a)

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

function draw() {
  background(0)
  translate(width/2,  height/2)
  strokeWeight(2)
  noFill()
  for(var i=0; i<width; i+=100){
    beginShape()
    let rr = (width-i)*0.8;
    // ellipse(0, 0, width-i);
    /*1. 設定顏色 */
    stroke(colors[int(i/100)%5])
    /*2. 改變波型數量: 360 -> 100 ; 改變角度(ang)設定  ; Vertex -> curveVertex */
    for(var o=0; o<100; o+=3){
      let ang = o/(1.2+i/2000)+frameCount/(40+o);
      curveVertex(cos(ang)*rr, sin(ang)*rr)
    }
    endShape()
  }
}

3. 加上材質 調整波型大小

接著為了讓上面的波型有點分段，所以加上開始的角度 stAng ，在 stAng 中，老闆根據上該點是第幾圈 i，以及是在圓周上哪個位置上 o，來決定是哪個角度開始。

而在每一個點的位置上，老闆在 x 與 y 的座標上都加上 i 值，因為所有的點都同時加上一樣的正值，所以原本可以完整圓的畫面，現在看去只能顯示原本圖形的左上的部分，其餘的點並非消失，而是該點的位置已經超出畫面的範圍了。

/* 2. 加上  start angle */
for(var o=0; o<100; o+=3){
  let stAng = frameCount/1000 + (o/2) + (i/2)
  let ang = stAng+o/(1.2+i/2000)+frameCount/(40+o);
  /* 3. 在 x 與 y 的位置上都加上 i */
  curveVertex(i+cos(ang)*rr, i+sin(ang)*rr)
}

下面是以只有一個圓的簡化版本，並且標示出位置點，如此一來比較容易思考點在位置上的變化。

除了調整波型外，老闆也在這裡加上材質，新增材質共有三大步驟，分別是命名材質、設定材質、疊加材質。

• 命名材質
  在全域中命名材質變數 let overAllTexture

/* 1. 加上材質 */
let overAllTexture

• 設定材質
  在 setup() 中設定材質的樣式

  overAllTexture=createGraphics(width,height)
  overAllTexture.loadPixels()
  // noStroke()
  for(var i=0;i<width+50;i++){
    for(var o=0;o<height+50;o++){
      overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,40,80])))
    }
  }
  overAllTexture.updatePixels()

• 疊加材質
  在 draw() 中改變與色塊的混合模式

push()
  blendMode(MULTIPLY)
  image(overAllTexture,0,0)
pop()

4. 調整縱向比例製造中心壓縮

這裡老闆先將原本上個步驟在 x 與 y 位置加上 i 的效果先拿掉。改以增加 x 參數中半徑的大小，在 rr 後加上了 i/2 ，這會左右拉伸，製作出被上下壓縮的效果。而在 y 在位置上則是改加上 i/2，產生出由上而下的，俯瞰的感覺。為什麼這裡不是一樣加上 i 呢 ? 這是因為這會使圖形超出畫面的範圍。

  /*3. 線條變粗 */
  strokeWeight(10)

  /*1. 將 X 變小 */
  for(var o=0; o<100; o+=5){
    let stAng = frameCount/1000 + (o/2) + (i/10)
    let ang = stAng+o/(3+i/5000)+frameCount/(30+o);
    curveVertex(cos(ang)*(rr+i/2), i/2+sin(ang)*rr)
  }

接著老闆替線條加上陰影，在陰影的設定上，有四個基本的參數，分別是顏色 (shadowColor)、 X 的偏移量(shadowOffsetX)、 Y 的偏移量(shadowOffsetY)以及模糊的程度(shadowBlur)。加上陰影是老闆在很多的創作時候會使用的手法，當這個陰影就是根據線條本身改變的時候，就會有拼貼的立體感出來。

function setup() {
  /*設定材質 */

  /*2. 加上陰影 */
  drawingContext.shadowColor = color(0,100)
  drawingContext.shadowOffsetY = 3
  drawingContext.shadowOffsetX = 3
  drawingContext.shadowBlur = 20
}

5. 移動中心點繞中心旋轉

再次調整波型呈現方式 !

這裡回歸到原始純粹的模樣，將 stAng 設定為 0，並且將原本加在 y 位置上的i/2 拿掉，這樣就像是一個圍繞的中心在旋轉的粒子球。

/*1. 回歸到最於原始，並且變成是繞中心點旋轉 */
let rr = (width-i)*0.5
...
for(var o=0; o<100; o+=5){
  let stAng = 0
  let ang = stAng+o/(3+i/5000)+frameCount/(30+o);
  curveVertex(cos(ang)*(rr+i/2), sin(ang)*(rr-i/10))
}

接著就把作品固定到中央，並且讓它慢慢地旋轉，此時突然發現這好像磁力線以及極光的感覺，所以就決定朝物理學的方向做，便是外圍先作圓形，在外面做一圈圓形，將原本裡面的線條做限制，並且將裡面的圓縮小且帶旋轉。

function draw() {

  /*4. 加上背景 */
  fill(30,30,100,0.85)
  rect(0,0,width,height)

  push()
    /*1. 將球中心置於畫布中心 */
    translate(width/2,height/2)
    /*3. 縮小並旋轉 */
    scale(0.7)
    rotate(frameCount/500)
    stroke(255,150)

    /*2. 外圍加上一圈 */
    noFill()
    strokeWeight(10)
    ellipse(0,0,900)
  
    for(var i=0; i<width; i+=100){
      ...
    }

  pop()
}

6. 加上發光效果跟調整材質

再加上圓形後，就開始覺得這個東西應該是會發光的，所以加上 Screen mode，不過視覺上又會覺得顏色有點太多層，所以加上了 setAlpha ，以降低透明度的方式來去做調整，而且老闆還特別將線條與陰影分開做設定，可以看到陰影與線條的顏色是一樣的 (let cc = color(clr)) ，只是透明度不同，透過這樣將 setAlpha 降低，畫面上就不會過曝，顏色看上去也就會比較明顯一點。

調整完色彩後，覺得可以再多加上一些變化，所以就再加上了 cos(ang*8+o/100)*rr/200 以及 sin(ang*8+o/100)*rr/200 ，前面這串程式看上去很長，加上現在圖形還同時在旋轉，不太容易看出效果，所以這邊可以試著將程式簡化，用一開始所提供的同心圓範例去修改成簡單版本的（如下方示意圖）所呈現的效果是可以看到不只是完整的大波，上面另外也會有一些小的褶皺。

push()
  ...
  /*1. SCREEN mode */
  blendMode(SCREEN)

  for(var i=0; i<width; i+=100){
    beginShape()
    strokeWeight(8)
    let rr = (width-i)*0.5
	
    /*2. 降低透明度，本體與陰影分開 */
    let clr = color(colors[int(i/100)%5])
    clr.setAlpha(150)
    stroke(clr)
	
    let cc = color(clr)
    cc.setAlpha(100)
    drawingContext.shadowColor =cc
	
    /*3. 加上小的波形 */
    for(var o=0;o<150;o+=5){
      let stAng =0 
      let ang = stAng+o/(3+i/5000)+frameCount/(30+o)+mouseY/100
      curveVertex(
        cos(ang)*(rr+i/2)+ cos(ang*8+o/100)*rr/200 ,
        sin(ang)*(rr-i/10) + sin(ang*8+o/100)*rr/200
      )
    }
    endShape()
  }

調到這裡其實這次的主題就明確了，就是物理量子力學的主題。

7. 加上外部裝飾

接下來，在做這種科幻型的主題時，老闆的慣用手法就是加上一些弧形或者是刻度。這裡老闆決定在四周畫上線條，有點像是準心的感覺，並且加上有一個似乎意義不明的數字，這樣一來就產生一種「好似有複雜的機制在後面運作」的感覺，為了避免顯示的數字太長，所以在數字上使用 toFixed(2) 來限制小數點後可顯示的位數為兩位數。另外在此星球旋轉上也加上了 mouseX ，讓滑鼠在移動時，也會進而影響星球旋轉的速度。

function draw() {
  push()
    /*1. 旋轉上加上滑鼠互動 */
    translate(width/2,height/2)
    scale(0.73)
    let totalRotate = frameCount/500+mouseX/100
    rotate(totalRotate)

    /*2. 加上四象的線條，像是準心 */
    stroke(255)
    line(480,0,550,0)
    line(-480,0,-550,0)
    line(0,-480,0,-520)
    line(0,480,0,520)
    noStroke()
    fill(255)
    textSize(20)
    text(totalRotate.toFixed(2),500,30)
  pop()
}

8. 加上游離粒子

這裡老闆想要加上一些游離粒子，而加上游離粒子的方式非常的特別，因為曲線看上去是一條線，但是實際上都是一個點一個點所連接起來的，所以老闆就想說那不如把 X 與 Y 拿來畫。

在將 X 與 Y 拿來使用前，先將畫曲線的點抽出來命名變數 let xx = cos(ang)*(rr+i/2)+ cos(ang*8+o/100)*rr/200 以及 let yy = sin(ang)*(rr-i/10) + sin(ang*8+o/100)*rr/200 ，這樣在畫曲線 curveVertex(xx,yy) 與 ellipse(xx,yy,3) 粒子都會比較方便，程式碼也不會顯得太長。透過直接使用畫曲線的點去畫粒子，可以讓視覺上粒子與線條具有一致性的效果。

這裡有一點要注意，由於在粒子有使用 scale(1.4) 放大，為了不影響到其他物理，所以要用 push 與 pop把它包起來。

for(var o=0;o<150;o+=5){
  let stAng =0 
  let ang = stAng+o/(3+i/5000)+frameCount/(30+o)+mouseY/100
  let xx = cos(ang)*(rr+i/2)+ cos(ang*8+o/100)*rr/200
  let yy = sin(ang)*(rr-i/10) + sin(ang*8+o/100)*rr/200
  curveVertex(
    xx ,yy
  )
  /*1. 加上游離粒子 */
  if (random()<0.1){
    push()
    scale(1.4)
    ellipse(xx,yy,3)
    pop()
  }
}

9. 加上裝飾

再來加一些一些裝飾性的物件，希望可以達到畫龍點睛的效果。

外圈還缺甚麼呢？一開始想要加像是光場或是力場的東西把它包住，但是又覺得似乎有些干擾，而且目前已經有一圈白線，所以改畫個在 HUD 裡面蠻常見的手法 – 虛線，畫弧形虛線的方式就是用小小的 arc 來畫，在畫面的下方。

到這裡差不多要做結尾了，這邊老闆在思考如何讓畫面變得更豐富，不是說硬將東西塞上去，而是能不能透過輔助的小物件，讓整件作品更有故事性。一開始老闆有想說加上像是折線圖或條圖，代表星球當下的狀態或速度，讓人可以知道這個星球當下的狀態。後來決定在整體的旋轉上面加上 noise，製造出就像是一個羅盤旋轉的感覺。

/* 1. rotate 加上 noise */
translate(width/2,height/2)
scale(0.73)
let totalRotate = frameCount/500+mouseX/100 + noise(frameCount/1000)*5
rotate(totalRotate)

stroke(255,150)
noFill()
strokeWeight(4)
ellipse(0,0,900)

stroke(255)
line(480,0,550,0)
line(-480,0,-550,0)
line(0,-480,0,-520)
line(0,480,0,520)
/* 2. 裝飾性橢圓 */
ellipse(0,550,50,20)
ellipse(0,-550,50,20)
ellipse(0,580,30,10)
ellipse(0,-580,30,10)
noStroke()
fill(255)
textSize(20)
text(totalRotate.toFixed(2),500,30)

noFill()
blendMode(SCREEN)

/* 3. 裝飾性線條 */
for(var i=0;i<200;i+=10){
  stroke(255,50)
  arc(0,0,1200,1200,PI/200*i,PI/200*i+0.035)
}

10. 加上原子核

既然作品現在看上去像是一個粒子，所以總該要有個原子核，而這個核心很不穩定，而周圍有個力場包圍住。為了製造出不穩定的感覺，所以在原子的位置以及大小，都加上了 noise 來產生出隨機的效果。

/* 1. 中間不穩定的圓心 */
fill(random()<0.3?colors[2]:255)
ellipse(0 + (noise(frameCount/5,10)-0.5)*50,
	0+ (noise(frameCount/3,1000)-0.5)*50,
	30+ noise(frameCount/10)*40)
noFill()

結語

我們總結一下這次的量子系統，製作過程可以分為三大部分：

1. 中心帶有磁力線量子效果的圓心是此次作品的核心，老闆使用極座標的方式是先去定義每一個點的位置，再使用 curveVertex 以將點連接成一成線條。在極座標的表示上是 (cosθ * 半徑,sinθ * 半徑)，在過程中不斷透過改變半徑比例的調整以及點的位置。 在這邊只要一個小小的變化，像是將半徑數值除以二，就會形成一個被壓縮的球體，建議大家可以一開始所提供畫圓的範例，多去嘗試改變其中不同的參數去觀察所對應會產生什麼效果，也因為是各個點都是相對獨立的，所以在位置的變化上可以有相對多的彈性，像是老闆在過程中就嘗試了加上 stAng 以及 ang 來試試看能不能有些有趣的變化，說不定你在嘗試的過程中就會發展出另一個和老闆完全不一樣的作品出來。
2. 延續前面所說，線條實際上是由每一個點來定義，所以老闆就利用這樣的機會，透過定義好的點，加上一點變化形成四周的游離粒子；增加畫面的豐富度、疊加材質，做出與滑鼠X與Y位置的小互動。
3. 想要製作 HUD 風格的作品可以加上單一顏色外框以及虛線線條，尤其可加上看似神秘的數值會更有效果。

這就是我們用p5.js寫出來的簡單的小作品啦！老闆的成品這邊去，也非常歡迎大家到社團裡跟我們分享你們完成的作品。

相同的繪製原理還能應用在甚麼作品上呢？若對p5.js寫成的互動藝術程式創作有興趣，歡迎加入老闆開的Hahow互動藝術程式創作入門課程，與另外將近兩千位同學一起創作吧！

此篇直播筆記由幫手 阮柏燁 協助整理

這篇文章 【p5.js創作教學】Quantum Unstable 量子不穩定 – 發光糾纏的量子系統 最早出現於 Creative Coding TW - 互動程式創作台灣站。

今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片，在最一開始老闆當然是先嘗試著刻劃龍捲風的外型，接著分階段完成被龍捲風捲起的物體：乳牛以及穀倉，最後進行美術上的修改，包含了背景的顏色、加上材質以及調整龍捲風的線條等，最後加上滑鼠的互動來增加整體作品的豐富度。

透過此次互動藝術創作教學，你會學到

• 以幾何圖形繪製龍捲風，其中涵蓋了線條的調整，使用透明的填色讓龍捲風有雲霧感
• 如何應用極座標的概念，使用三角函數的觀念來繪製不規則飛行的物體的運動軌跡
• 繪製漸層背景的技巧，以及透過旋轉來增加背景的動態感

想要更了解三角函數，歡迎閱讀這兩篇複習：
來用可怕的三角函數做網頁吧! – Part 1 衛星繞月球（直播筆記）
來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記）

在開始製作龍捲風之前，你該知道的p5.js小技巧

• 極座標 來繪製運動軌跡
• 透過 noise() 來產生隨機的，這與 random 的概念不一樣。在範例中會時常使用 noise，所以建議在開始之前點進去先稍微理解 noise 的概念
• drawingContext 繪製陰影
• push() / pop() 保存與還原畫布的狀態（可以參考老闆互動藝術程式創作入門的課程筆記：章節 7 進階繪圖 – 畫布操作與編織複雜圖形 (pop/push 的圖解)）

就讓老闆帶你們一步步完成吧！

1. 畫龍捲風

讓我們一起先來思考龍捲風看上去的樣子，它其實就是一層層圓圈，由下面的一個小圓圈開始慢慢地往上，圓圈變得越來越大。一開始我們先嘗試由上而下劃出一排圈圈，暫時不考慮大小的變化排列。

function setup() {
  createCanvas(800, 800);
  background(100);
}

function draw() {
  translate(width/2, 0)
    for(var i=0; i<height; i+=2){
      let nn = noise(i/10, frameCount/10)
      ellipse(0, i, nn*100)
    }
}

下一步要讓圈圈有大小區分的排列，我們必須由 “nn” 這個變數上來調整，在後面加上 “i” 這個變數，這樣一來，nn 的數字大小也會相對應地跟著從小到大。

function setup() {
  createCanvas(800, 800)
  background(100)
}

function draw() {
  translate(width/2, 0)
  for(var i=0; i<height; i+=2){
    let nn = noise(i/10, frameCount/10) + i/10
    ellipse(0, i, nn*10, nn*3)
  }
}

然而這樣上面小、下面大的樣式並不是我們所要的，所以在 nn 變數中的 i 要改成 “height-i”，這樣才能讓數字由大到小排列，所畫出的樣子才會像是龍捲風的模樣。除了大小排列外，我們也順便將圖形刪除填色，留下僅有線條的樣子。
我們使用 nn 這個變數，可以發現它在一開始的時候有加上 noise 的效果，這是一個可以產生出隨機的變數，有了它，龍捲風看上去更增添動態感。

function setup() {
  createCanvas(800, 800)
  background(100)
}

function draw() {
  fill(0)
  rect(0,0,width,height)
  translate(width/2, 0)
  stroke(255)
  noFill()
  for(var i=0; i<height; i+=3){
    strokeWeight(random(2))
    let nn = noise(i/10, frameCount/100)*20+(height-i)/9
    ellipse(0, i-100, nn*8, nn*3)
  }
}

2. 加上被捲飛的物體

一開始我們必須思考物體被龍捲風捲起時的運動軌跡，先不用繪製乳牛、車子這些我們最後真正所要呈現的物體，先以簡單的方塊完成軌跡之後，最後再替換掉即可。

在物體位置的繪製上，我們要使用極座標的方式表示，極座標需給定半徑r，以及角度 θ，有了這兩個參數，那一個點在平面座標上就可以表示為 [rcosθ,rsinθ]。老闆使用 ang 表示角度， r 來表示半徑。設定好後，就使用 translate 來進行偏移。現在的原點位於整張圖中間最上方的位置，為了讓物體平均分散在整個龍捲風的周圍，所以在 y 座標中，會再加上 o*50，來讓物體是由上而下來進行分布的。

// 龍捲風
for(var i=0; i<height; i+=3){
    strokeWeight(random(2))
    let nn = noise(i/10, frameCount/100)*20+(height-i)/9
    ellipse(0, i-100, nn*8, nn*3)
}

// 飛行物體
for(var o=0;o<10;o++){
    let ang = o+frameCount/10
    let nn = noise(i/10,frameCount/100)*20+(height-i)/9
    let r = nn*10
    fill('blue')
    push()
        translate(cos(ang)*r,sin(ang)*r+o*50)
        rect(0,0,50,50)
    pop()
}

現在看上去，物體仍旋轉得很制式，這是因為每一個物體的角度是直接根據它是第幾個來去設定它的角度的。為了增加隨機性，我們增加一個 rot 變數，並且透過 noise 增加隨機性，設定好再使用rotate做旋轉。

// 飛行物體
for(var o=0;o<10;o++){
    let ang = o*5+frameCount/50
    let nn = noise(i/10,frameCount/100)*20+(height-i)/9
    let r = nn*(30+noise(o,frameCount/50)*5)
    let rot = noise(o,frameCount/100)*10
    fill('blue')
    push()
        translate(cos(ang)*r,sin(ang)*r+o*50)
        rotate(rot)
        fill('white')
        rect(0,0,50,50)
    pop()
}

3. 畫牛

設定好物體的旋轉方式後，我們來將方塊換成牛隻。在牛的繪製上可大致分成頭部、身體以及腳。為了使牛看起來精緻可愛，所以這裡大多都是由基本形狀如圓形、方形等等所構成，在這裡就是要考驗大家一筆一筆繪製、調整的耐心了。 這裡比較要注意的是，為了讓牛看起來比較生動些，我們將腳加上一些動畫，不管是前腳還是後腳，老闆都讓它左右邊的腳相差大約一個 PI 的角度左右，腳擺動起來才不會那麼地生硬。

另外，由於現在物體都是被龍捲風吹起來亂亂飛的，有點看不清楚到底有沒有把牛畫正，所以這裡會在 draw() 加入 drawCow(50, height-50)，讓下方有一個固定的牛隻方便參考。

function drawCow(x,y){
  push()
    //身體
    translate(x,y)
    fill(255)
    noStroke()
    rect(0,0,50,25,5)
    fill(0)
    rect(5,0,12,15,5)
    rect(25,10,10,10,5)
    rect(45,5,5,10,5)

    // 後腳
    fill(255)
    push()
      translate(3,20)
      push()
        rotate(sin(frameCount/35))
        rect(0,0,5,20,5)
      pop()
      push()
        translate(5,0)
        rotate(sin(frameCount/20+PI))
        rect(0,0,5,20,5)
      pop()
    pop()

    // 前腳
    push()
      translate(40,20)
      push()
        rotate(sin(frameCount/35))
        rect(0,0,5,20,5)
      pop()
      push()
        translate(5,0)
        rotate(sin(frameCount/20+PI))
        rect(0,0,5,20,5)
      pop()
    pop()

    //頭部
    translate(-22,-5)
    rect(0,0,20,25,5)
    fill(255, 179, 160)
    rect(0,15,20,10,5)
    fill(0,60)

    ellipse(6,20,6)
    ellipse(14,20,6)
    fill(0)
    ellipse(5,8,3)
    ellipse(15,8,3)
    fill(247, 216, 150)
    rect(0,-8,3,10,10)
    rect(16,-8,3,10,10)

  pop()
}

// 飛行物體
for(var o=0;o<10;o++){
    let ang = o*5+frameCount/50
    let nn = noise(i/10,frameCount/100)*20+(height-i)/9
    let r = nn*(30+noise(o,frameCount/50)*5)
    let rot = noise(o,frameCount/100)*10
    fill('blue')
    push()
        translate(cos(ang)*r,sin(ang)*r+o*50)
        rotate(rot)
        drawCow(0,0)
        // fill('white')
        // rect(0,0,50,50)
    pop()
}
drawCow(50, height-50)

4. 調整龍捲風視覺 ＋ 天空上色

第四部分一開始先將天空調整成偏向綠色外，其餘都是調整龍捲風的視覺，調整內容有以下幾點：

• 加上陰影
  不管是龍捲風或是飛行的牛隻，都在繪製之前加上陰影，先是指定顏色，接著再去設定其偏移的量

drawingContext.shadowColor = color(0,30);
drawingContext.shadowOffsetY = 0
drawingContext.shadowOffsetX = 0

• 以 arc 繪製龍捲風線條
  原本繪製的方式是使用 ellipse 形成一個完整的圓，我們改以 arc 角度來繪製，使用 sin 來設定龍捲風的起始位置後，再放入 arc 中，這樣子這樣子看起來更像是旋風。

• 左右移動
  身為一個龍捲風，左右搖擺起來是一定要的，所以在 translate 的 x 位置再加上 cos(frameCount/10)*10，讓整個龍捲風搖擺起來。

• 線條與填色
  將構成龍捲風線條註解起來，並且新增填色 fill，讓龍捲風以一個雲霧的感覺呈現

上述幾點調整的位置都是 draw() 中，修改後程式碼如下

function draw() {
  fill("#9BC1BC")
  noStroke()
  rect(0,0,width,height)
  translate(width/2 + cos(frameCount/10)*10,0)

  // stroke(255,100) // 拿掉 stroke
  noFill()

  // 龍捲風
  drawingContext.shadowColor = color(0,30);
  drawingContext.shadowOffsetY = 0
  drawingContext.shadowOffsetX = 0
  for(var i=0; i<height; i+=4){
    strokeWeight(random(1)+2)
    fill(255,30) // 加上填色
    let nn = noise(i/10, frameCount/100)*20+(height-i)/9
    let stAng = sin(i+frameCount/2)
    arc(0,i-100,nn*8,nn*3,stAng,stAng+PI*1.5)
  }


  // 飛行物體
  noStroke()
  drawingContext.shadowColor = color(0,30);
  drawingContext.shadowOffsetY = 2
  drawingContext.shadowOffsetX = 2
  for(var o=0;o<10;o++){
    let ang = o*5+frameCount/50
    let nn = noise(i/10,frameCount/100)*20+(height-i)/9
    let r = nn*(30+noise(o,frameCount/50)*5)
    let rot = noise(o,frameCount/100)*10
    fill('blue')
    push()
      translate(cos(ang)*r,sin(ang)*r+o*50)
      rotate(rot)
      drawCow(0,0)
    pop()
  }
  drawCow(50, height-50)
}

5. 漸層天空

我們要把原本單色系背景改為漸層天空，先將原本的背景註解起來。在繪製漸層背景上，首先先指定一個稍微偏綠色的藍，接著每隔一層線條就加上數值五的藍色，使其越來越偏向藍色，但是單純只有漸層似乎還是有點單調，畢竟此次的主題是龍捲風，所以老闆同時也加上不規則的旋轉，使整體更加有一種不受控制的感覺。

// 漸層背景
let cc = color("#6AD5CB")

push()
  rectMode(CENTER)
  for(var i=0;i<height;i+=100){
    push()
      cc.setBlue(cc._getBlue()+5)
      fill(cc)
      rotate(random(-1,1)/10)
      rect(width/2,i,width*1.2,100)
    pop()
  }
pop()


// 原本的背景
// fill("#9BC1BC")
// noStroke()
// rect(0,0,width,height)

6. 加上材質

為了增加一點繪畫感，我們可以為整個畫面新增材質疊加。共有三大步驟，分別是命名材質、設定材質、疊加材質。

• 命名材質
  在全域的區域命名材質變數 let overAllTexture
  
• 設定材質
  在 setup() 中設定材質的樣式

overAllTexture.loadPixels()
// noStroke()
for(var i=0;i<width+50;i++){
  for(var o=0;o<height+50;o++){
    overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,30,50])))
  }
}
overAllTexture.updatePixels()

• 疊加材質

在 setup() 中改變與色塊的混合模式

push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
pop()

加上材質後，畫面上黑色一條一條的痕跡更明顯了，我們稍微將它修正成沒有線條，並且改變透明度。

push()
let cc = color("#6AD5CB")
cc.setAlpha(100) // 設定透明度
noStroke() // 設定沒有線條
  push()
    rectMode(CENTER)
    for(var i=0;i<height;i+=100){
      push()
        cc.setBlue(cc._getBlue()+5)
        fill(cc)
        rotate(random(-1,1)/10)
        rect(width/2,i,width*1.2,100)
      pop()
  　}
  pop()

// fill("#9BC1BC")
// noStroke()
// rect(0,0,width,height)

7. 加入穀倉

在畫穀倉上也沒有太高深的技巧，與繪製牛一樣，像個手工業一樣慢慢一筆一畫描繪出來。不過有一個比較少看到的用法是 shearX ，它可以將物體沿著X軸歪斜指定角度，用來協助繪製梯形的屋頂。 另外老闆在生成這些穀倉時，並沒有再多寫一個迴圈，而是直接用餘數的方式去決定要生成牛還是穀倉。原先放在左下角當成繪製參考的穀倉也沒有拿掉，因為老闆後來覺得將單一穀倉就這樣固定在那裏也不錯。

function drawHouse(x,y){
  push()
    translate(x,y)
    // rect(0,0,100,50)
    fill(199, 77, 93)
    rect(20,0,80,40)
    fill(219, 77, 93)
    rect(0,0,80,40)
    fill(255,50)
    rect(0,0,80,6)

    stroke(255,100)
    strokeWeight(2)
    noFill()
    rect(40,10,20,10)
    rect(40,20,20,10)
    rect(40,10,10,20)
    noStroke()

    //屋頂
    shearX(PI/12)
    fill(68, 61, 63)
    rect(20,0,80,-20)
    shearX(-PI/6)
    fill(58, 51, 53)
    rect(0,0,80,-20)
  pop()
}

// drawCow(0,0)
if (o%6!=0){
  drawCow(0,0)
}else{
  drawHouse(0,0)
}

8. 修飾細節跟最後收尾

translate 加上與滑鼠 mouseX 做互動

// translate(width/2 + cos(frameCount/10)*10,0)
translate(width/2 + cos(frameCount/20 + mouseX/50)*50,0) // 加上 mouse

龍捲風的細線條隨機出現

for(var i=0; i<height; i+=4){
  strokeWeight(random(1)+2)
  fill(255,10) // 加上填色

  // 隨機出現線條
  if (random()<0.1){
    stroke(255)
  }else{
    noStroke()
  }

  let nn = noise(i/10, frameCount/100)*20+(height-i)/9
  let stAng = sin(i+frameCount/2)
  arc(0,i-100,nn*8,nn*3,stAng,stAng+PI*1.5)
}

結語

我們總結一下這次的龍捲風小品，製作過程可以分為三大部分：

1. 龍捲風的繪製，思考龍捲風的模樣以及它具有什麼特性，我們可以用什麼圖形以及線條去模擬，從最一開始使用圓形來構成龍捲風的架構，慢慢地調整細節，讓它更加接近真實的模樣。
2. 被捲起的物體 – 乳牛與穀倉兩者所使用技巧都是用基本的圖形建構而成。另外使用極座標表示被捲起的軌跡也是相當值得學習的技巧。
3. 視覺上的調整，加入材質以及漸層背景等應用，以及滑鼠的簡單互動讓作品更加完整。

這就是我們用p5.js寫出來的簡單的小作品啦！相同的繪製原理還能應用在甚麼作品上呢？你們也可以參考老闆這件作品的OpenProcessing頁面，一起來切磋吧！

若對互動藝術程式創作有興趣，歡迎加入老闆開的Hahow課程互動藝術程式創作入門，與其他兩千位同學一起創作吧！

這篇文章 【p5.js創作教學】來畫一個瘋狂的龍捲風吧！（直播筆記） 最早出現於 Creative Coding TW - 互動程式創作台灣站。

這次的直播內容主要有四個部分：

• 透過繪製扭動的線條來呈現海葵觸鬚的樣子 (步驟一~步驟四)
• 加上滑鼠的互動以及視覺上的裝飾，包含了顏色以及材質，還有在外層加框框，形成了類似畫框的效果 (步驟五~步驟七)
• 加上細的觸鬚增加細節(步驟八)
• 海葵底部做收斂，形成一叢海葵，以及最後的修飾(步驟九~步驟十)

主要會用到的 API ：

• push() / pop() 保存與還原畫布的狀態
  • 章節 7 進階繪圖 – 畫布操作與編織複雜圖形 (pop/push 的圖解)
• 透過 noise() 來產生隨機的，這與 random 的概念不一樣。在範例中會時常使用 noise，所以建議先稍微理解 noise 的概念
  • 2D Noise – Perlin Noise and p5.js Tutorial
• 用 loadPixels() 來製作材質
• map() 轉換數值
  • The map() Function – p5.js Tutorial

還是新手？想要快速上手p5.js請來看p5.js 快速上手：互動網頁教學

Part 1 海葵

透過四個步驟，藉由 curveVertex 來畫線條，並藉由隨機移動線條來形成多條海葵觸鬚

單一條線

首先以畫面的中心為基準點，由下而上畫出一點一點所連成的線條。這邊因為我們將基準的位子轉換了translate(0,height)，因此在畫線的的時候，注意是由下往上畫，vertex(xx,-i) 中的 i 要加上負號

function setup() {
	createCanvas(800, 800);
	background(0);
	
	xx = width/2
}
var xx 
function draw() {
	translate(0,height)
	stroke(255)
	
	beginShape()
	strokeWeight(50)
	for(var i=0; i<500; i++){
		vertex(xx,-i)
	}
	endShape()
}

左右搖擺

畫好線後，我們為了讓整條線的每一個點隨機分布在不同位子上，同時整條線左右搖擺，所以在 noise 中放入了每個一個點(i)及時間(frameCount)的因子，並存在 deltaX 變數中。 這麼要注意一下，我們為了讓畫出來的圖形不要重疊在一起，所以這裡要在加上 background(0)，讓每一次的背景都重新刷新

function draw() {
	translate(0,height)
	stroke(255)
	
	background(0) // 更新 background
	
	beginShape()
	strokeWeight(50)
	for(var i=0; i<500; i++){
		let deltaX = noise(i/400, frameCount/100) * 200 // 加上 noise
		vertex(xx + deltaX,-i)
	}
	endShape()
}

固定底部

現在看上去的狀態是整條線都要搖擺，但是我們希望它的底部是相對固定的，所以加上 let deltaFactor = map(i, 0, 50, 0, 1 , true)，因為只要限制底部，所以這邊只將 0~50 的點進行轉換，並將 deltaFactor 與 noise 相乘。在 noise 部分，由於它所產生出的數值是 0~1，為了讓它是左右搖擺的，所以在減去 0.5，讓產生出來的值範圍在 -0.5 ~ 0.5 之間。這時候看上去還有些怪怪的，原因是因為系統預設填了白色的顏色，這邊要加上 noFill() 來取消系統的預設填色

function draw() {
	translate(0,height)
	stroke(255)
	
	background(0)
	noFill()  //取消系統填色
	beginShape()
	strokeWeight(50)
	for(var i=0; i<500; i++){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		let deltaX = deltaFactor * (noise(i/400, frameCount/100)-0.5) * 200
		vertex(xx + deltaX,-i)
	}
	endShape()
}

多個線條

這時候我們可以將剛剛的程式碼包成 anemone() 函式。接著就可以使用 for 迴圈來讓它一次產生多條擺動的線條，為了使每一條線條扭動的方式不一樣，因此加入一個變數 rid 至 function 中，並且放到 noise 位子。 另外為了將擺動變得更加平滑一些，這邊將 vertex(xx + deltaX,-i) 更改為 curveVertex(xx + deltaX,-i*2)。

function setup() {
	createCanvas(800, 800);
	background(0);
}

function anemone(xx,rid){
	beginShape()
	strokeWeight(80)
	for(var i=0; i<300; i++){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		let deltaX = deltaFactor * (noise(i/400, frameCount/100,rid)-0.5) * 300
		curveVertex(xx + deltaX,-i*2)
	}
	endShape()
}

function draw() {
	translate(0,height)
	stroke(255)
	
	background(0)
	noFill()
	for(var i =0;i<20;i++){
		anemone(i*200, i)
	}
}

Part 2 互動與裝飾

現在畫好的基本的圖形後，接著就來上顏色、材質以及外框

加上顏色

首先，先建立顏色的清單，使用 forEach 去跑每一個顏色，並在 anemone() 中加入 clr 這個參數，讓用 stroke(clr) 來指定顏色，這時候就有一叢叢具有三種顏色的的海葵了，接著就要使用混和模式來控制顏色的疊加。這裡使用 blendMode(SCREEN) 來控制混和的效果，不過這邊有個問題是，這會讓原本 background 的失效，而解決的辦法就是在畫 backgound 前加上原本預計的顏色疊加模式 blendMode(BLEND)。 這邊除了設定顏色外，也讓線條的粗度(strokeWeight)以及高度(hh)都加上 noise，讓整體更加有變化。

function anemone(xx,rid,clr){
	beginShape()
	strokeWeight(noise(rid,5000)*180) // 使用 noise 加入 rid，加入變化性
	let hh = noise(xx,rid,1000)*500 + random(2) // 高度也使用 noise 加入 rid，加入變化性
	stroke(clr)
	for(var i=0; i<hh; i++){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		let deltaX = deltaFactor * (noise(i/400, frameCount/100,rid)-0.5) * 300
		curveVertex(xx + deltaX,-i*2)
	}
	endShape()
}

function draw() {
	translate(0,height)
	stroke(255)
	
	blendMode(BLEND) // 設定回系統預設的疊加模式
	background(0)
	noFill()
	
	let clrs = ['red', 'green', 'blue']  //建立顏色清單
	blendMode(SCREEN) //設定疊加模式
	for(var i =0;i<10;i++){
		clrs.forEach((clr,clrId)=>{
			anemone(i*100, i+clrId/2, clr)
		})		
	}
}

• 變化多端的顏色 (Option，想讓海葵顏色更豐富可以參考)

滑鼠控制

設定會根據高度影響的 mouseFactor 以及滑鼠左右移動變化量的 mouseDelta。設定好後再加到 curveVertex() 中 x 的位置上，這樣的效果可能讓左右的搖擺是根據滑鼠的移動方向。而這裡還另外加上 mouseDirectionFactor，讓滑鼠的左右移動與海葵搖擺的關係上更加自然。

function anemone(xx,rid,clr){
	beginShape()
	strokeWeight(noise(rid,5000)*200)
	let hh = noise(xx,rid,1000)*500
	stroke(clr)
	for(var i=0; i<hh; i++){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		

		let mouseFactor = map(i,0,500,0,1)*log(hh)/10 
        let mouseDirectFactor = noise(frameCount/50)-0.5
		let mouseDelta = map(mouseX,0, width, -500, 500)*mouseDirectFactor
		let deltaX = deltaFactor * (noise(i/400, frameCount/100,rid)-0.5) * 300 
		curveVertex(xx + deltaX +mouseDelta*mouseFactor,-i*2) 
	}
	endShape()
}

加上材質

先在全域的地方定義材質的變數 overAllTexture，並在 setup() 定義材質的樣式。定義好材質後，就可以使用混和模式將材質疊到畫面上。不過由於一開始有移動畫面的中心點translate(0,height)，為了讓材質上到正確的位子上，不受這裡的位移影響，所以必須把上材質前畫海葵的部分也用push() 和 pop() 包起來

let overAllTexture   //定義材質

function setup() {
	createCanvas(800, 800);
	background(0);
	
	//設定材質
	overAllTexture=createGraphics(width,height)

	overAllTexture.loadPixels()
	for(var i=0;i<width;i++){
			for(var o=0;o<height;o++){
					overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,50,100])))
			}
	}
	overAllTexture.updatePixels()
}

function anemone(xx,rid,clr){...}

function draw() {
	push()
		translate(0,height)
		stroke(255)

		blendMode(BLEND)
		background(0)
		noFill()

		let clrs = ['red', 'green', 'blue']
		blendMode(SCREEN)
		for(var i =0;i<10;i++){
			clrs.forEach((clr,clrId)=>{
				anemone(i*100, i+clrId/2, clr)
			})		
		}
	pop()
	
	// 使用混和模式疊上材質
	push()
		blendMode(MULTIPLY)
		image(overAllTexture,0 ,0)
	pop()
}

加框

設定混和的模式 blendMode(BLEND)，將矩形疊加在上形成外框。這裡要注意記得將原本生成海葵的地方所設定的 background(0) 取消，不然顏色會被蓋過去，這樣框的效果就出不來了。

function draw() {
    //加上外框
	push()
		fill(0)
		noStroke()
	    blendMode(BLEND)
		rect(0,0,width, height)
	pop()
    //
	
	push()
		translate(0,height)
		stroke(255)
		blendMode(BLEND)
		// background(0) 取消這裡的 background，不然會把顏色蓋過去
		noFill()

		let clrs = colors
		blendMode(SCREEN)
		for(var i =0;i<10;i++){
			clrs.forEach((clr,clrId)=>{
				anemone(i*100, i+clrId/2, clr)
			})		
		}
	pop()
	
	
	push()
		blendMode(MULTIPLY)
		image(overAllTexture,0 ,0)
	pop()
}

Part 3 細海葵

接下來要來加上相對比較細小的海葵，這裡可以直接複製我們前面已經利用 for 迴圈所產生出的海葵。在這裡因為我們想要海葵能夠相對長的比較細而且也比較長，所以這邊再多增加兩個參數在後面。接著再 anemone() 中新增變數名稱，分別為控制寬度的 thinkness 長度的 length，並帶到 function 中去做使用

//粗線條
for(var i =0;i<10;i++){
    clrs.forEach((clr,clrId)=>{
        anemone(i*100, i+clrId/2, clr)
    })		
}

//細線條
for(var i =0;i<5;i++){
    clrs.forEach((clr,clrId)=>{
        anemone(i*100, i+clrId/2 + 50, clr, 0.05, 1.2)
    })		
}

function anemone(xx,rid,clr, thinkness=1, length=1){ //新增參數 thinkness=1, length=1
	beginShape()
	strokeWeight(noise(rid,5000)*150*thinkness) // 乘上 thinkness
	let hh = noise(xx,rid,1000)*height/2 + random(2)
	stroke(clr)
	for(var i=0; i<hh; i++){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		let mouseFactor = map(i,0,400,0,1)*log(hh)/10
		let mouseDirectFactor = noise(frameCount/50)-0.5
		let mouseDelta = map(mouseX,0, width, -500, 500) * mouseDirectFactor

		let deltaX = deltaFactor * (noise(i/400, frameCount/100,rid)-0.5) * 300
		curveVertex(xx + deltaX +mouseDelta*mouseFactor,-i*2* length) // 乘上 length
	}
	endShape()
}

細線上加入球球

畫好了細的線條後，我們想要在細的線條的上的最後一個點上加上一個小球，所以這裡必須新增的兩個變數(lastX, lastY)去紀錄每一個點，接著由 curveVertex(lastX,lastY) 畫出來線條來。當離開 for 迴圈時，代表已經畫完整條線了，並且此時變數lastX, lastY所存的是最後的一個點的位子，這時在 for 迴圈外面在根據剛才紀錄去畫上圓形。而在小圈圈的繪製上，在這裡加上 nosie，讓小圈圈可以隨機的出現在細線尾端。

function anemone(xx,rid,clr, thinkness=1, length=1){
	beginShape()
	strokeWeight(noise(rid,5000, frameCount/1000)*150*thinkness)
	let hh = noise(xx,rid,1000+frameCount/100)*height*0.6 + random(2)
	stroke(clr)
	
	let lastX, lastY
	for(var i=0; i<hh; i+=2){
		let deltaFactor = map(i, 0, 50, 0, 1 , true)
		let mouseFactor = map(i,0,400,0,1)*log(hh)/10
		let mouseDirectFactor = noise(frameCount/50)-0.5
		let mouseDelta = map(mouseX,0, width, -500, 500) * mouseDirectFactor
		let deltaX = deltaFactor * (noise(i/400, frameCount/100 + mouseY/100,rid)-0.5)*300
		
		lastX = xx + deltaX +mouseDelta*mouseFactor
		lastY = -i*2* length
		curveVertex(lastX,lastY)
	}
	endShape()
	
    if(thinkness!=1 && noise(frameCount/1000,rid)<0.8){ //新增 noise
        ellipse(lastX,lastY-10,6,6)
    }
}

Part 4 一叢海葵

目前海揆線條是由下而上往上生長，現在我們希望它是由中間往外擴散，變成一叢的感覺。所以為了 改變 X 的位子，使用 log 去取值，產生 ratio，再由中心點 width/2 向外向上去畫出一個指數型弧線的線條。這邊直接看 ratio 這個變數一眼看上去有些複雜，不過一開始也是由簡單直覺的方向去嘗試的，像是先試試 let ratio = map(i,0,500,0,1,true)，這會讓圖形直接變成一個倒三角形，形成一個線性的變化，接著才嘗試 log，使圖形呈現指數的圖形。實際 log 所對應數值所畫出來的圖形可以參考這裡。可以看的出來在一開始 y 軸的數值上升的很快，接著快速的趨近於緩和，這所對應的ratio 數值也會是如此

let ratio = map(log(i),0,noise(frameCount/100, mouseX/100)*3+5,0,1,true)
curveVertex(lerp(width/2,lastX,ratio),lastY)

最後的微調

最後，在一些小地方進行調整。

• 將粗度與高度都加入時間上(frameCount)上的變因

strokeWeight(noise(rid,5000, frameCount/1000)*150*thinkness)
let hh = noise(xx,rid,1000+frameCount/100)*height/2 + random(2)

• 滑鼠上下移動會影響左右的搖擺，所以把 deltaX 這個變數上新增 mouseY 在 noise 之中

let deltaX = deltaFactor * (noise(i/400, frameCount/100 + mouseY/100,rid)-0.5) * 300

• 由於在顏色上有點過曝，所以加上透明度的效果，並且加上 noise，試試看讓他有忽暗忽亮的效果

for(var i =0;i<10;i++){
    clrs.forEach((clr,clrId)=>{
        let useColor = color(clr)
        useColor.setAlpha(150 + noise(frameCount/100,i)*10)
        anemone(i*100, i+clrId/2, useColor)
    })		
}

結語

回顧整個範例，可以發現我們在不少的地方都使用了 noise 來產生隨機，進而產生了一些動態感。常常與 noise 搭配的有隨時間變化的 frameCount 以及滑鼠移動的變化量 mouseY。在 noise 的使用上有時也並非就直接就使用它，而是當我們覺得某個屬性，像是海葵都高度，向外擴張的程度想要更有隨機動態感的時候再加上去的

在每一個點的繪製上為了製造的左右晃動以及跟滑鼠互動，所以定義了不少的變數，其中還常常用到了 map 以及 noise，這裡面的數字沒有一定的絕對數值，這都是在創作過程中慢慢地去嘗試出來的。若是覺得有些程式碼看起來太過複雜，建議可以先將 noise 改回一般的常數，這樣閱讀起來比較簡單也容易思考。

還意猶未盡？看看這一篇【p5.js創作教學】電波電路Wave Circuit – 來做個逼哩逼哩送訊號的電路吧！的教學讓你功力再進階。

如果你因此對互動藝術程式創作產生興趣，歡迎加入老闆開的 Hahow 課程互動藝術程式創作入門，讓老闆跟你分享不同的創作！

互動藝術程式創作入門是為了不會程式的人設計的課程，課程中會帶你看看不一樣的作品，並從基礎引導大家一步步完成作品，透過每次的賞析、實作到修正作品，讓大家覺得寫 code 不是這麼難的事情，將這個過程想像成，拿一隻比較難的畫筆在進行創作，如果有機會使用它，便能夠做出和與眾不同的創作。

這篇文章 【p5.js 創作教學】 色散海葵（直播筆記） 最早出現於 Creative Coding TW - 互動程式創作台灣站。