基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
實(shí)現(xiàn)效果
項(xiàng)目地址:傳送門
基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
應(yīng)用場景
本代碼利用p5.js庫,創(chuàng)建了一個交互式的色彩輪和餅狀圖可視化界面。它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景,如設(shè)計(jì)、數(shù)據(jù)分析和教育領(lǐng)域。
基本功能
該代碼主要實(shí)現(xiàn)了以下功能:
- **色彩輪:**動態(tài)生成一個圓形色彩輪,展示色相、飽和度和亮度變化。
- **餅狀圖:**基于提供的數(shù)字?jǐn)?shù)據(jù),生成一個交互式的餅狀圖,展示數(shù)據(jù)比例分布。
功能實(shí)現(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ù)字?jǐn)?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實(shí)例
使用new p5
函數(shù),初始化一個p5.js實(shí)例,并將草圖附加到#container
元素中。
new p5(sketch, 'container')
總結(jié)與展望
開發(fā)這段代碼的過程中,我學(xué)習(xí)到了如何使用p5.js庫創(chuàng)建交互式的可視化效果。該代碼可以根據(jù)不同的數(shù)據(jù)和參數(shù)進(jìn)行定制,以滿足各種可視化需求。
未來,該卡片功能可以進(jìn)一步拓展和優(yōu)化,例如:
**數(shù)據(jù)綁定:**將餅狀圖的數(shù)據(jù)綁定到外部數(shù)據(jù)源,實(shí)現(xiàn)實(shí)時更新。
**交互性增強(qiáng):**允許用戶與餅狀圖交互,如選擇切片或查看詳細(xì)信息。
**移動設(shè)備優(yōu)化:**優(yōu)化代碼以適應(yīng)移動設(shè)備,實(shí)現(xiàn)跨平臺兼容性。
到此這篇關(guān)于基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化的文章就介紹到這了,更多相關(guān)p5.js實(shí)現(xiàn)色彩輪和餅狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗(yàn)的各位,對于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言,它和C++、C#或Java一樣都包含this關(guān)鍵字,接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08JS實(shí)現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實(shí)現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02淺析showModalDialog數(shù)據(jù)緩存問題(用禁止瀏覽器緩存解決)
在使用showModalDialog彈出窗口時,顯示的數(shù)據(jù)是上次修改前的數(shù)據(jù),這是因?yàn)槟J(rèn)情況下頁面保存了緩存,所以顯示的數(shù)據(jù)并不是修改后的情況2013-07-07移動端H5喚起APP的寫法實(shí)例(IOS、android)
最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07利用Javascript實(shí)現(xiàn)簡單的轉(zhuǎn)盤抽獎
這篇文章主要介紹了利用Javascript實(shí)現(xiàn)的簡單的轉(zhuǎn)盤抽獎,文中分享了兩種抽獎效果,一種是默認(rèn)轉(zhuǎn)動,一種是需要點(diǎn)擊開始轉(zhuǎn)動的,并給出了晚上的示例代碼,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02js中select選擇器的change事件處理函數(shù)詳解
Js操作Select是很常見的,也是比較實(shí)用的,下面這篇文章主要給大家介紹了關(guān)于js中select選擇器的change事件處理函數(shù)的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-06-06js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組,其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10