動效乾貨 | 粒子附著球面（Processing 3D矩陣）

來自專欄動效乾貨21 人贊了文章

又一個算不上高級的Processing實例，使用了3D矩陣旋轉的小技巧。

先看完成的效果：

一、我想做一個粒子附著在球面，並且旋轉的效果。但有一個點非常重要——球面是不存在的。我怎麼獲得粒子在假想的球面的「位置」。同樣，Google 告訴我一個公式：

x = r * sin(a) * cos(b)

y = r * cos(a) * cos(b)

z = r * sin(b)

我完全不知道這三個坐標，以及這兩個角度對應的到底哪是哪。但是經驗告訴我，只要把公式用在正確的地方，系統會 Work，不管我能不能知道裡面的細節。

二、建立一個粒子類。

如果看過之前的實例分享，應該知道「類」是什麼，以及怎麼用了。這裡略過太初級的內容，直接介紹這個類的結構：

嗯……

直接上全部代碼吧，其實只要知道 google 來的那個公式怎麼用，其他的都太簡單了。

三、以下就是全部。

int num = 50; //粒子數量ArrayList<Particle> particles;PVector Rotate;Particle tempP;void setup(){ size(1080,680,P3D); //使用P3D，這樣才能使用下面矩形旋轉的功能 colorMode(HSB); Rotate = new PVector(); particles = new ArrayList<Particle>(); for(int i = 0; i < num; i++){ particles.add( new Particle() ); } background(255);}void draw(){ // 下面3行製造畫面的殘影效果。如果不用殘影的話就是直接畫個background noStroke(); fill(255, 18); rect(0,0,width,height); //下面給矩陣計算3個軸向的旋轉，根據時間來變化 Rotate = new PVector(frameCount*0.003, frameCount*0.04, frameCount*0.03); pushMatrix(); translate(width/2, height/2);//這個……不用我在這裡解釋了吧，官方教程可以2分鐘看懂。看懂這行再看下面的內容吧 rotateX(Rotate.x);//把上面計算出來的旋轉值分配進去 rotateY(Rotate.y); rotateZ(Rotate.z); //刷新粒子類 for(int i = particles.size()-1; i >= 0; i--){ tempP = particles.get(i); tempP.move(); } popMatrix();}class Particle{ PVector pos,radian; float dis,h,s,b; float _weight = 18;//粒子的半徑 Particle(){ //隨機給每個粒子定義它在假想中的球體上的弧度，供下面去算具體的坐標 radian = new PVector(random(TWO_PI), random(TWO_PI)); pos = new PVector(); dis = 160;//假想球體的半徑 } void move(){ update(); display(); } void update(){ //這就是Google上的公式，通過隨機出來的弧度獲得其具體坐標 pos.x = dis*sin(radian.x)*cos(radian.y); pos.y = dis*cos(radian.x)*cos(radian.y); pos.z = dis*sin(radian.y); } void display(){ //隨便寫了點顏色變化，感興趣的可以看看 h = noise(radian.x*0.3, frameCount*0.012)*95 + 130 + map(mouseX, 0 ,width, -20, 20); noStroke(); fill(h,85,255); //下面是用 sphere() 來畫粒子，不能像 point() 一樣直接指定坐標，sphere()只能在原點畫。所以在這裡要臨時移動一下矩陣，畫完再把矩陣挪回去。 translate(pos.x,pos.y,pos.z); sphere(_weight); translate(-pos.x,-pos.y,-pos.z); }}

It works!

網路上有無數的數學公式可以引用，即使你完全搞不懂它們是怎麼來的（攤手

————————————————————————

這幾個月太忙，好久沒更了……

歡迎投稿……