Processing數位互動創作

Processing 互動小程式 – 聲音驅動小風車，還可以切換日夜！

Posted on by CAVEDU 阿吉 - 雜工
22
4 月

前言

Processing 一直是我 (阿吉) 的心頭好，只要少量又簡易的程式碼就能產生各式各樣的花式介面，極簡風或是華麗風都能輕鬆掌握，還能結合 Arduino 做到軟硬整合。對於初學者還有非常多的小範例，幾乎都能直接執行看到效果，是非常方便好用的教學工具。

除了 Processing 之外，還有 p5.js、Processing Android 與 Processing Python 等，但後兩者看起來已較少維護。

作業系統方面，Windows, MAC 與 Linux 甚至 Raspberry Pi 都能免安裝直接執行。

當然啦，透過 chatGPT 這類工具去發想新點子或修改舊的程式碼都非常方便，多多嘗試就能迸發更多有趣的點子，非常有趣喔！有興趣的讀者們請看看我錄製的 Processing 結合 Arduino 的系列教學。

程式重點說明

以下說明重點程式碼，完整程式碼請參考本文末。

1. 聲音輸入與分析

[pastacode lang=”java” manual=”import%20processing.sound.*%3B%0AAmplitude%20amp%3B%0AAudioIn%20mic%3B” message=”” highlight=”” provider=”manual”/]

  • 使用 Processing 的 sound 函式庫來取得麥克風聲音輸入，用於分析音量變化，並以此作為互動依據。

  • 如果尚未安裝請由 Processing 介面中選擇 Sketch >  Import Library > Manage Libraries… ，就會出現 Contribution Manager 視窗。在這個視窗中輸入 sound，找到 Sound 函式庫，按下 Install 安裝即可，如下圖：

2. 風車動畫變數

[pastacode lang=”java” manual=”float%20windmillAngle%2C%20windmillSpeed%3B%0Aint%20bladeCount%20%3D%204%3B%0Acolor%5B%5D%20bladeColors%3B” message=”” highlight=”” provider=”manual”/]

  • 這些變數用於控制風車的轉速與角度。

  • 每片扇葉有不同顏色，呈現動態色彩變化。

3. 環境設定、背景與太陽

[pastacode lang=”java” manual=”float%20grassHeight%3B%0AArrayList%3CCloud%3E%20clouds%3B%0AArrayList%3CParticle%3E%20particles%3B%0Afloat%20sunSize%2C%20sunGlow%2C%20skyHue%3B” message=”” highlight=”” provider=”manual”/]

  • 模擬草地、雲朵、粒子（如蒲公英、灰塵等），營造動態自然環境。Processing 針對粒子的運動效果有很好的函式庫與範例。

  • 根據聲音大小，改變太陽大小、光暈與天空顏色 (sunSize, sunGlow, skyHue)，呈現各種氣氛。

4. 夜間模式與星星

[pastacode lang=”java” manual=”boolean%20nightMode%3B%0APVector%5B%5D%20stars%3B%0Afloat%5B%5D%20starBrightness%3B” message=”” highlight=”” provider=”manual”/]

  • 根據音量或特定互動觸發「夜晚場景」，顯示星星與暗色背景。

5. setup() 初始設定

[pastacode lang=”java” manual=”size(800%2C%20600)%3B%0AcolorMode(HSB)%3B%0Amic%20%3D%20new%20AudioIn(this%2C%200)%3B%0Amic.start()%3B” message=”” highlight=”” provider=”manual”/]

  • 設定畫布尺寸與色彩模式。

  • 啟動音訊輸入，執行程式後會在 console 看到所執行機器上可用的音訊裝置，如下圖

6. draw() 主迴圈

[pastacode lang=”java” manual=”void%20draw()%20%7B%0A%20%20volume%20%3D%20amp.analyze()%20*%205%3B%0A%20%20smoothedVolume%20%3D%20lerp(smoothedVolume%2C%20volume%2C%200.1)%3B%0A%20%20windmillSpeed%20%3D%20smoothedVolume%20*%2010%3B%0A%20%20windmillAngle%20%2B%3D%20windmillSpeed%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

核心功能說明：

  • 音量控制風車轉速：聲音越大，風車轉越快。

  • 偵測「拍點」：若音量突升（如掌聲、拍手），觸發粒子特效與太陽光暈增強。

  • 夜間模式切換：按下 'n' 鍵切換日夜背景。

  • 畫面組成 (細節程式碼請自行參考以下程式碼)：

    • drawBackground()：天空與太陽（根據音量變色）。

    • updateAndDrawClouds()：雲朵移動。

    • drawGrass()：前景草地。

    • drawWindmill()：風車旋轉。

    • updateAndDrawParticles()：粒子隨聲音爆發。

    • drawWaveform()：底部音量視覺化。

    • displayVolumeInfo()：顯示目前音量與風車轉速，位於畫面左下角。

    • displayInstructions()：顯示目前音量數值，位於畫面右下角。

7. 自定義類別（共 2 個）

為了更有效呈現雲、粒子等不規則的物體動態，定義了兩個自訂物件類別來管理：

class Cloud

  • 雲朵的 位置、速度、大小 設定。

  • 持續向右飄動，出畫面後重生。

class Particle

  • 用於表現「音量爆發」的粒子煙火效果。

  • 每個粒子有位置、速度、透明度，並會隨時間淡出。

完整程式碼如下

[pastacode lang=”java” manual=”%2F%2F%20%E8%81%B2%E6%8E%A7%E9%A2%A8%E8%BB%8A%E4%BA%92%E5%8B%95%E8%A6%96%E8%A6%BA%E7%B3%BB%E7%B5%B1%0A%2F%2F%20%E4%BD%BF%E7%94%A8%E9%BA%A5%E5%85%8B%E9%A2%A8%E9%9F%B3%E9%87%8F%E6%8E%A7%E5%88%B6%E9%A2%A8%E8%BB%8A%E6%97%8B%E8%BD%89%E9%80%9F%E5%BA%A6%E5%92%8C%E8%A6%96%E8%A6%BA%E6%95%88%E6%9E%9C%0A%0Aimport%20processing.sound.*%3B%0A%0A%2F%2F%20%E8%81%B2%E9%9F%B3%E5%88%86%E6%9E%90%E8%AE%8A%E6%95%B8%0AAmplitude%20amp%3B%0AAudioIn%20mic%3B%0Afloat%20volume%20%3D%200%3B%0Afloat%20smoothedVolume%20%3D%200%3B%0Afloat%5B%5D%20volumeHistory%20%3D%20new%20float%5B100%5D%3B%0A%0A%2F%2F%20%E9%A2%A8%E8%BB%8A%E8%AE%8A%E6%95%B8%0Afloat%20windmillAngle%20%3D%200%3B%0Afloat%20windmillSpeed%20%3D%200%3B%0Afloat%20bladeLength%20%3D%20120%3B%0Aint%20bladeCount%20%3D%204%3B%0Acolor%5B%5D%20bladeColors%20%3D%20%7B%0A%20%20color(255%2C%20100%2C%20100)%2C%20%20%20%2F%2F%20%E7%B4%85%E8%89%B2%0A%20%20color(255%2C%20200%2C%20100)%2C%20%20%20%2F%2F%20%E6%A9%99%E8%89%B2%0A%20%20color(100%2C%20255%2C%20100)%2C%20%20%20%2F%2F%20%E7%B6%A0%E8%89%B2%0A%20%20color(100%2C%20200%2C%20255)%2C%20%20%20%2F%2F%20%E8%97%8D%E8%89%B2%0A%7D%3B%0A%0A%2F%2F%20%E7%92%B0%E5%A2%83%E8%AE%8A%E6%95%B8%0Afloat%20grassHeight%20%3D%20100%3B%0AArrayList%3CCloud%3E%20clouds%20%3D%20new%20ArrayList%3CCloud%3E()%3B%0AArrayList%3CParticle%3E%20particles%20%3D%20new%20ArrayList%3CParticle%3E()%3B%0Afloat%20windStrength%20%3D%200%3B%0Afloat%20sunSize%20%3D%2080%3B%0Afloat%20sunGlow%20%3D%200%3B%0Afloat%20skyHue%20%3D%20210%3B%0Aint%20lastBeat%20%3D%200%3B%0Aboolean%20nightMode%20%3D%20false%3B%0Aint%20starCount%20%3D%20100%3B%0APVector%5B%5D%20stars%3B%0Afloat%5B%5D%20starBrightness%3B%0A%0A%2F%2F%20%E8%A8%AD%E5%AE%9A%E5%88%9D%E5%A7%8B%E5%8F%83%E6%95%B8%0Avoid%20setup()%20%7B%0A%20%20size(800%2C%20600)%3B%0A%20%20colorMode(HSB%2C%20360%2C%20100%2C%20100%2C%20100)%3B%0A%20%20%0A%20%20%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%BA%A5%E5%85%8B%E9%A2%A8%E8%BC%B8%E5%85%A5%E5%92%8C%E9%9F%B3%E9%87%8F%E6%AA%A2%E6%B8%AC%0A%20%20Sound.list()%3B%0A%20%20Sound%20s%20%3D%20new%20Sound(this)%3B%0A%20%20amp%20%3D%20new%20Amplitude(this)%3B%0A%20%20mic%20%3D%20new%20AudioIn(this%2C%200)%3B%0A%20%20mic.start()%3B%0A%20%20amp.input(mic)%3B%0A%20%20%0A%20%20%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%9F%B3%E9%87%8F%E6%AD%B7%E5%8F%B2%E7%B4%80%E9%8C%84%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20volumeHistory.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20volumeHistory%5Bi%5D%20%3D%200%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%9B%B2%E6%9C%B5%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%205%3B%20i%2B%2B)%20%7B%0A%20%20%20%20clouds.add(new%20Cloud(random(width)%2C%20random(height%2F3)))%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E6%98%9F%E6%98%9F%0A%20%20stars%20%3D%20new%20PVector%5BstarCount%5D%3B%0A%20%20starBrightness%20%3D%20new%20float%5BstarCount%5D%3B%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20starCount%3B%20i%2B%2B)%20%7B%0A%20%20%20%20stars%5Bi%5D%20%3D%20new%20PVector(random(width)%2C%20random(height%2F2))%3B%0A%20%20%20%20starBrightness%5Bi%5D%20%3D%20random(30%2C%20100)%3B%0A%20%20%7D%0A%7D%0A%0Avoid%20draw()%20%7B%0A%20%20%2F%2F%20%E7%8D%B2%E5%8F%96%E9%BA%A5%E5%85%8B%E9%A2%A8%E9%9F%B3%E9%87%8F%E4%B8%A6%E5%B9%B3%E6%BB%91%E8%99%95%E7%90%86%0A%20%20volume%20%3D%20amp.analyze()%20*%205%3B%20%2F%2F%20%E6%94%BE%E5%A4%A7%E9%9F%B3%E9%87%8F%E5%80%BC%0A%20%20smoothedVolume%20%3D%20lerp(smoothedVolume%2C%20volume%2C%200.1)%3B%0A%20%20%0A%20%20%2F%2F%20%E6%9B%B4%E6%96%B0%E9%9F%B3%E9%87%8F%E6%AD%B7%E5%8F%B2%E7%B4%80%E9%8C%84%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20volumeHistory.length-1%3B%20i%2B%2B)%20%7B%0A%20%20%20%20volumeHistory%5Bi%5D%20%3D%20volumeHistory%5Bi%2B1%5D%3B%0A%20%20%7D%0A%20%20volumeHistory%5BvolumeHistory.length-1%5D%20%3D%20smoothedVolume%3B%0A%20%20%0A%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E6%9B%B4%E6%96%B0%E9%A2%A8%E8%BB%8A%E9%80%9F%E5%BA%A6%0A%20%20windmillSpeed%20%3D%20smoothedVolume%20*%2010%3B%0A%20%20windmillAngle%20%2B%3D%20windmillSpeed%3B%0A%20%20%0A%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E6%9B%B4%E6%96%B0%E9%A2%A8%E5%8A%9B%0A%20%20windStrength%20%3D%20smoothedVolume%20*%202%3B%0A%20%20%0A%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E6%AA%A2%E6%B8%AC%E9%87%8D%E6%8B%8D%E4%B8%A6%E5%89%B5%E5%BB%BA%E7%89%B9%E6%95%88%0A%20%20if%20(volume%20%3E%200.4%20%26%26%20millis()%20-%20lastBeat%20%3E%20300)%20%7B%0A%20%20%20%20createParticleExplosion()%3B%0A%20%20%20%20sunGlow%20%3D%20min(sunGlow%20%2B%2020%2C%2050)%3B%0A%20%20%20%20lastBeat%20%3D%20millis()%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E9%99%8D%E4%BD%8E%E5%A4%AA%E9%99%BD%E5%85%89%E6%9A%88%0A%20%20sunGlow%20%3D%20max(sunGlow%20-%200.5%2C%200)%3B%0A%20%20%0A%20%20%2F%2F%20%E5%88%87%E6%8F%9B%E6%97%A5%E5%A4%9C%E6%A8%A1%E5%BC%8F%0A%20%20if%20(keyPressed%20%26%26%20key%20%3D%3D%20’n’)%20%7B%0A%20%20%20%20nightMode%20%3D%20!nightMode%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%83%8C%E6%99%AF%0A%20%20drawBackground()%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%9B%B2%E6%9C%B5%0A%20%20updateAndDrawClouds()%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%8D%89%E5%9C%B0%0A%20%20drawGrass()%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%A2%A8%E8%BB%8A%0A%20%20drawWindmill()%3B%0A%20%20%0A%20%20%2F%2F%20%E6%9B%B4%E6%96%B0%E4%B8%A6%E7%B9%AA%E8%A3%BD%E7%B2%92%E5%AD%90%0A%20%20updateAndDrawParticles()%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%A6%96%E8%A6%BA%E5%8C%96%E7%9A%84%E9%9F%B3%E9%87%8F%E6%B3%A2%E5%BD%A2%0A%20%20drawWaveform()%3B%0A%20%20%0A%20%20%2F%2F%20%E9%A1%AF%E7%A4%BA%E9%9F%B3%E9%87%8F%E6%95%B8%E5%80%BC%0A%20%20displayVolumeInfo()%3B%0A%20%20%0A%20%20%2F%2F%20%E9%A1%AF%E7%A4%BA%E6%93%8D%E4%BD%9C%E8%AA%AA%E6%98%8E%0A%20%20displayInstructions()%3B%0A%7D%0A%0A%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%83%8C%E6%99%AF%EF%BC%88%E5%A4%A9%E7%A9%BA%E3%80%81%E5%A4%AA%E9%99%BD%2F%E6%9C%88%E4%BA%AE%EF%BC%89%0Avoid%20drawBackground()%20%7B%0A%20%20%2F%2F%20%E5%A4%A9%E7%A9%BA%E9%A1%8F%E8%89%B2%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E5%BE%AE%E8%AA%BF%0A%20%20float%20skyBrightness%20%3D%20nightMode%20%3F%2020%20%3A%2090%20-%20smoothedVolume%20*%2010%3B%0A%20%20float%20skySaturation%20%3D%20nightMode%20%3F%2060%20%3A%2020%20%2B%20smoothedVolume%20*%2020%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E6%BC%B8%E8%AE%8A%E5%A4%A9%E7%A9%BA%0A%20%20for%20(int%20y%20%3D%200%3B%20y%20%3C%20height%20*%200.7%3B%20y%2B%2B)%20%7B%0A%20%20%20%20float%20gradientPos%20%3D%20map(y%2C%200%2C%20height%20*%200.7%2C%200%2C%201)%3B%0A%20%20%20%20float%20hue%20%3D%20nightMode%20%3F%20240%20%3A%20skyHue%3B%0A%20%20%20%20float%20brightness%20%3D%20nightMode%20%3F%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20map(gradientPos%2C%200%2C%201%2C%2020%2C%205)%20%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20map(gradientPos%2C%200%2C%201%2C%20skyBrightness%2C%20skyBrightness%20-%2010)%3B%0A%20%20%20%20float%20saturation%20%3D%20nightMode%20%3F%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20map(gradientPos%2C%200%2C%201%2C%2030%2C%2060)%20%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20map(gradientPos%2C%200%2C%201%2C%20skySaturation%2C%20skySaturation%20%2B%2010)%3B%0A%20%20%20%20%0A%20%20%20%20stroke(hue%2C%20saturation%2C%20brightness)%3B%0A%20%20%20%20line(0%2C%20y%2C%20width%2C%20y)%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E6%98%9F%E6%98%9F%EF%BC%88%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F%EF%BC%89%0A%20%20if%20(nightMode)%20%7B%0A%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20starCount%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20float%20brightness%20%3D%20starBrightness%5Bi%5D%20%2B%20sin(frameCount%20*%200.05%20%2B%20i)%20*%2020%3B%0A%20%20%20%20%20%20fill(60%2C%2010%2C%20brightness)%3B%0A%20%20%20%20%20%20noStroke()%3B%0A%20%20%20%20%20%20float%20starSize%20%3D%201%20%2B%20smoothedVolume%3B%0A%20%20%20%20%20%20ellipse(stars%5Bi%5D.x%2C%20stars%5Bi%5D.y%2C%20starSize%2C%20starSize)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E5%A4%AA%E9%99%BD%E6%88%96%E6%9C%88%E4%BA%AE%0A%20%20if%20(nightMode)%20%7B%0A%20%20%20%20%2F%2F%20%E6%9C%88%E4%BA%AE%0A%20%20%20%20pushMatrix()%3B%0A%20%20%20%20translate(width%20*%200.8%2C%20height%20*%200.2)%3B%0A%20%20%20%20fill(60%2C%2010%2C%2090)%3B%0A%20%20%20%20noStroke()%3B%0A%20%20%20%20ellipse(0%2C%200%2C%20sunSize%2C%20sunSize)%3B%0A%20%20%20%20%2F%2F%20%E6%9C%88%E7%90%83%E8%A1%A8%E9%9D%A2%E7%B4%8B%E7%90%86%0A%20%20%20%20fill(60%2C%2010%2C%2080%2C%2030)%3B%0A%20%20%20%20ellipse(-sunSize%2F4%2C%20-sunSize%2F4%2C%20sunSize%2F2%2C%20sunSize%2F2)%3B%0A%20%20%20%20ellipse(sunSize%2F5%2C%20sunSize%2F5%2C%20sunSize%2F3%2C%20sunSize%2F3)%3B%0A%20%20%20%20popMatrix()%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20%2F%2F%20%E5%A4%AA%E9%99%BD%E5%8F%8A%E5%85%B6%E5%85%89%E6%9A%88%0A%20%20%20%20pushMatrix()%3B%0A%20%20%20%20translate(width%20*%200.8%2C%20height%20*%200.2)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E5%A4%AA%E9%99%BD%E5%85%89%E6%9A%88%0A%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%203%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20float%20alpha%20%3D%20map(i%2C%200%2C%203%2C%20sunGlow%2C%200)%3B%0A%20%20%20%20%20%20float%20size%20%3D%20sunSize%20*%20(1%20%2B%20i%20*%200.5%20*%20(1%20%2B%20smoothedVolume))%3B%0A%20%20%20%20%20%20fill(40%2C%2080%2C%20100%2C%20alpha)%3B%0A%20%20%20%20%20%20ellipse(0%2C%200%2C%20size%2C%20size)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E5%A4%AA%E9%99%BD%E6%9C%AC%E9%AB%94%0A%20%20%20%20fill(40%2C%2080%2C%20100)%3B%0A%20%20%20%20ellipse(0%2C%200%2C%20sunSize%2C%20sunSize)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E5%A4%AA%E9%99%BD%E5%85%89%E8%8A%92%0A%20%20%20%20stroke(40%2C%2080%2C%20100%2C%2070)%3B%0A%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%2012%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20float%20angle%20%3D%20i%20*%20TWO_PI%20%2F%2012%3B%0A%20%20%20%20%20%20float%20rayLength%20%3D%20sunSize%20*%20(0.7%20%2B%20smoothedVolume)%3B%0A%20%20%20%20%20%20pushMatrix()%3B%0A%20%20%20%20%20%20rotate(angle%20%2B%20frameCount%20*%200.01)%3B%0A%20%20%20%20%20%20strokeWeight(3)%3B%0A%20%20%20%20%20%20line(0%2C%200%2C%20rayLength%2C%200)%3B%0A%20%20%20%20%20%20popMatrix()%3B%0A%20%20%20%20%7D%0A%20%20%20%20popMatrix()%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%A2%A8%E8%BB%8A%0Avoid%20drawWindmill()%20%7B%0A%20%20float%20centerX%20%3D%20width%20%2F%202%3B%0A%20%20float%20centerY%20%3D%20height%20*%200.7%20-%20grassHeight%20*%200.7%3B%0A%20%20%0A%20%20%2F%2F%20%E9%A2%A8%E8%BB%8A%E6%94%AF%E6%9F%B1%0A%20%20fill(30%2C%2030%2C%2080)%3B%0A%20%20noStroke()%3B%0A%20%20rect(centerX%20-%2015%2C%20centerY%2C%2030%2C%20height%20-%20centerY)%3B%0A%20%20%0A%20%20%2F%2F%20%E9%A2%A8%E8%BB%8A%E6%A9%9F%E8%89%99%0A%20%20fill(0%2C%200%2C%2060)%3B%0A%20%20ellipse(centerX%2C%20centerY%2C%2040%2C%2040)%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%A2%A8%E8%BB%8A%E8%91%89%E7%89%87%0A%20%20pushMatrix()%3B%0A%20%20translate(centerX%2C%20centerY)%3B%0A%20%20rotate(radians(windmillAngle))%3B%0A%20%20%0A%20%20%2F%2F%20%E8%81%B2%E9%9F%B3%E5%B0%8D%E8%91%89%E7%89%87%E7%9A%84%E5%BD%A2%E8%AE%8A%E6%95%88%E6%9E%9C%0A%20%20float%20bladeLengthFactor%20%3D%201%20%2B%20smoothedVolume%20*%200.2%3B%0A%20%20float%20bladeWidthFactor%20%3D%201%20%2B%20smoothedVolume%20*%200.5%3B%0A%20%20%0A%20%20%2F%2F%20%E9%A2%A8%E8%BB%8A%E8%91%89%E7%89%87%EF%BC%8C%E6%95%B8%E9%87%8F%E7%94%B1%20bladeCount%20%E6%B1%BA%E5%AE%9A%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20bladeCount%3B%20i%2B%2B)%20%7B%0A%20%20%20%20pushMatrix()%3B%0A%20%20%20%20rotate(i%20*%20TWO_PI%20%2F%20bladeCount)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E8%91%89%E7%89%87%E9%A1%8F%E8%89%B2%E6%A0%B9%E6%93%9A%E4%BD%8D%E7%BD%AE%E5%92%8C%E9%9F%B3%E9%87%8F%E8%AE%8A%E5%8C%96%0A%20%20%20%20color%20bladeColor%20%3D%20bladeColors%5Bi%20%25%20bladeColors.length%5D%3B%0A%20%20%20%20fill(hue(bladeColor)%2C%20saturation(bladeColor)%2C%20brightness(bladeColor))%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%91%89%E7%89%87%20-%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E8%AE%8A%E5%BD%A2%0A%20%20%20%20beginShape()%3B%0A%20%20%20%20vertex(0%2C%200)%3B%0A%20%20%20%20vertex(-15%20*%20bladeWidthFactor%2C%20bladeLength%20*%200.3%20*%20bladeLengthFactor)%3B%0A%20%20%20%20vertex(0%2C%20bladeLength%20*%20bladeLengthFactor)%3B%0A%20%20%20%20vertex(15%20*%20bladeWidthFactor%2C%20bladeLength%20*%200.3%20*%20bladeLengthFactor)%3B%0A%20%20%20%20endShape(CLOSE)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%95%B6%E9%9F%B3%E9%87%8F%E8%B6%B3%E5%A4%A0%E5%A4%A7%E6%99%82%EF%BC%8C%E5%8A%A0%E5%85%A5%E8%91%89%E7%89%87%E5%85%89%E6%BE%A4%0A%20%20%20%20if%20(smoothedVolume%20%3E%200.2)%20%7B%0A%20%20%20%20%20%20fill(hue(bladeColor)%2C%20saturation(bladeColor)%20*%200.5%2C%20brightness(bladeColor)%20*%201.5%2C%2070)%3B%0A%20%20%20%20%20%20ellipse(0%2C%20bladeLength%20*%200.5%20*%20bladeLengthFactor%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2015%20*%20bladeWidthFactor%2C%20bladeLength%20*%200.5%20*%20bladeLengthFactor)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20popMatrix()%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20%E9%A2%A8%E8%BB%8A%E4%B8%AD%E5%BF%83%0A%20%20fill(0%2C%200%2C%2090)%3B%0A%20%20ellipse(0%2C%200%2C%2020%2C%2020)%3B%0A%20%20%0A%20%20popMatrix()%3B%0A%20%20%0A%20%20%2F%2F%20%E7%95%B6%E8%BD%89%E9%80%9F%E8%B6%B3%E5%A4%A0%E5%BF%AB%E6%99%82%EF%BC%8C%E7%94%A2%E7%94%9F%E6%97%8B%E8%BD%89%E7%B2%92%E5%AD%90%0A%20%20if%20(windmillSpeed%20%3E%201)%20%7B%0A%20%20%20%20createWindmillParticles(centerX%2C%20centerY)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%B9%AA%E8%A3%BD%E8%8D%89%E5%9C%B0%0Avoid%20drawGrass()%20%7B%0A%20%20%2F%2F%20%E5%A4%A7%E9%9D%A2%E7%A9%8D%E8%8D%89%E5%9C%B0%0A%20%20fill(120%2C%2070%2C%2060)%3B%0A%20%20noStroke()%3B%0A%20%20rect(0%2C%20height%20*%200.7%2C%20width%2C%20height%20*%200.3)%3B%0A%20%20%0A%20%20%2F%2F%20%E5%80%8B%E5%88%A5%E8%8D%89%E8%91%89%20-%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E6%B3%A2%E5%8B%95%0A%20%20int%20grassCount%20%3D%2050%3B%0A%20%20stroke(120%2C%2070%2C%2060)%3B%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20grassCount%3B%20i%2B%2B)%20%7B%0A%20%20%20%20float%20x%20%3D%20map(i%2C%200%2C%20grassCount%2C%200%2C%20width)%3B%0A%20%20%20%20float%20grassWave%20%3D%20sin(frameCount%20*%200.05%20%2B%20i%20*%200.3)%20*%20windStrength%3B%0A%20%20%20%20float%20grassHeight%20%3D%20this.grassHeight%20*%20(1%20%2B%20volumeHistory%5Bi%20%25%20volumeHistory.length%5D%20*%200.5)%3B%0A%20%20%20%20%0A%20%20%20%20pushMatrix()%3B%0A%20%20%20%20translate(x%2C%20height%20*%200.7)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E8%8D%89%E8%91%89%E9%A1%8F%E8%89%B2%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E8%AE%8A%E5%8C%96%0A%20%20%20%20float%20greenHue%20%3D%20120%20%2B%20volumeHistory%5Bi%20%25%20volumeHistory.length%5D%20*%2020%3B%0A%20%20%20%20stroke(greenHue%2C%2070%2C%2060)%3B%0A%20%20%20%20strokeWeight(2%20%2B%20volumeHistory%5Bi%20%25%20volumeHistory.length%5D%20*%203)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E5%BD%8E%E6%9B%B2%E7%9A%84%E8%8D%89%E8%91%89%0A%20%20%20%20beginShape()%3B%0A%20%20%20%20for%20(int%20j%20%3D%200%3B%20j%20%3C%2010%3B%20j%2B%2B)%20%7B%0A%20%20%20%20%20%20float%20t%20%3D%20j%20%2F%209.0%3B%0A%20%20%20%20%20%20float%20grassX%20%3D%20grassWave%20*%20t%20*%20t%3B%0A%20%20%20%20%20%20float%20grassY%20%3D%20-grassHeight%20*%20t%3B%0A%20%20%20%20%20%20vertex(grassX%2C%20grassY)%3B%0A%20%20%20%20%7D%0A%20%20%20%20endShape()%3B%0A%20%20%20%20%0A%20%20%20%20popMatrix()%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E6%9B%B4%E6%96%B0%E4%B8%A6%E7%B9%AA%E8%A3%BD%E9%9B%B2%E6%9C%B5%0Avoid%20updateAndDrawClouds()%20%7B%0A%20%20for%20(Cloud%20cloud%20%3A%20clouds)%20%7B%0A%20%20%20%20cloud.update()%3B%0A%20%20%20%20cloud.display()%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E5%89%B5%E5%BB%BA%E9%A2%A8%E8%BB%8A%E6%97%8B%E8%BD%89%E7%94%A2%E7%94%9F%E7%9A%84%E7%B2%92%E5%AD%90%0Avoid%20createWindmillParticles(float%20x%2C%20float%20y)%20%7B%0A%20%20float%20angle%20%3D%20random(TWO_PI)%3B%0A%20%20float%20distance%20%3D%20random(20%2C%2030)%3B%0A%20%20float%20particleX%20%3D%20x%20%2B%20cos(angle)%20*%20distance%3B%0A%20%20float%20particleY%20%3D%20y%20%2B%20sin(angle)%20*%20distance%3B%0A%20%20%0A%20%20%2F%2F%20%E7%B2%92%E5%AD%90%E9%A1%8F%E8%89%B2%E6%A0%B9%E6%93%9A%E9%A2%A8%E8%BB%8A%E9%80%9F%E5%BA%A6%E8%AE%8A%E5%8C%96%0A%20%20float%20hue%20%3D%20map(windmillSpeed%2C%200%2C%2020%2C%20200%2C%20300)%3B%0A%20%20color%20particleColor%20%3D%20color(hue%2C%2080%2C%20100%2C%2070)%3B%0A%20%20%0A%20%20particles.add(new%20Particle(particleX%2C%20particleY%2C%20particleColor))%3B%0A%7D%0A%0A%2F%2F%20%E5%89%B5%E5%BB%BA%E9%9F%B3%E9%87%8F%E6%BF%80%E7%99%BC%E7%9A%84%E7%B2%92%E5%AD%90%E7%88%86%E7%99%BC%0Avoid%20createParticleExplosion()%20%7B%0A%20%20float%20centerX%20%3D%20width%20%2F%202%3B%0A%20%20float%20centerY%20%3D%20height%20*%200.7%20-%20grassHeight%20*%200.7%3B%0A%20%20%0A%20%20%2F%2F%20%E5%89%B5%E5%BB%BA%E5%BE%9E%E9%A2%A8%E8%BB%8A%E4%B8%AD%E5%BF%83%E7%99%BC%E6%95%A3%E7%9A%84%E7%B2%92%E5%AD%90%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%2020%3B%20i%2B%2B)%20%7B%0A%20%20%20%20float%20angle%20%3D%20random(TWO_PI)%3B%0A%20%20%20%20float%20distance%20%3D%20random(30%2C%2050)%3B%0A%20%20%20%20float%20particleX%20%3D%20centerX%20%2B%20cos(angle)%20*%20distance%3B%0A%20%20%20%20float%20particleY%20%3D%20centerY%20%2B%20sin(angle)%20*%20distance%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E5%BD%A9%E8%99%B9%E8%89%B2%E7%B2%92%E5%AD%90%0A%20%20%20%20float%20hue%20%3D%20random(360)%3B%0A%20%20%20%20color%20particleColor%20%3D%20color(hue%2C%2080%2C%20100%2C%2080)%3B%0A%20%20%20%20%0A%20%20%20%20Particle%20p%20%3D%20new%20Particle(particleX%2C%20particleY%2C%20particleColor)%3B%0A%20%20%20%20p.velocity%20%3D%20new%20PVector(cos(angle)%20*%20random(1%2C%203)%2C%20sin(angle)%20*%20random(1%2C%203))%3B%0A%20%20%20%20particles.add(p)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E6%9B%B4%E6%96%B0%E4%B8%A6%E7%B9%AA%E8%A3%BD%E6%89%80%E6%9C%89%E7%B2%92%E5%AD%90%0Avoid%20updateAndDrawParticles()%20%7B%0A%20%20for%20(int%20i%20%3D%20particles.size()%20-%201%3B%20i%20%3E%3D%200%3B%20i–)%20%7B%0A%20%20%20%20Particle%20p%20%3D%20particles.get(i)%3B%0A%20%20%20%20p.update()%3B%0A%20%20%20%20p.display()%3B%0A%20%20%20%20%0A%20%20%20%20if%20(p.isDead())%20%7B%0A%20%20%20%20%20%20particles.remove(i)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%9F%B3%E9%87%8F%E6%B3%A2%E5%BD%A2%0Avoid%20drawWaveform()%20%7B%0A%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%9F%B3%E9%87%8F%E6%AD%B7%E5%8F%B2%E6%B3%A2%E5%BD%A2%0A%20%20stroke(nightMode%20%3F%20color(210%2C%2070%2C%2090)%20%3A%20color(30%2C%2070%2C%2090))%3B%0A%20%20strokeWeight(2)%3B%0A%20%20noFill()%3B%0A%20%20%0A%20%20beginShape()%3B%0A%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20volumeHistory.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20float%20x%20%3D%20map(i%2C%200%2C%20volumeHistory.length%2C%20width%20*%200.1%2C%20width%20*%200.9)%3B%0A%20%20%20%20float%20y%20%3D%20height%20*%200.85%20-%20volumeHistory%5Bi%5D%20*%20100%3B%0A%20%20%20%20vertex(x%2C%20y)%3B%0A%20%20%7D%0A%20%20endShape()%3B%0A%7D%0A%0A%2F%2F%20%E9%A1%AF%E7%A4%BA%E9%9F%B3%E9%87%8F%E6%95%B8%E5%80%BC%E4%BF%A1%E6%81%AF%0Avoid%20displayVolumeInfo()%20%7B%0A%20%20fill(nightMode%20%3F%20color(0%2C%200%2C%2090)%20%3A%20color(0%2C%200%2C%2030))%3B%0A%20%20textSize(14)%3B%0A%20%20text(%22%E7%92%B0%E5%A2%83%E9%9F%B3%E9%87%8F%3A%20%22%20%2B%20nf(volume%2C%200%2C%202)%2C%2020%2C%20height%20-%2040)%3B%0A%20%20text(%22%E9%A2%A8%E8%BB%8A%E9%80%9F%E5%BA%A6%3A%20%22%20%2B%20nf(windmillSpeed%2C%200%2C%202)%2C%2020%2C%20height%20-%2020)%3B%0A%7D%0A%0A%2F%2F%20%E9%A1%AF%E7%A4%BA%E6%93%8D%E4%BD%9C%E8%AA%AA%E6%98%8E%0Avoid%20displayInstructions()%20%7B%0A%20%20fill(nightMode%20%3F%20color(0%2C%200%2C%2090)%20%3A%20color(0%2C%200%2C%2030))%3B%0A%20%20textSize(14)%3B%0A%20%20text(%22%E6%8C%89%20’n’%20%E5%88%87%E6%8F%9B%E6%97%A5%2F%E5%A4%9C%E6%A8%A1%E5%BC%8F%22%2C%20width%20-%20150%2C%20height%20-%2020)%3B%0A%7D%0A%0A%2F%2F%20%E9%9B%B2%E6%9C%B5%E9%A1%9E%E5%88%A5%0Aclass%20Cloud%20%7B%0A%20%20float%20x%2C%20y%3B%0A%20%20float%20speed%3B%0A%20%20float%20size%3B%0A%20%20float%20opacity%3B%0A%20%20float%5B%5D%20bumpSizes%3B%0A%20%20float%5B%5D%20bumpOffsets%3B%0A%20%20%0A%20%20Cloud(float%20x%2C%20float%20y)%20%7B%0A%20%20%20%20this.x%20%3D%20x%3B%0A%20%20%20%20this.y%20%3D%20y%3B%0A%20%20%20%20this.speed%20%3D%20random(0.2%2C%200.5)%3B%0A%20%20%20%20this.size%20%3D%20random(50%2C%20120)%3B%0A%20%20%20%20this.opacity%20%3D%20random(70%2C%2090)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E9%9B%B2%E6%9C%B5%E7%9A%84%E4%B8%8D%E8%A6%8F%E5%89%87%E5%BD%A2%E7%8B%80%0A%20%20%20%20int%20bumpCount%20%3D%20int(random(4%2C%207))%3B%0A%20%20%20%20bumpSizes%20%3D%20new%20float%5BbumpCount%5D%3B%0A%20%20%20%20bumpOffsets%20%3D%20new%20float%5BbumpCount%5D%3B%0A%20%20%20%20%0A%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20bumpCount%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20bumpSizes%5Bi%5D%20%3D%20random(0.6%2C%201.0)%3B%0A%20%20%20%20%20%20bumpOffsets%5Bi%5D%20%3D%20random(TWO_PI)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20void%20update()%20%7B%0A%20%20%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%A2%A8%E5%8A%9B%E7%A7%BB%E5%8B%95%E9%9B%B2%E6%9C%B5%0A%20%20%20%20x%20%2B%3D%20speed%20%2B%20windStrength%20*%200.2%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%95%B6%E9%9B%B2%E6%9C%B5%E7%A7%BB%E5%87%BA%E7%95%AB%E9%9D%A2%E6%99%82%EF%BC%8C%E5%BE%9E%E5%B7%A6%E5%81%B4%E9%87%8D%E6%96%B0%E9%80%B2%E5%85%A5%0A%20%20%20%20if%20(x%20%3E%20width%20%2B%20size)%20%7B%0A%20%20%20%20%20%20x%20%3D%20-size%3B%0A%20%20%20%20%20%20y%20%3D%20random(height%2F4)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E9%9B%B2%E6%9C%B5%E5%BE%AE%E5%A6%99%E4%B8%8A%E4%B8%8B%E6%B5%AE%E5%8B%95%0A%20%20%20%20y%20%2B%3D%20sin(frameCount%20*%200.01%20%2B%20x%20*%200.01)%20*%200.2%3B%0A%20%20%7D%0A%20%20%0A%20%20void%20display()%20%7B%0A%20%20%20%20noStroke()%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E9%9B%B2%E6%9C%B5%E7%9A%84%E9%A1%8F%E8%89%B2%20-%20%E6%97%A5%2F%E5%A4%9C%E6%A8%A1%E5%BC%8F%E6%9C%89%E4%B8%8D%E5%90%8C%E6%95%88%E6%9E%9C%0A%20%20%20%20if%20(nightMode)%20%7B%0A%20%20%20%20%20%20fill(230%2C%2020%2C%2040%2C%20opacity)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20fill(0%2C%200%2C%20100%2C%20opacity)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%9B%B2%E6%9C%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%BD%A2%E7%8B%80%0A%20%20%20%20pushMatrix()%3B%0A%20%20%20%20translate(x%2C%20y)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E8%AA%BF%E6%95%B4%E9%9B%B2%E6%9C%B5%E9%80%8F%E6%98%8E%E5%BA%A6%E5%92%8C%E5%A4%A7%E5%B0%8F%0A%20%20%20%20float%20cloudSizeFactor%20%3D%201%20%2B%20smoothedVolume%20*%200.1%3B%0A%20%20%20%20float%20cloudOpacity%20%3D%20opacity%20*%20(1%20-%20smoothedVolume%20*%200.3)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E7%B9%AA%E8%A3%BD%E9%9B%B2%E6%9C%B5%E7%9A%84%E5%A4%9A%E5%80%8B%E5%9C%93%E5%BD%A2%E7%B5%84%E6%88%90%E4%B8%8D%E8%A6%8F%E5%89%87%E5%BD%A2%E7%8B%80%0A%20%20%20%20ellipse(0%2C%200%2C%20size%20*%20cloudSizeFactor%2C%20size%20*%200.6%20*%20cloudSizeFactor)%3B%0A%20%20%20%20%0A%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%20bumpSizes.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20float%20angle%20%3D%20map(i%2C%200%2C%20bumpSizes.length%2C%200%2C%20TWO_PI)%20%2B%20bumpOffsets%5Bi%5D%3B%0A%20%20%20%20%20%20float%20bx%20%3D%20cos(angle)%20*%20size%20*%200.4%3B%0A%20%20%20%20%20%20float%20by%20%3D%20sin(angle)%20*%20size%20*%200.3%3B%0A%20%20%20%20%20%20ellipse(bx%2C%20by%2C%20size%20*%20bumpSizes%5Bi%5D%20*%20cloudSizeFactor%2C%20size%20*%20bumpSizes%5Bi%5D%20*%20cloudSizeFactor)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20popMatrix()%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%B2%92%E5%AD%90%E9%A1%9E%E5%88%A5%0Aclass%20Particle%20%7B%0A%20%20PVector%20position%3B%0A%20%20PVector%20velocity%3B%0A%20%20PVector%20acceleration%3B%0A%20%20color%20particleColor%3B%0A%20%20float%20size%3B%0A%20%20float%20lifespan%3B%0A%20%20%0A%20%20Particle(float%20x%2C%20float%20y%2C%20color%20c)%20%7B%0A%20%20%20%20position%20%3D%20new%20PVector(x%2C%20y)%3B%0A%20%20%20%20velocity%20%3D%20new%20PVector(random(-1%2C%201)%2C%20random(-2%2C%20-0.5))%3B%0A%20%20%20%20acceleration%20%3D%20new%20PVector(0%2C%200.05)%3B%0A%20%20%20%20particleColor%20%3D%20c%3B%0A%20%20%20%20size%20%3D%20random(3%2C%208)%3B%0A%20%20%20%20lifespan%20%3D%20255%3B%0A%20%20%7D%0A%20%20%0A%20%20void%20update()%20%7B%0A%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%E9%A2%A8%E5%8A%9B%E5%BD%B1%E9%9F%BF%0A%20%20%20%20PVector%20wind%20%3D%20new%20PVector(windStrength%20*%200.1%2C%200)%3B%0A%20%20%20%20velocity.add(wind)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E6%9B%B4%E6%96%B0%E4%BD%8D%E7%BD%AE%0A%20%20%20%20velocity.add(acceleration)%3B%0A%20%20%20%20position.add(velocity)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E6%B8%9B%E5%B0%91%E5%A3%BD%E5%91%BD%0A%20%20%20%20lifespan%20-%3D%205%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E6%87%89%E7%94%A8%E9%98%BB%E5%8A%9B%0A%20%20%20%20velocity.mult(0.98)%3B%0A%20%20%7D%0A%20%20%0A%20%20void%20display()%20%7B%0A%20%20%20%20noStroke()%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E8%A8%AD%E7%BD%AE%E7%B2%92%E5%AD%90%E9%A1%8F%E8%89%B2%E5%92%8C%E9%80%8F%E6%98%8E%E5%BA%A6%0A%20%20%20%20color%20displayColor%20%3D%20color(%0A%20%20%20%20%20%20hue(particleColor)%2C%0A%20%20%20%20%20%20saturation(particleColor)%2C%0A%20%20%20%20%20%20brightness(particleColor)%2C%0A%20%20%20%20%20%20map(lifespan%2C%200%2C%20255%2C%200%2C%20100)%0A%20%20%20%20)%3B%0A%20%20%20%20%0A%20%20%20%20fill(displayColor)%3B%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20%E6%A0%B9%E6%93%9A%E9%9F%B3%E9%87%8F%E8%AA%BF%E6%95%B4%E7%B2%92%E5%AD%90%E5%A4%A7%E5%B0%8F%E5%92%8C%E5%BD%A2%E7%8B%80%0A%20%20%20%20if%20(smoothedVolume%20%3E%200.3)%20%7B%0A%20%20%20%20%20%20%2F%2F%20%E9%9F%B3%E9%87%8F%E5%A4%A7%E6%99%82%E7%B2%92%E5%AD%90%E8%AE%8A%E6%88%90%E6%98%9F%E5%BD%A2%0A%20%20%20%20%20%20pushMatrix()%3B%0A%20%20%20%20%20%20translate(position.x%2C%20position.y)%3B%0A%20%20%20%20%20%20rotate(frameCount%20*%200.1)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20beginShape()%3B%0A%20%20%20%20%20%20for%20(int%20i%20%3D%200%3B%20i%20%3C%205%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20float%20angle%20%3D%20i%20*%20TWO_PI%20%2F%205%3B%0A%20%20%20%20%20%20%20%20float%20×1%20%3D%20cos(angle)%20*%20size%3B%0A%20%20%20%20%20%20%20%20float%20y1%20%3D%20sin(angle)%20*%20size%3B%0A%20%20%20%20%20%20%20%20vertex(x1%2C%20y1)%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20angle%20%2B%3D%20TWO_PI%20%2F%2010%3B%0A%20%20%20%20%20%20%20%20float%20×2%20%3D%20cos(angle)%20*%20(size%20*%200.4)%3B%0A%20%20%20%20%20%20%20%20float%20y2%20%3D%20sin(angle)%20*%20(size%20*%200.4)%3B%0A%20%20%20%20%20%20%20%20vertex(x2%2C%20y2)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20endShape(CLOSE)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20popMatrix()%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%2F%2F%20%E9%9F%B3%E9%87%8F%E5%B0%8F%E6%99%82%E7%B2%92%E5%AD%90%E7%82%BA%E5%9C%93%E5%BD%A2%0A%20%20%20%20%20%20ellipse(position.x%2C%20position.y%2C%20size%2C%20size)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20boolean%20isDead()%20%7B%0A%20%20%20%20return%20lifespan%20%3C%3D%200%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%95%B6%E6%8C%89%E9%8D%B5%E6%99%82%E5%88%87%E6%8F%9B%E6%97%A5%2F%E5%A4%9C%E6%A8%A1%E5%BC%8F%EF%BC%88%E5%9C%A8%20draw%20%E4%B8%AD%E5%B7%B2%E8%99%95%E7%90%86%EF%BC%89%0A” message=”” highlight=”” provider=”manual”/]

執行

請按下 Processing IDE 中的執行按鈕，即可看到以下畫面。雲朵飄動的效果我很喜歡。

拍拍手或是對著麥克風吹氣就會看到風車轉動速度以及粒子噴發速度會隨著環境音量變化，太陽與背景的草也會跟著變動。按下鍵盤的 n 鍵就會切換白天晚上喔！

Processing 提供的範例真的很豐富，歡迎大家多多開起來玩玩看！沒有安裝也可以從網頁來看各個範例的執行效果。

Post Views: 274

Related Posts

CAVEDU 阿吉 - 雜工

CAVEDU 教育團隊 打雜

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *