驚！魚在天上飛！使用 p5.js 藝術生成自然景象

程式碼和動態展示成果請直接戳 >

openprocessing.org/s...

作品概覽

這幅作品的目的是展示一個有動態背景、雲層、海浪以及動物（例如魚和鳥）在其中移動的自然景象。程式碼利用了 p5.js 這個繪圖庫，來創建這些視覺效果，並進行動畫處理。整體畫面有著一種柔和的藍色漸層背景，並且會有一些白雲緩慢移動，還有波浪隨著時間的推移起伏不定。

作品展示

程式碼結構

1. 背景漸層

   • 程式碼中的 drawGradientBackground 函數負責創建漸層背景。漸層的顏色根據隨機選擇的模式來生成，讓畫面中的天空顏色隨著時間和背景情境有所變化（如藍天、清晨或夕陽等）。

   這部分的目的是讓背景顯得更自然，並且隨著時間的推移，色調和氛圍也會有所變化。

2. 雲層

   • Cloud 類別定義了雲層的行為。這些雲層使用 noise 函數來實現隨機移動，模擬雲朵自然的飄動效果。每個雲層會有自己的速度，並在畫面上方隨著時間變化。

   這樣的隨機運動讓場景看起來更生動，並且給人一種自然變化的感覺。

3. 海浪

   • Wave 類別定義了海浪的形狀和運動。波浪由一系列隨機變化的點組成，並利用 noise 來創建波動效果。波浪會隨著時間不斷起伏，增加了畫面動態感。

   這裡的關鍵在於如何讓波浪看起來自然流動，而不是僅僅一成不變的形狀。

4. 動物

   • generateAnimals 函數會隨機生成魚或鳥。每個動物的位置、大小和類型都會隨機變化，創造出一個多樣化的動物場景。鳥類用三角形表示，魚則是隨機顏色的魚形狀。

   動物的生成是為了增添更多動態元素，使畫面更加生動和有趣。

程式碼背後的意圖

• 動態效果：程式碼中的各種元素（如雲層、海浪和動物）都採用了隨機化和動態更新的方式，這樣能夠讓畫面隨著每一幀的更新變得更加真實和充滿生命。

• 簡單的視覺效果：每個元素都經過簡單但有效的算法處理，如雲層的噪聲移動和海浪的隨機點生成，讓整體效果既不複雜，又能達到美觀的視覺效果。

• 隨機性和自然感：利用隨機數來決定顏色、位置和大小，讓每次畫面渲染都充滿不確定性，模擬了自然界中的無序感。