如何從線條藝術(shù)到DIY實現(xiàn)一個網(wǎng)狀體Net的js庫

本篇文章給大家分享的是有關(guān)如何從線條藝術(shù)到DIY實現(xiàn)一個網(wǎng)狀體Net的js庫，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

今天無意中看到一個可視化作品：

WHAT MADE ME?

INTERACTIVE PUBLIC INSTALLATION

Most Original Exhibit Award at the Birmingham Made Me Design Awards 2012.

該作品圍繞信息可視化的概念，以大型復(fù)雜的數(shù)據(jù)圖形式，由游客自己生成的方式進(jìn)行展示，是一個集信息可視化、交互式體驗的展覽裝置。

通過向游客詢問五個簡單的問題來探索伯明翰人的畫像，這5個問題分別是：

什么讓你思考？

什么讓你創(chuàng)造？

什么讓你生氣？

什么讓你快樂？

什么讓你改變？

每個問題將對應(yīng)不同的顏色，可以通過連接相關(guān)的單詞和彩色的線條來回答問題。

幾百個選項在網(wǎng)格中按字母順序顯示，給參與者多種可選的答案。

這種設(shè)計形式是利用彩色直線條，形成疏密變化，達(dá)到良好的視覺效果。

直線條這種設(shè)計元素，被許多設(shè)計師所喜愛，比如用線條串聯(lián)文字跟圖案：

還有，線描插畫：

更有創(chuàng)意的圖標(biāo)：

還有ACELAND人工智能設(shè)計師，創(chuàng)作的gif圖：

設(shè)計師對線條對運用是嫻熟、喜愛、富有創(chuàng)造力的。

這種形式也被運用在了網(wǎng)頁。

在這里，我們動手實現(xiàn)一個，并稍微拓展下，比如，可以是彩色線條：

實現(xiàn)思路：

• 在畫布范圍生成一定數(shù)量的粒子，
  

• 用線連接粒子，

• 讓粒子保持在畫布內(nèi)移動。

動手敲代碼：

1 簡單設(shè)置個css樣式及canvas標(biāo)簽：

在body標(biāo)簽里，寫個canvas標(biāo)簽。

2 封裝成JS庫

我希望封裝成一個Net構(gòu)造函數(shù)，調(diào)用的時候，通過傳入canvas，以及一些參數(shù)配置，即可生成一個Net。

可配的參數(shù)：

粒子的數(shù)量，

粒子移動速度，

粒子活動范圍，

線條顏色，

粒子顏色，

背景顏色等等。

下面是一些方法的設(shè)計：

整個邏輯分為2大部分，init及move：

init：

1 通過createPoints，根據(jù)傳入的option參數(shù)，生成粒子群；

2 通過clear，初始化canvas，比如設(shè)置背景色，清除畫布上的其他元素；

3 通過drawPoints繪制粒子群；

4 connectPoints連接粒子，形成網(wǎng)狀結(jié)構(gòu)；

結(jié)果如下：

move：

5 先用clear重設(shè)畫布

6 通過movePoints移動粒子群；

7 再次通過connectPoints連接粒子，形成網(wǎng)狀結(jié)構(gòu)；

連續(xù)調(diào)用move之后，就可以形成一下效果：

其中，movePoints有2點需要注意，我們需要通過moveArea及movePoint，兩個方法移動每個粒子，并判斷粒子的移動方向，更新完粒子的位置之后，再次調(diào)用drawPoints繪制出所有粒子。

moveArea是判斷粒子移動方向的：

movePoint根據(jù)移動方向，更新粒子的坐標(biāo)：

3 升級版本：

  +漸變色  

修改connectPoints方法里的顏色，如下：

  +線寬變化  

 同樣，修改connectPoints方法，增加一個中點的坐標(biāo)：

繪制直線變?yōu)槔L制一個三角形：

測試下效果，

new Net(canvas,{num:2});

如下，發(fā)現(xiàn)中點偏離連線太遠(yuǎn)，可以調(diào)整mx及my的參數(shù)，使其幅度更小。

調(diào)整后，再次試下：

可以達(dá)到下面的效果：

把線改粗點，換幾個顏色試試

  +鼠標(biāo)的交互事件  

相當(dāng)于以鼠標(biāo)位置的x,y坐標(biāo)為圓心，固定或隨機(jī)值為半徑重新創(chuàng)建一個粒子，并且push進(jìn)我們之前創(chuàng)建好的粒子群里。

給canvas綁定鼠標(biāo)監(jiān)聽事件：

canvas.addEventListener('click', function(e) {

let x=e.clientX,

     y=e.clientY;

net.addPoint(x,y);

 } );

這樣就可以隨意增加粒子啦。

  +多種線條顏色   

在createPoints的時候，給不同的point設(shè)置不同的線條顏色，然后在connectPoints的時候，根據(jù)point的線條顏色，畫出線條即可。

以上就是如何從線條藝術(shù)到DIY實現(xiàn)一個網(wǎng)狀體Net的js庫，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。