此为历史版本和 IPFS 入口查阅区,回到作品页
TY_☆゚
IPFS 指纹 这是什么

作品指纹

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

TY_☆゚
·
又在用 p5js 生成大家看不懂的東西了(-..-);;

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

openprocessing.org/s...

作品概覽

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

作品展示


程式碼結構

  1. 背景漸層

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

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

  2. 雲層

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

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

  3. 海浪

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

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

  4. 動物

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

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

程式碼背後的意圖

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

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

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

CC BY-NC-ND 4.0 授权