如何用Processing做Morphing動畫

好多人都不知道看PDE和官網的example，花錢買書看，有些作者寫書一點心都不走，無力吐槽

這篇文章講一下PDE的example里的一個例子Morph

/** * Morph. * 定點差值的形式把 * 一個形狀變形到另外一個形狀 * *///兩個數組存儲兩個形狀的定點，假設頂點數量一致ArrayList<PVector> circle = new ArrayList<PVector>();ArrayList<PVector> square = new ArrayList<PVector>();// 第三個數組保存morphing過程中需要被計算的頂點ArrayList<PVector> morph = new ArrayList<PVector>();// morphing的開關boolean state = false;void setup() { size(640, 360); //窗口中心點創建一個圓 for (int angle = 0; angle < 360; angle += 9) { //考慮到圓的路徑，沒從. PVector v = PVector.fromAngle(radians(angle-135)); v.mult(100); circle.add(v); // 第三方數組填滿 morph.add(new PVector()); } // 正方形就是四條直線上的一些頂點 //上邊 for (int x = -50; x < 50; x += 10) { square.add(new PVector(x, -50)); } // 右邊 for (int y = -50; y < 50; y += 10) { square.add(new PVector(50, y)); } // 下邊 for (int x = 50; x > -50; x -= 10) { square.add(new PVector(x, 50)); } // 左邊 for (int y = 50; y > -50; y -= 10) { square.add(new PVector(-50, y)); }}void draw() { background(51); // 每一個頂點距離目標頂點保持一定距離 float totalDistance = 0; // 挨個處理每一個頂點 for (int i = 0; i < circle.size(); i++) { PVector v1; // 正在插值進行形變 if (state) { v1 = circle.get(i); } else { v1 = square.get(i); } // 計算出要繪製的頂點 PVector v2 = morph.get(i); // 插值到目標頂點 v2.lerp(v1, 0.1); // 檢查距離目標頂點還有多少距離 totalDistance += PVector.dist(v1, v2); } // 如果頂點都到其目標頂點，再進行下一次形變 if (totalDistance < 0.1) { state = !state; } translate(width/2, height/2); strokeWeight(4); //把形變結果繪製出來 beginShape(); noFill(); stroke(255); for (PVector v : morph) { vertex(v.x, v.y); } endShape(CLOSE);}

歡迎各路程序員，交互設計師

加入演算法藝術實驗室

簡歷發送： [email protected]

聯繫 wx： Tealeaf