成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

利用JavaScript生成一張隨機(jī)的城市地圖

wanghui / 1044人閱讀

摘要：在這里用簡(jiǎn)單的代碼就生成了一張隨機(jī)的城市地圖。產(chǎn)生一個(gè)新元素時(shí)，會(huì)被同時(shí)放入兩個(gè)數(shù)組，當(dāng)元素死亡后，將其從中移除。以上檢查交點(diǎn)的過程發(fā)生在函數(shù)中。

zz85在這里用簡(jiǎn)單的代碼就生成了一張隨機(jī)的城市地圖。生成地圖與畫一棵隨機(jī)的樹十分相似，都是先給出初始的元素，每個(gè)元素在滿足條件時(shí)會(huì)生成新的子代，最后由所有的元素共同組成了我們想要的地圖或樹。

程序中創(chuàng)建的幾個(gè)對(duì)象

地圖中的每一條道路對(duì)應(yīng)程序中的一個(gè)Boid對(duì)象，Boid對(duì)象中用兩個(gè)向量分別表示道路的起點(diǎn)和終點(diǎn)坐標(biāo)。程序中的向量是使用 Three.js 這個(gè)庫中的Vector2對(duì)象來表示的。

// 使用three.js中的向量來表示
this.start = new THREE.Vector2(x, y);
this.end = new THREE.Vector2(x, y);

Boid對(duì)象還有這些屬性：

x,y：道路上距離起點(diǎn)最遠(yuǎn)的坐標(biāo)

angle：道路的角度，會(huì)在其父代角度基礎(chǔ)上偏轉(zhuǎn)一個(gè)隨機(jī)的角度

distance：這條道路的長(zhǎng)度

dead：對(duì)象是否已經(jīng)死亡

Boid還有一個(gè)update方法，它有如下的幾個(gè)功能：

更新 x,y 坐標(biāo)

this.distance += 2;
x = this.start.x + this.distance * this.dx;
y = this.start.y + this.distance * this.dy;
this.end.set(x, y);

檢測(cè)相交情況，根據(jù)更新后的坐標(biāo)作圖。

在程序中需要?jiǎng)?chuàng)建兩個(gè)數(shù)組用于保存Boid對(duì)象，boids中存放當(dāng)前存活的元素，all_boids存放所有（包括存活和死亡）的元素。產(chǎn)生一個(gè)新元素時(shí)，會(huì)被同時(shí)放入兩個(gè)數(shù)組，當(dāng)元素死亡后，將其從boids中移除。

對(duì)于一條道路A，它會(huì)一直向前延伸，直到與另一條道路相交，這時(shí)將A的狀態(tài)設(shè)置為dead。為了檢測(cè)相交，需要對(duì)all_boids數(shù)組中的元素進(jìn)行遍歷。如果與其中的元素B出現(xiàn)了交點(diǎn)，可能是以下幾種情況：

A是B的子代

B是A的子代

B的終點(diǎn)在A上

A在延伸過程中遇上了B

這最后一種情況才是我們所需要的，將交點(diǎn)坐標(biāo)賦給A的終點(diǎn)，將A從boids數(shù)組中刪去。以上檢查交點(diǎn)的過程發(fā)生在update()函數(shù)中。

開始構(gòu)建程序

在程序開始時(shí)，首先創(chuàng)建四個(gè)元素來表示畫面的邊框。

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);

然后創(chuàng)建第一個(gè)boid，它的坐標(biāo)在畫面的中間

var b = new Boid(width/2, height/2, Math.random() * 2 * Math.PI);
boids.push(b);
all_boids.push(b);

調(diào)用setInterval函數(shù)進(jìn)入循環(huán)，首先檢查boids.length，如果當(dāng)前沒有存活的boid，則退出循環(huán)，程序完成。否則遍歷所有存活的Boid，更新其狀態(tài)。在滿足如下的幾個(gè)條件時(shí)生成子代。

沒有死亡

只有0.1的概率產(chǎn)生子代

當(dāng)前所有存活元素的數(shù)量小于50

for (i = 0; i < boids.length; i++) {

   var b = boids[i];
   b.update();

   // 產(chǎn)生子代的幾個(gè)條件：
   // 1. 沒有死亡
   // 2. 只有0.1的概率產(chǎn)生子代
   // 3. 當(dāng)前所有存活元素的數(shù)量小于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);
   }

}

最終當(dāng)存活的Boid數(shù)量為零時(shí)，程序運(yùn)行完畢，就得到了一張隨機(jī)的城市道路地圖。當(dāng)然，現(xiàn)在的地圖還只是 2D 的版本，想生成 3D 的城市，可以查看下面的參考資料中zz85的博客。

代碼及演示

我在GitHub上的代碼地址

在線的 demo

參考資料

Making of Boids and Buildings

本文原發(fā)表在我的博客上。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78456.html

相關(guān)文章

  • 使用JavaScript實(shí)現(xiàn)機(jī)器學(xué)習(xí)和神經(jīng)學(xué)網(wǎng)絡(luò)

    摘要：我會(huì)使用一個(gè)先進(jìn)的神經(jīng)網(wǎng)絡(luò)和機(jī)器學(xué)習(xí)框架這個(gè)框架，并向你們展示如何用這個(gè)框架來實(shí)現(xiàn)光學(xué)字符辨識(shí)，模擬退火法，遺傳算法和神經(jīng)網(wǎng)絡(luò)。歐氏距離我們從歐氏距離開始談起，歐氏距離是一個(gè)非常簡(jiǎn)單的概念，適用于不同的機(jī)器學(xué)習(xí)技術(shù)。 歡迎大家前往云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 下載 heaton-javascript-ml.zip - 45.1 KB 基本介紹 在本文中，你會(huì)對(duì)如何使用Ja...

    tunny 評(píng)論0 收藏0

  • 淺談前端安全

    摘要：安全問題的分類按照所發(fā)生的區(qū)域分類后端安全問題所有發(fā)生在后端服務(wù)器應(yīng)用服務(wù)當(dāng)中的安全問題前端安全問題所有發(fā)生在瀏覽器單頁面應(yīng)用頁面當(dāng)中的安全問題按照?qǐng)F(tuán)隊(duì)中哪個(gè)角色最適合來修復(fù)安全問題分類后端安全問題針對(duì)這個(gè)安全問題，后端最適合來修復(fù)前端安全 安全問題的分類 按照所發(fā)生的區(qū)域分類 后端安全問題：所有發(fā)生在后端服務(wù)器、應(yīng)用、服務(wù)當(dāng)中的安全問題 前端安全問題：所有發(fā)生在瀏覽器、單頁面應(yīng)用、...

    Cympros 評(píng)論0 收藏0

  • 淺談前端安全

    摘要：安全問題的分類按照所發(fā)生的區(qū)域分類后端安全問題所有發(fā)生在后端服務(wù)器應(yīng)用服務(wù)當(dāng)中的安全問題前端安全問題所有發(fā)生在瀏覽器單頁面應(yīng)用頁面當(dāng)中的安全問題按照?qǐng)F(tuán)隊(duì)中哪個(gè)角色最適合來修復(fù)安全問題分類后端安全問題針對(duì)這個(gè)安全問題，后端最適合來修復(fù)前端安全 安全問題的分類 按照所發(fā)生的區(qū)域分類 后端安全問題：所有發(fā)生在后端服務(wù)器、應(yīng)用、服務(wù)當(dāng)中的安全問題 前端安全問題：所有發(fā)生在瀏覽器、單頁面應(yīng)用、...

    李世贊 評(píng)論0 收藏0

  • 淺談前端安全

    摘要：安全問題的分類按照所發(fā)生的區(qū)域分類后端安全問題所有發(fā)生在后端服務(wù)器應(yīng)用服務(wù)當(dāng)中的安全問題前端安全問題所有發(fā)生在瀏覽器單頁面應(yīng)用頁面當(dāng)中的安全問題按照?qǐng)F(tuán)隊(duì)中哪個(gè)角色最適合來修復(fù)安全問題分類后端安全問題針對(duì)這個(gè)安全問題，后端最適合來修復(fù)前端安全 安全問題的分類 按照所發(fā)生的區(qū)域分類 后端安全問題：所有發(fā)生在后端服務(wù)器、應(yīng)用、服務(wù)當(dāng)中的安全問題 前端安全問題：所有發(fā)生在瀏覽器、單頁面應(yīng)用、...

    alexnevsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wanghui

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<