基于p5.js實現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
實現(xiàn)效果
項目地址：傳送門
基于p5.js實現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
應(yīng)用場景
本代碼利用p5.js庫，創(chuàng)建了一個交互式的色彩輪和餅狀圖可視化界面。它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景，如設(shè)計、數(shù)據(jù)分析和教育領(lǐng)域。
基本功能
該代碼主要實現(xiàn)了以下功能：
- **色彩輪：**動態(tài)生成一個圓形色彩輪，展示色相、飽和度和亮度變化。
- **餅狀圖：**基于提供的數(shù)字數(shù)據(jù)，生成一個交互式的餅狀圖，展示數(shù)據(jù)比例分布。
功能實現(xiàn)步驟及關(guān)鍵代碼分析
1. 加載p5.js庫
首先，使用loadJavascript函數(shù)異步加載p5.js庫，確保其在程序執(zhí)行前已加載完成。
const loadJavascript = (jsUrl) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.type = 'text/javascript'
script.onload = () => resolve('')
script.onerror = (err) => reject(err)
script.src = jsUrl
document.body.appendChild(script)
})
}
2. 定義p5.js草圖
在onMounted鉤子中，定義一個p5.js草圖，該草圖將渲染到#container元素中。
const sketch = (s) => {
// ...
}
3. 設(shè)置畫布和顏色模式
在setup函數(shù)中，設(shè)置畫布大小、顏色模式和角度模式。
s.setup = () => {
s.createCanvas(400, 400)
s.colorMode(s.HSB)
s.angleMode(s.DEGREES)
}
4. 繪制色彩輪
使用colorWheel函數(shù)，根據(jù)指定的半徑和角度繪制一個色彩輪。
s.colorWheel = (x, y, rad) => {
// ...
for (let a = 0; a < 360; a += 10) {
s.stroke(a, 150, 200) //hue based on a
s.line(x, y, x + rad * s.cos(a), y + rad * s.sin(a))
}
}
5. 繪制餅狀圖
使用pieChartPop函數(shù)，根據(jù)提供的數(shù)字數(shù)據(jù)繪制一個餅狀圖。
s.pieChartPop = (x, y) => {
// ...
let startValue = 0
let range = 0
// ...
s.drawSlice(fColor, x, y, 200, startValue, startValue + range)
startValue += range
// ...
}
6. 繪制餅狀圖切片
使用drawSlice函數(shù)，根據(jù)指定的顏色、位置、直徑和百分比范圍繪制一個餅狀圖切片。
s.drawSlice = (fColor, x, y, d, percent1, percent2) => {
s.fill(fColor)
s.arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360)
}
7. 初始化p5.js實例
使用new p5函數(shù)，初始化一個p5.js實例，并將草圖附加到#container元素中。
new p5(sketch, 'container')
總結(jié)與展望
開發(fā)這段代碼的過程中，我學習到了如何使用p5.js庫創(chuàng)建交互式的可視化效果。該代碼可以根據(jù)不同的數(shù)據(jù)和參數(shù)進行定制，以滿足各種可視化需求。
未來，該卡片功能可以進一步拓展和優(yōu)化，例如：
**數(shù)據(jù)綁定：**將餅狀圖的數(shù)據(jù)綁定到外部數(shù)據(jù)源，實現(xiàn)實時更新。
**交互性增強：**允許用戶與餅狀圖交互，如選擇切片或查看詳細信息。
**移動設(shè)備優(yōu)化：**優(yōu)化代碼以適應(yīng)移動設(shè)備，實現(xiàn)跨平臺兼容性。
到此這篇關(guān)于基于p5.js實現(xiàn)色彩輪和餅狀圖的動態(tài)可視化的文章就介紹到這了,更多相關(guān)p5.js實現(xiàn)色彩輪和餅狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在非IE，事件對象Propagation之間的處理函數(shù)，或同dom節(jié)點觸發(fā)的多個函數(shù)之間的Event物件是全等的。與綁定形式[addEventListener/DOM0]無關(guān)。2011-04-04
這篇文章主要介紹了JS給超鏈接加確認對話框的方法,涉及javascript操作對話框的技巧,需要的朋友可以參考下2015-02-02
相信有C++、C#或Java等編程經(jīng)驗的各位，對于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08
JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
淺析showModalDialog數(shù)據(jù)緩存問題(用禁止瀏覽器緩存解決)
在使用showModalDialog彈出窗口時，顯示的數(shù)據(jù)是上次修改前的數(shù)據(jù)，這是因為默認情況下頁面保存了緩存，所以顯示的數(shù)據(jù)并不是修改后的情況2013-07-07
最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07
利用Javascript實現(xiàn)簡單的轉(zhuǎn)盤抽獎
這篇文章主要介紹了利用Javascript實現(xiàn)的簡單的轉(zhuǎn)盤抽獎，文中分享了兩種抽獎效果，一種是默認轉(zhuǎn)動，一種是需要點擊開始轉(zhuǎn)動的，并給出了晚上的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
js中select選擇器的change事件處理函數(shù)詳解
Js操作Select是很常見的,也是比較實用的,下面這篇文章主要給大家介紹了關(guān)于js中select選擇器的change事件處理函數(shù)的相關(guān)資料,文中給出了詳細的實例代碼,需要的朋友可以參考下2023-06-06
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10