1. 從零開始為什么選擇Processing來模擬雨如果你對創(chuàng)意編程、動態(tài)視覺或者交互藝術(shù)感興趣那么“用Processing做雨”這個標(biāo)題很可能就是你踏入這個奇妙世界的第一塊敲門磚。Processing這個誕生于麻省理工學(xué)院媒體實驗室的開源編程語言和集成開發(fā)環(huán)境它的設(shè)計初衷就是讓藝術(shù)家、設(shè)計師、教育工作者和編程新手能夠輕松地創(chuàng)作視覺藝術(shù)和交互媒體。它把復(fù)雜的圖形渲染、數(shù)學(xué)計算和事件處理封裝成了極其簡潔的API讓你可以用寥寥幾行代碼就讓屏幕上“下起雨來”。那么為什么是“雨”呢在視覺模擬中雨是一個近乎完美的入門課題。它看似簡單——無非是無數(shù)個向下移動的點——但其中蘊(yùn)含的物理邏輯、隨機(jī)性控制、視覺層次和性能優(yōu)化幾乎涵蓋了動態(tài)圖形編程的核心要素。通過模擬雨你可以學(xué)習(xí)到如何管理大量粒子雨滴、如何應(yīng)用簡單的物理規(guī)則重力、加速度、如何創(chuàng)造視覺深度近大遠(yuǎn)小、速度差異以及如何通過參數(shù)調(diào)整來營造不同的氛圍細(xì)雨、暴雨、斜風(fēng)細(xì)雨。更重要的是這個過程的成果是即時、可視且富有美感的它能給你帶來最直接的成就感驅(qū)動你繼續(xù)探索下去。在開始之前我們不需要任何復(fù)雜的開發(fā)環(huán)境配置。你只需要去Processing的官網(wǎng)下載對應(yīng)你操作系統(tǒng)的版本安裝然后打開它。你會看到一個極其簡潔的界面一個代碼編輯區(qū)一個運(yùn)行按鈕和一個顯示窗口。這就是你的全部畫布和工具箱。本文的目標(biāo)就是帶你從畫下第一滴“雨”開始逐步構(gòu)建一個逼真、可交互、甚至帶點詩意的雨景模擬。我們不僅會實現(xiàn)基礎(chǔ)功能還會深入探討如何優(yōu)化、如何增加細(xì)節(jié)以及如何將你的個人創(chuàng)意融入其中。無論你是完全的編程新手還是有一定基礎(chǔ)想探索創(chuàng)意編程的開發(fā)者都能從這里找到樂趣和啟發(fā)。2. 第一滴雨基礎(chǔ)粒子系統(tǒng)的構(gòu)建與核心原理萬事開頭難但用Processing開頭真的不難。我們的第一步是在屏幕上創(chuàng)造一個移動的點也就是一滴最基本的“雨”。2.1 初始化舞臺與繪制循環(huán)打開Processing你會看到一段預(yù)設(shè)的代碼框架void setup() { size(800, 600); } void draw() { background(0); }這段代碼定義了兩個核心函數(shù)。setup()函數(shù)只在程序啟動時運(yùn)行一次通常用于初始化設(shè)置比如這里我們用size(800, 600)創(chuàng)建了一個800像素寬、600像素高的顯示窗口。draw()函數(shù)則是Processing的心臟它每秒會默認(rèn)調(diào)用60次幀率60fps窗口中的所有動畫和交互都發(fā)生在這個循環(huán)里。background(0)則將每一幀的背景色設(shè)置為黑色0代表純黑相當(dāng)于在畫新圖前先清空畫布?，F(xiàn)在讓我們創(chuàng)造雨滴。在編程中這種大量存在、行為相似的微小對象我們通常用“類”Class來定義。這就像先設(shè)計好一滴雨滴的藍(lán)圖。class Raindrop { float x, y; // 雨滴的位置 float speed; // 下落速度 float length; // 雨滴長度 // 構(gòu)造函數(shù)創(chuàng)建雨滴對象時初始化屬性 Raindrop() { x random(width); // 在窗口寬度范圍內(nèi)隨機(jī)一個橫坐標(biāo) y random(-500, -50); // 從屏幕上方之外開始制造陸續(xù)進(jìn)入的效果 speed random(5, 15); // 隨機(jī)速度讓雨滴有快有慢 length random(10, 30); // 隨機(jī)長度 } // 更新雨滴狀態(tài) void fall() { y speed; // 根據(jù)速度更新縱坐標(biāo)實現(xiàn)下落 // 如果雨滴落出屏幕底部就重置到頂部 if (y height) { y random(-200, -50); x random(width); } } // 顯示雨滴 void display() { stroke(138, 180, 248); // 設(shè)置線條顏色為一種淺藍(lán)色 strokeWeight(2); // 設(shè)置線條粗細(xì) line(x, y, x, y length); // 用一條線段繪制雨滴 } }讓我們拆解這個“藍(lán)圖”屬性x, y定義了雨滴頂端的位置。speed是它每幀下落的像素距離。length是雨滴的長度。使用float浮點數(shù)類型是為了更精細(xì)的控制。構(gòu)造函數(shù)Raindrop()當(dāng)我們在主程序中寫下new Raindrop()時就會調(diào)用它。它用random()函數(shù)為每個屬性賦予一個隨機(jī)初始值。y初始值為負(fù)是為了讓雨滴從屏幕外落下而不是突然全部出現(xiàn)在頂部這樣更自然。方法fall()方法負(fù)責(zé)更新邏輯每幀讓雨滴的y坐標(biāo)增加speed實現(xiàn)下落。當(dāng)雨滴完全離開屏幕y height就將其重置到屏幕上方隨機(jī)位置實現(xiàn)循環(huán)降雨。display()方法負(fù)責(zé)繪制用line()函數(shù)畫一條從(x, y)到(x, ylength)的豎線模擬雨絲。注意random(a, b)函數(shù)生成一個介于a包含和b不包含之間的隨機(jī)浮點數(shù)。width和height是Processing的內(nèi)置變量分別代表窗口的寬和高。2.2 從一滴雨到一場雨數(shù)組與集合管理有了雨滴的藍(lán)圖我們需要創(chuàng)建并管理成千上萬個雨滴實例。這里我們使用ArrayList它是比普通數(shù)組更靈活的動態(tài)數(shù)組。在主程序setup和draw之外聲明一個全局的ArrayListArrayListRaindrop rain new ArrayListRaindrop(); int totalDrops 500; // 初始雨滴數(shù)量在setup()中初始化這些雨滴void setup() { size(800, 600); for (int i 0; i totalDrops; i) { rain.add(new Raindrop()); // 創(chuàng)建500個雨滴對象并加入列表 } }最后在每幀都執(zhí)行的draw()循環(huán)中更新和繪制所有雨滴void draw() { background(0); // 用黑色清屏產(chǎn)生雨滴移動的軌跡效果 // 遍歷ArrayList中的每一個雨滴 for (Raindrop drop : rain) { drop.fall(); // 更新位置 drop.display(); // 繪制 } }運(yùn)行這段代碼你應(yīng)該能看到一場簡單的、由500條藍(lán)色線段構(gòu)成的“雨”開始落下。雖然簡陋但你已經(jīng)實現(xiàn)了一個最基礎(chǔ)的粒子系統(tǒng)所有的動態(tài)圖形、游戲特效其底層邏輯都與此類似定義對象 - 在循環(huán)中更新對象狀態(tài) - 繪制對象。3. 賦予生命物理模擬、視覺優(yōu)化與交互設(shè)計基礎(chǔ)雨景有了但它看起來還像是一些單調(diào)的線條。接下來我們要為這場雨注入“生命”讓它更逼真、更美觀甚至能與你互動。3.1 引入風(fēng)力和加速度真實的雨滴下落并非勻速且會受到風(fēng)的影響。我們修改Raindrop類增加風(fēng)速和加速度。class Raindrop { float x, y; float speed; float length; float wind; // 風(fēng)力影響水平方向移動 Raindrop() { x random(width); y random(-500, -50); speed random(5, 15); length map(speed, 5, 15, 8, 25); // 根據(jù)速度映射長度快的雨滴更長 wind random(-0.5, 0.5); // 隨機(jī)微風(fēng)可正可負(fù) } void fall() { speed 0.05; // 模擬重力加速度越落越快 y speed; x wind; // 水平方向受風(fēng)力影響 // 重置邏輯也需要考慮風(fēng)力導(dǎo)致的水平偏移 if (y height) { reset(); } // 如果被風(fēng)吹出屏幕左右兩側(cè)也重置 if (x -10 || x width 10) { reset(); } } void reset() { y random(-200, -50); x random(width); speed random(5, 10); length map(speed, 5, 10, 8, 20); wind random(-0.5, 0.5); } void display() { // 根據(jù)速度微調(diào)顏色快的雨滴更亮更白 float alpha map(speed, 5, 15, 150, 255); stroke(160, 200, 255, alpha); strokeWeight(map(speed, 5, 15, 1, 2.5)); // 快的雨滴更粗 line(x, y, x wind*2, y length); // 繪制時加入輕微傾斜與風(fēng)向一致 } }關(guān)鍵點解析加速度speed 0.05;這行代碼是物理模擬的靈魂。它讓雨滴每一幀的下落速度都增加一點點模擬重力持續(xù)作用的效果。你會發(fā)現(xiàn)雨滴越落越快更加真實。風(fēng)力wind變量在每幀更新位置時作用于x坐標(biāo)讓雨滴產(chǎn)生水平漂移。重置時也重新隨機(jī)wind模擬風(fēng)向的變化。視覺映射這里大量使用了map()函數(shù)它是Processing中極其有用的工具。map(value, start1, stop1, start2, stop2)能將value從第一個區(qū)間線性映射到第二個區(qū)間。例如length map(speed, 5, 15, 8, 25)意味著當(dāng)speed為最小值5時length為8當(dāng)speed為15時length為25中間值按比例計算。這建立了速度與長度、粗細(xì)、透明度之間的視覺關(guān)聯(lián)讓快的雨滴看起來更長、更粗、更亮極大地增強(qiáng)了視覺層次感和真實感。傾斜繪制line(x, y, x wind*2, y length)讓雨滴的末端根據(jù)風(fēng)向進(jìn)行水平偏移繪制出一條斜線比純粹的豎線更有動感。3.2 營造景深多層雨幕與模糊效果在現(xiàn)實中遠(yuǎn)處的雨看起來密集、細(xì)小、移動慢近處的雨則稀疏、粗大、移動快。我們可以通過創(chuàng)建多個具有不同屬性的雨滴層來模擬這種景深。首先我們不再使用一個ArrayList而是創(chuàng)建兩個代表遠(yuǎn)近兩層ArrayListRaindrop rainBack new ArrayListRaindrop(); // 遠(yuǎn)景雨 ArrayListRaindrop rainFront new ArrayListRaindrop(); // 近景雨在setup()中分別初始化它們賦予不同的特性void setup() { size(800, 600); // 遠(yuǎn)景雨數(shù)量多速度慢細(xì)顏色淡 for (int i 0; i 800; i) { rainBack.add(new Raindrop(true)); } // 近景雨數(shù)量少速度快粗顏色實 for (int i 0; i 200; i) { rainFront.add(new Raindrop(false)); } }我們需要修改Raindrop類的構(gòu)造函數(shù)接受一個布爾參數(shù)isBack來判斷屬于哪一層class Raindrop { ... boolean isBackground; Raindrop(boolean isBack) { isBackground isBack; if (isBack) { // 遠(yuǎn)景雨屬性 x random(width); y random(-100, height); // 甚至可以初始就在屏幕內(nèi)填滿空間 speed random(2, 6); length random(5, 15); wind random(-0.2, 0.2); } else { // 近景雨屬性 x random(width); y random(-500, -100); speed random(8, 20); length random(15, 40); wind random(-1, 1); } } ... void display() { if (isBackground) { stroke(180, 210, 255, 80); // 遠(yuǎn)景雨更淡、更透明 strokeWeight(1); } else { float alpha map(speed, 8, 20, 180, 255); stroke(150, 190, 255, alpha); // 近景雨更實 strokeWeight(map(speed, 8, 20, 1.5, 3)); } line(x, y, x wind*2, y length); } }在draw()中必須先繪制遠(yuǎn)景層再繪制近景層這是計算機(jī)圖形學(xué)中基本的圖層疊加原理void draw() { background(0); // 先畫遠(yuǎn)景 for (Raindrop drop : rainBack) { drop.fall(); drop.display(); } // 再畫近景 for (Raindrop drop : rainFront) { drop.fall(); drop.display(); } }此外我們可以為遠(yuǎn)景層添加運(yùn)動模糊效果讓快速移動的近景雨更清晰而遠(yuǎn)景更朦朧進(jìn)一步強(qiáng)化速度感。一個簡單的方法是不再用純黑色background(0)清屏而是用半透明的黑色矩形覆蓋void draw() { // 用半透明黑色填充產(chǎn)生拖尾模糊效果 fill(0, 25); // 黑色透明度25范圍0-255 noStroke(); rect(0, 0, width, height); // ... 然后繪制雨滴 }這樣每一幀都會在上一幀的畫面上疊加一層半透明的黑色之前的畫面會慢慢淡去雨滴的運(yùn)動軌跡就會留下淡淡的拖尾形成自然的運(yùn)動模糊。這個效果的透明度值這里的25需要仔細(xì)調(diào)試值太小拖尾太長會糊成一片值太大則模糊效果不明顯。3.3 添加交互讓雨景響應(yīng)你的操作靜態(tài)的雨景很美但交互能讓它變成你的作品。Processing可以輕松捕獲鼠標(biāo)和鍵盤事件。鼠標(biāo)交互 - 雨隨指動 我們可以讓雨滴受到鼠標(biāo)吸引或排斥。在Raindrop類的fall()方法中加入與鼠標(biāo)位置的互動void fall() { ... // 計算雨滴到鼠標(biāo)的距離 float distanceToMouse dist(x, y, mouseX, mouseY); if (distanceToMouse 100) { // 如果距離小于100像素 // 計算遠(yuǎn)離鼠標(biāo)的方向向量 float dx x - mouseX; float dy y - mouseY; // 歸一化并施加一個排斥力 float force 50 / distanceToMouse; // 距離越近力越大 x dx * 0.01 * force; y dy * 0.01 * force; } ... }這里用到了dist()函數(shù)計算兩點距離以及基本的向量運(yùn)算來產(chǎn)生一個遠(yuǎn)離鼠標(biāo)的力。你可以把100和0.01這些參數(shù)改成變量用鼠標(biāo)位置或按鍵來控制創(chuàng)造出“撥開雨幕”的效果。鍵盤交互 - 控制天氣 通過鍵盤按鍵來動態(tài)改變雨的參數(shù)比如雨量大小。我們在程序頂部聲明一個控制雨滴數(shù)量的變量int totalDropsFront 200; int totalDropsBack 800;在draw()循環(huán)中實時檢查按鍵void draw() { ... // 檢查按鍵動態(tài)增加或減少雨滴 if (keyPressed) { if (key || key ) { // 增加近景雨 rainFront.add(new Raindrop(false)); totalDropsFront; } else if (key - || key _) { // 減少近景雨確保列表不為空 if (rainFront.size() 10) { rainFront.remove(rainFront.size() - 1); totalDropsFront--; } } else if (key r || key R) { // 重置所有雨滴 rainFront.clear(); rainBack.clear(); for (int i 0; i totalDropsBack; i) rainBack.add(new Raindrop(true)); for (int i 0; i totalDropsFront; i) rainFront.add(new Raindrop(false)); } } ... }同時可以在屏幕上顯示當(dāng)前狀態(tài)讓交互反饋更直觀void draw() { ... // 顯示狀態(tài)信息 fill(255); noStroke(); textSize(16); text(雨滴數(shù)量 (近景): totalDropsFront, 20, 30); text(按 /- 鍵增減雨量按 R 重置, 20, 55); }4. 高級潤色與性能考量從模擬到作品當(dāng)基礎(chǔ)功能都實現(xiàn)后我們可以從藝術(shù)性和技術(shù)性兩個層面進(jìn)行深度優(yōu)化讓你的雨景從“一個程序”變成“一件作品”。4.1 視覺藝術(shù)化處理背景與氛圍純黑色的背景雖然經(jīng)典但略顯單調(diào)。我們可以繪制一個簡單的漸變背景來模擬陰雨天的天空。void draw() { // 繪制從上到下、由深灰到黑的線性漸變背景 for (int i 0; i height; i) { float inter map(i, 0, height, 0, 1); color c lerpColor(color(50, 60, 80), color(0, 10, 20), inter); stroke(c); line(0, i, width, i); } noStroke(); // ... 然后繪制半透明黑色矩形用于模糊和雨滴 fill(0, 20); rect(0, 0, width, height); ... }lerpColor()函數(shù)用于在兩個顏色之間進(jìn)行線性插值map()函數(shù)確定當(dāng)前行的插值比例。這創(chuàng)造了一個深邃的天空背景。雨滴形態(tài)多樣化并非所有雨滴都是直線。我們可以引入一個很小的概率讓部分雨滴在落地前“碎裂”模擬雨滴撞擊地面或其他物體濺起的小水花。這需要創(chuàng)建一個新的Splash濺射粒子類其生命周期短向隨機(jī)方向擴(kuò)散然后消失。由于篇幅限制這里不展開完整代碼但思路是在Raindrop的fall()方法中當(dāng)雨滴重置即“落地”時有一定概率在當(dāng)前位置生成一組Splash粒子這些粒子擁有很小的初始向上速度然后受“重力”下落并迅速淡出。光影與反射在潮濕的地面上雨滴會產(chǎn)生漣漪和反光。這是一個更高級的主題涉及到著色器Shader或像素級操作。一個取巧的方法是在底層繪制一個模糊的、上下顛倒的雨景副本并降低其透明度模擬地面上的倒影這能立刻增加場景的濕潤感和深度。4.2 性能優(yōu)化實戰(zhàn)當(dāng)你把雨滴數(shù)量增加到數(shù)千甚至上萬時可能會感到幀率下降。優(yōu)化粒子系統(tǒng)是創(chuàng)意編程的必修課。1. 離屏粒子回收與對象池 在當(dāng)前的代碼中雨滴落出屏幕后我們調(diào)用reset()方法重新初始化它。這沒有問題。但更高效的做法是使用“對象池”O(jiān)bject Pool。我們預(yù)先創(chuàng)建好一個足夠大的雨滴對象數(shù)組循環(huán)使用。當(dāng)一滴雨“死亡”出屏我們并不刪除它只是將其狀態(tài)標(biāo)記為“可用”并將其屬性重置放回池中需要新雨滴時從池中取一個“可用”的對象來重新激活。這避免了頻繁的對象創(chuàng)建和垃圾回收對性能提升巨大尤其是在JavaScriptP5.js或移動端等環(huán)境中。2. 簡化計算與繪制距離計算優(yōu)化在鼠標(biāo)交互的排斥力計算中dist()函數(shù)內(nèi)部進(jìn)行了開方運(yùn)算比較耗性能。一個常見的優(yōu)化是計算距離的平方與半徑的平方進(jìn)行比較if ((dx*dx dy*dy) 10000) { // 100*100 }這樣可以避免開方。繪制調(diào)用優(yōu)化stroke()和strokeWeight()是相對耗時的調(diào)用。如果可能將屬性相同的雨滴批量繪制。例如在display()方法中遠(yuǎn)景雨的顏色和粗細(xì)是統(tǒng)一的我們可以先在循環(huán)外設(shè)置好一次畫筆屬性然后在一個循環(huán)內(nèi)用line()繪制所有遠(yuǎn)景雨再切換屬性繪制近景雨。但這需要將位置數(shù)據(jù)存儲起來稍微增加了代碼復(fù)雜度。Processing的shape()或beginShape()/endShape()函數(shù)可以更高效地批量繪制大量頂點適合繪制數(shù)萬級別的粒子。3. 使用PGraphics離屏緩沖 對于非常復(fù)雜的、靜態(tài)或變化緩慢的背景如我們的漸變天空不需要每幀都重新計算和繪制。我們可以使用PGraphics這個類在setup()中將其繪制好然后在draw()中直接將其作為圖像貼到屏幕上這稱為離屏渲染。PGraphics sky; void setup() { size(800, 600); sky createGraphics(width, height); sky.beginDraw(); // 在sky這個PGraphics對象上繪制漸變背景 for (int i 0; i sky.height; i) { float inter map(i, 0, sky.height, 0, 1); color c lerpColor(color(50, 60, 80), color(0, 10, 20), inter); sky.stroke(c); sky.line(0, i, sky.width, i); } sky.endDraw(); // ... 初始化雨滴 } void draw() { image(sky, 0, 0); // 直接繪制預(yù)先渲染好的背景極快 // ... 后續(xù)的半透明模糊和雨滴繪制 }4.3 擴(kuò)展思路從雨到更多自然現(xiàn)象掌握了雨的核心——粒子系統(tǒng)、物理模擬、視覺分層——你就可以舉一反三模擬許多其他自然現(xiàn)象雪將雨滴的直線下落改為緩慢的、帶有隨機(jī)水平擺動的下落x random(-0.5, 0.5)將線條繪制改為繪制小的圓形或雪花狀多邊形并取消加速度讓雪花緩緩飄落?；鹧媪Ｗ泳哂邢蛏系某跛俣鹊艿健爸亓Α毕蛳吕瑫r速度會逐漸衰減。顏色從亮黃高溫過渡到暗紅低溫再到消失粒子大小也隨生命周期變化。星空/流星粒子基本靜止星星少數(shù)粒子具有極快的速度并留下軌跡流星。背景為深色粒子為亮色。煙霧/云朵粒子具有強(qiáng)烈的擴(kuò)散行為隨機(jī)運(yùn)動并且相互之間可以有非常微弱的排斥或吸引力形成不斷變化的有機(jī)形態(tài)。關(guān)鍵在于調(diào)整粒子的初始屬性位置、速度、大小、顏色、更新規(guī)則受力情況和繪制方式。你可以創(chuàng)建一個更通用的Particle類然后通過不同的參數(shù)和規(guī)則來實例化出雨、雪、火等不同系統(tǒng)。最后我想分享一點個人在創(chuàng)作這類動態(tài)模擬時的體會參數(shù)調(diào)試的過程往往比寫代碼本身花費(fèi)更多時間但也更有樂趣。沒有一個“正確”的參數(shù)值只有“看起來對”的感覺。不要害怕去瘋狂調(diào)整那些數(shù)字——重力系數(shù)、風(fēng)力范圍、透明度、映射區(qū)間——這個過程本身就是一種藝術(shù)創(chuàng)作。試著在深夜運(yùn)行你的程序配上一點環(huán)境音樂觀察屏幕上數(shù)字的舞蹈如何轉(zhuǎn)化為一種情緒。這才是Processing這類工具帶給我們的超越技術(shù)本身的價值。