▼

我要做什么？

Sutcliffe Pentagons！一個奇異的分形怪咖——

繪制一個普通的五邊形，然后找出其五邊中每一邊的中點并過這些點繪制垂直于此邊的線段，而這些線段的末端則連接生成另一個五邊形。我打個草圖：

在這樣做的同時，該形狀的其余部分也最終被細分為更多的五邊形。這意味著在每個五邊形內有六個副五邊形。在其中的每一個中，又有六個子五邊形向下重復……

接著，怪咖出現了。

▼
###我怎么做的？
Do you find yourself overly thrilled by the mathematics of this?

打開你的草圖—— Processing， 開工吧！！！
####Step 1: Drawing a pentagon using rotation
畫一個普通的五邊形，你會怎么做？

我選用的是一種較通用的方式：

圍繞屏幕中心旋轉360度，并以特定角度推算頂點。例如，如果每72度繪制一個點，那我們就會得到一個五角形。

// 根類 class Root {PVector[] pointArr; // 頂點的數組Branch rootBranch;Root() {pointArr = new PVector[sideNum]; // 五邊形時，sideNum=5int count = 0;for (float i = 0; i<360; i+=360/sideNum) {float x = width/2 + (400 * cos(radians(i)));float y = height/2 + (400 * sin(radians(i)));if (count < sideNum) { // 保證數組長度pointArr[count] = new PVector(x, y);}count++;}rootBranch = new Branch(0, pointArr);}void display() {stroke(strokeHue, 70, 100, 100);rootBranch.display();} }

####Step 2: Functions to calculate the midpoints of a set of vertices
根發芽長成了枝丫。

我們需要一個枝丫類。枝丫從根那里得到生長的消息，它開始猥瑣發育了。

在這里，我們會接收五邊形每個頂點的坐標，用以求得中點。

// 枝丫類 class Branch {int level, num;PVector[] outerPoints = {};PVector[] midPoints = {};PVector[] projPoints = {};Branch[] myBranches = {};Branch(int lev, PVector[] points) {level = lev;outerPoints = points;midPoints = calcMidPoints();projPoints = calcStrutPoints();if ((level+1) < maxLevels) {Branch childBranch = new Branch(level+1, projPoints);myBranches = (Branch[])append(myBranches, childBranch);for (int k = 0; k < outerPoints.length; k++) {int nextk = k-1;if (nextk < 0) { nextk += outerPoints.length;}PVector[] newPoints = { projPoints[k], midPoints[k], outerPoints[k], midPoints[nextk], projPoints[nextk] };childBranch = new Branch(level+1, newPoints);myBranches = (Branch[])append(myBranches, childBranch);}}}// 得到每邊中點的數組PVector[] calcMidPoints() {PVector[] mpArray = new PVector[outerPoints.length];for (int i = 0; i < outerPoints.length; i++) {int nexti = (i+1)%outerPoints.length;PVector thisMP = calcMidPoint(outerPoints[i], outerPoints[nexti]);mpArray[i] = thisMP;}return mpArray;}// 計算每邊的中點PVector calcMidPoint(PVector end1, PVector end2) {return new PVector((end1.x + end2.x)/2, (end1.y + end2.y)/2);}void display() {strokeWeight(5-level);// 繪制外界形狀for (int i = 0; i < outerPoints.length; i++) { //int nexti = i+1;//if (nexti == outerPoints.length) { // 首尾相連// nexti = 0;//}int nexti = (i+1)%outerPoints.length; // 首尾相連// 連接相鄰兩個點line(outerPoints[i].x, outerPoints[i].y, outerPoints[nexti].x, outerPoints[nexti].y);}// 繪制并連接中點與對應的枝點//for (int j = 0; j < midPoints.length; j++) {//line(midPoints[j].x, midPoints[j].y, projPoints[j].x, projPoints[j].y);//ellipse(midPoints[j].x, midPoints[j].y, 15, 15);//ellipse(projPoints[j].x, projPoints[j].y, 15, 15);//}// 繪制子枝for (int k = 0; k < myBranches.length; k++) {myBranches[k].display();}} }

####Step 3: Functions to extend the midpoints toward the opposite points
毫無疑問，我們必須給定枝丫能夠延伸的長度。

這時候，我定義了一個全局變量—— strutFactor 來指定希望的枝丫跨度的比例：

float strutFactor=0.2; // 生長常數

你需要的是從中點延伸出來支柱末端的坐標集。可能你會想到利用其相對于側頂點的角度來完成這件事。我覺得我們可以改為使用中點相對的頂點來定位。

我們將下面的兩個方法加入到 Branch 類（枝丫類）。

// 得到每個中點對應的枝點的數組PVector[] calcStrutPoints() {PVector[] strutArray = new PVector[midPoints.length];for (int i=0; i<midPoints.length; i++) {int nexti = (i+3)%midPoints.length; // 每一邊中點相對的頂點PVector thisSP = calcProjPoint(midPoints[i], outerPoints[nexti]);strutArray[i] = thisSP;}return strutArray;}// 計算中點對應的枝點PVector calcProjPoint(PVector mp, PVector op) {float px, py;px = mp.x + (op.x - mp.x) * strutFactor;py = mp.y + (op.y - mp.y) * strutFactor;return new PVector(px, py);}

為了運行方便，真正起到遞歸作用的代碼，我早已加入到 Branch 類。

if ((level+1) < maxLevels) {Branch childBranch = new Branch(level+1, projPoints);myBranches = (Branch[])append(myBranches, childBranch);for (int k = 0; k < outerPoints.length; k++) {int nextk = k-1;if (nextk < 0) { nextk += outerPoints.length;}PVector[] newPoints = { projPoints[k], midPoints[k], outerPoints[k], midPoints[nextk], projPoints[nextk] };childBranch = new Branch(level+1, newPoints);myBranches = (Branch[])append(myBranches, childBranch);}}

根生枝，枝生根。

####Step 4: Varying the strut length of a Sutcliffe Pentagon
主標簽實現了圖形的繪制與變幻。strutFactor 的值范圍在 - 0.5~1.0。

int sideNum = 5; // 邊數 float strutFactor=0.2; // 生長常數 int maxLevels = 5; float strutNoise; Root pentagon;void setup() {fullScreen();smooth();strutNoise = random(10);pentagon = new Root(); }void draw() {background(255);strutNoise += 0.01;strutFactor = ((noise(strutNoise) * 3) - 1)/2;pentagon.display(); }

▼
###我學到了什么？
不是所有現實事物都受益于某種結構化的規則；有一點混沌漂移才會更好。如果你有一種允許這種自由的工作方式，能夠通過靈感把一種想法變成另一種想法，那么你將不可避免地踏足一些更加有趣的領域。

Recursive fractal constructions are at their root an idea stolen from natural organization. Despite how it may look when viewed through a screen, we don’t live in a digital world. Our reality is stubbornly analog: it doesn’t fit into distinctly encodable states. It’s an intricate, gnarly, and indefinite place. If we want to use digital tools to create art, which somehow has to reflect our crazy, chaotic existence, we need to allow imperfection and unpredictability into the equation. But, as I hope I’ve shown, there is room for the organic within the mechanical, and programming isn’t just about efficiency and order. Our computing machines, which may only be capable of producing poor imitations of life, are tapping a computational universality that the natural world shares.

####Last…
附上一張【Sutcliffe Pentagons】壁紙。

####相關資源：

• 學習文獻
• 源代碼下載
• 參考博客

總結

以上是生活随笔為你收集整理的【Sutcliffe Pentagons】奇幻派的漂流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。