資訊專欄INFORMATION COLUMN
摘要：在這里用簡單的代碼就生成了一張隨機的城市地圖。產生一個新元素時，會被同時放入兩個數組，當元素死亡后，將其從中移除。以上檢查交點的過程發生在函數中。
zz85在這里用簡單的代碼就生成了一張隨機的城市地圖。生成地圖與畫一棵隨機的樹十分相似，都是先給出初始的元素，每個元素在滿足條件時會生成新的子代，最后由所有的元素共同組成了我們想要的地圖或樹。
程序中創建的幾個對象地圖中的每一條道路對應程序中的一個Boid對象，Boid對象中用兩個向量分別表示道路的起點和終點坐標。程序中的向量是使用 Three.js 這個庫中的Vector2對象來表示的。
// 使用three.js中的向量來表示 this.start = new THREE.Vector2(x, y); this.end = new THREE.Vector2(x, y);
Boid對象還有這些屬性：
x,y：道路上距離起點最遠的坐標
angle：道路的角度，會在其父代角度基礎上偏轉一個隨機的角度
distance：這條道路的長度
dead：對象是否已經死亡
Boid還有一個update方法，它有如下的幾個功能：
更新 x,y 坐標
this.distance += 2;
x = this.start.x + this.distance * this.dx;
y = this.start.y + this.distance * this.dy;
this.end.set(x, y);
檢測相交情況，根據更新后的坐標作圖。
在程序中需要創建兩個數組用于保存Boid對象，boids中存放當前存活的元素，all_boids存放所有（包括存活和死亡）的元素。產生一個新元素時，會被同時放入兩個數組，當元素死亡后，將其從boids中移除。
對于一條道路A，它會一直向前延伸，直到與另一條道路相交，這時將A的狀態設置為dead。為了檢測相交，需要對all_boids數組中的元素進行遍歷。如果與其中的元素B出現了交點，可能是以下幾種情況：
A是B的子代
B是A的子代
B的終點在A上
A在延伸過程中遇上了B
這最后一種情況才是我們所需要的，將交點坐標賦給A的終點，將A從boids數組中刪去。以上檢查交點的過程發生在update()函數中。
開始構建程序在程序開始時，首先創建四個元素來表示畫面的邊框。
var b1 = new Boid(); var b2 = new Boid(); var b3 = new Boid(); var b4 = new Boid(); b1.dead = b2.dead = b3.dead = b4.dead = true; b1.start.set(0, 0); b2.start.set(width, 0); b3.start.set(width, height); b4.start.set(0, height); b1.end = b2.start; b2.end = b3.start; b3.end = b4.start; b4.end = b1.start; all_boids.push(b1); all_boids.push(b2); all_boids.push(b3); all_boids.push(b4);
然后創建第一個boid，它的坐標在畫面的中間
var b = new Boid(width/2, height/2, Math.random() * 2 * Math.PI); boids.push(b); all_boids.push(b);
調用setInterval函數進入循環，首先檢查boids.length，如果當前沒有存活的boid，則退出循環，程序完成。否則遍歷所有存活的Boid，更新其狀態。在滿足如下的幾個條件時生成子代。
沒有死亡
只有0.1的概率產生子代
當前所有存活元素的數量小于50
for (i = 0; i < boids.length; i++) {
var b = boids[i];
b.update();
// 產生子代的幾個條件：
// 1. 沒有死亡
// 2. 只有0.1的概率產生子代
// 3. 當前所有存活元素的數量小于50
if (!b.dead && Math.random()>0.9 && boids.length < 50) {
var child = new Boid(b.end.x, b.end.y,
b.angle + Math.PI * (Math.random() > 0.5 ? 0.5 : -0.5));
child.parent = b;
// child.fillStyle = getRndColor();
boids.push(child);
all_boids.push(child);
}
}
最終當存活的Boid數量為零時，程序運行完畢，就得到了一張隨機的城市道路地圖。當然，現在的地圖還只是 2D 的版本，想生成 3D 的城市，可以查看下面的參考資料中zz85的博客。
代碼及演示我在GitHub上的代碼地址
在線的 demo
參考資料Making of Boids and Buildings
本文原發表在我的博客上。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78456.html
摘要：我會使用一個先進的神經網絡和機器學習框架這個框架，并向你們展示如何用這個框架來實現光學字符辨識，模擬退火法，遺傳算法和神經網絡。歐氏距離我們從歐氏距離開始談起，歐氏距離是一個非常簡單的概念，適用于不同的機器學習技術。 歡迎大家前往云+社區，獲取更多騰訊海量技術實踐干貨哦~ 下載 heaton-javascript-ml.zip - 45.1 KB 基本介紹 在本文中，你會對如何使用Ja...
摘要：安全問題的分類按照所發生的區域分類后端安全問題所有發生在后端服務器應用服務當中的安全問題前端安全問題所有發生在瀏覽器單頁面應用頁面當中的安全問題按照團隊中哪個角色最適合來修復安全問題分類后端安全問題針對這個安全問題，后端最適合來修復前端安全 安全問題的分類 按照所發生的區域分類 后端安全問題：所有發生在后端服務器、應用、服務當中的安全問題 前端安全問題：所有發生在瀏覽器、單頁面應用、...
閱讀 1905·2021-11-25 09:43
閱讀 1405·2021-11-22 14:56
閱讀 3280·2021-11-22 09:34
閱讀 2010·2021-11-15 11:37
閱讀 2255·2021-09-01 10:46
閱讀 1396·2019-08-30 15:44
閱讀 2293·2019-08-30 13:15
閱讀 2393·2019-08-29 13:07
