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

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

洮北網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),洮北網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為洮北上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的洮北做網(wǎng)站的公司定做！

今天無意中看到一個(gè)可視化作品：

WHAT MADE ME?

INTERACTIVE PUBLIC INSTALLATION

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

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

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

什么讓你思考？

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

什么讓你生氣？

什么讓你快樂？

什么讓你改變？

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

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

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

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

還有，線描插畫：

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

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

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

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

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

實(shí)現(xiàn)思路：

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

• 用線連接粒子，

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

動(dòng)手敲代碼：

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

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

2 封裝成JS庫

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

可配的參數(shù)：

粒子的數(shù)量，

粒子移動(dòng)速度，

粒子活動(dòng)范圍，

線條顏色，

粒子顏色，

背景顏色等等。

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

整個(gè)邏輯分為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移動(dòng)粒子群；

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

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

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

moveArea是判斷粒子移動(dòng)方向的：

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

3 升級(jí)版本：

  +漸變色  

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

  +線寬變化  

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

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

測(cè)試下效果，

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

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

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

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

把線改粗點(diǎn)，換幾個(gè)顏色試試

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

相當(dāng)于以鼠標(biāo)位置的x,y坐標(biāo)為圓心，固定或隨機(jī)值為半徑重新創(chuàng)建一個(gè)粒子，并且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的時(shí)候，給不同的point設(shè)置不同的線條顏色，然后在connectPoints的時(shí)候，根據(jù)point的線條顏色，畫出線條即可。

以上就是如何從線條藝術(shù)到DIY實(shí)現(xiàn)一個(gè)網(wǎng)狀體Net的js庫，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：如何從線條藝術(shù)到DIY實(shí)現(xiàn)一個(gè)網(wǎng)狀體Net的js庫
文章出自：http://muchs.cn/article6/gjgcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、Google、全網(wǎng)營(yíng)銷推廣、網(wǎng)站排名、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)