p5.js臨摹動態(tài)圖形的方法
更新時(shí)間：2019年10月23日 11:46:49 作者：覆盆子酸奶
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹動態(tài)圖形的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了p5.js臨摹動態(tài)圖形的具體代碼，供大家參考，具體內(nèi)容如下
一、描述所臨摹圖像的規(guī)律
1、圖像由多個(gè)閃光圓點(diǎn)和圓點(diǎn)之間的連線組成
2、圓點(diǎn)的運(yùn)動軌跡是隨機(jī)的
3、圓點(diǎn)之間靠近時(shí)會產(chǎn)生連線，并且相互靠近的圓點(diǎn)會顏色加深
二、代碼實(shí)現(xiàn)
圓點(diǎn)之間產(chǎn)生連線，隨機(jī)生成線條和運(yùn)動軌跡：
//隨機(jī)生成s.n條線位置信息
for (var t = [], p = 0; s.n > p; p++) {
var h = random() * r, //隨機(jī)位置
g = random() * n,
q = 2 * random() - 1, //隨機(jī)運(yùn)動方向
d = 2 * random() - 1;
t.push({
x: h,
y: g,
xa: q,
ya: d,
max: 6000 //圓點(diǎn)靠近產(chǎn)生線條的距離
})
}
繪制閃光圓點(diǎn)：
//由三個(gè)透明度不同的圓組成 context.beginPath(); context.arc(r.x,r.y,1.7,0*Math.PI,2*Math.PI); context.fillStyle="#FF1493"; context.fill(); context.beginPath(); context.arc(r.x,r.y,6,0*Math.PI,2*Math.PI); context.fillStyle='rgba(255,20,147,0.3)'; context.fill(); context.beginPath(); context.arc(r.x,r.y,10,0*Math.PI,2*Math.PI); context.fillStyle='rgba(255,20,147,0.1)'; context.fill();
效果圖
因?yàn)閷τ谂R摹動態(tài)圖像仍有很多困惑的地方，無法實(shí)現(xiàn)多個(gè)圓點(diǎn)相互靠近顏色加深，非常遺憾最終不能臨摹出完全一樣的圖像。
三、拓展
增加交互性，使得線條能夠附著到鼠標(biāo)上，跟隨鼠標(biāo)移動。
鼠標(biāo)靠近圓點(diǎn)時(shí)，圓點(diǎn)會加速運(yùn)動，
//存儲鼠標(biāo)位置，離開的時(shí)候，釋放當(dāng)前位置信息
window.onmousemove = function(i) {
i = i || window.event, f.x = i.clientX, f.y = i.clientY
},
window.onmouseout = function() {
f.x = null, f.y = null
};
for (v = 0; v < w.length; v++) {//從下一個(gè)點(diǎn)開始
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
//與鼠標(biāo)靠近到一定距離的時(shí)候圓點(diǎn)加速（x.max/2<y<x.max)
y < x.max && (x == current_point && y >= x.max / 2
&& (i.x -= 0.03 * B, i.y -= 0.03 * z),
...
)}
結(jié)果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
分包指的是把一個(gè)完整的小程序項(xiàng)目,按照需求劃分為不同的子包, 在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載,下面這篇文章主要給大家介紹了關(guān)于微信小程序分包操作的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript使用多線程實(shí)現(xiàn)一個(gè)大文件上傳
這篇文章主要為大家詳細(xì)介紹了JavaScript使用多線程實(shí)現(xiàn)一個(gè)大文件上傳的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-11-11
JavaScript裝飾器的實(shí)現(xiàn)原理詳解
最近在使用TS+Vue的開發(fā)模式，發(fā)現(xiàn)項(xiàng)目中大量使用了裝飾器，看得我手足無措，今天特意研究一下實(shí)現(xiàn)原理，方便自己理解這塊知識點(diǎn)，有需要的小伙伴也可以參考一下2022-10-10
在javascript前端開發(fā)階段經(jīng)常會遇到this，閉包，原型鏈知識，那么大家對這三種的基本知識理解嗎？今天小編就帶領(lǐng)大家一起學(xué)習(xí)this，閉包，原型鏈的知識，感興趣的朋友一起看看吧2016-09-09
JavaScript在多瀏覽器下for循環(huán)的使用方法
JavaScript語言在不同的瀏覽器的下有存在細(xì)微的差異，但不像DOM操作差異那么大，現(xiàn)在為大家列舉出其中一個(gè)"for循環(huán)"的差異,并介紹如何有效的解決這種差異2012-11-11
如何理解JS函數(shù)防抖和函數(shù)節(jié)流
函數(shù)防抖和函數(shù)節(jié)流都是對函數(shù)進(jìn)行特殊的設(shè)置，減少該函數(shù)在某一時(shí)間段內(nèi)頻繁觸發(fā)帶來的副作用。二者只是采用的設(shè)置方式和原理不一樣，其最終的目的是一樣的。2021-05-05
JavaScript判斷變量數(shù)據(jù)類型的常見方法小結(jié)
在JavaScript開發(fā)中,了解和判斷變量的數(shù)據(jù)類型是編寫健壯代碼的基礎(chǔ),變量的類型可以在運(yùn)行時(shí)改變,這為開發(fā)者帶來了靈活性的同時(shí)也增加了復(fù)雜性,本文將深入探討幾種常見的判斷變量類型的技巧,并結(jié)合實(shí)際案例進(jìn)行分析,需要的朋友可以參考下2024-12-12
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1...2007-02-02
讓textarea自動調(diào)整大小的js代碼，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了JavaScript編寫頁面半透明遮罩效果的簡單示例,包括一個(gè)全屏幕div層遮蓋的方法展示,需要的朋友可以參考下2016-05-05