實(shí)現(xiàn)效果

項(xiàng)目地址：傳送門

基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化

應(yīng)用場景

本代碼利用p5.js庫，創(chuàng)建了一個(gè)交互式的色彩輪和餅狀圖可視化界面。它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景，如設(shè)計(jì)、數(shù)據(jù)分析和教育領(lǐng)域。

基本功能

該代碼主要實(shí)現(xiàn)了以下功能：

• **色彩輪：**動(dòng)態(tài)生成一個(gè)圓形色彩輪，展示色相、飽和度和亮度變化。
• **餅狀圖：**基于提供的數(shù)字?jǐn)?shù)據(jù)，生成一個(gè)交互式的餅狀圖，展示數(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鉤子中，定義一個(gè)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ù)指定的半徑和角度繪制一個(gè)色彩輪。

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ù)繪制一個(gè)餅狀圖。

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ù)指定的顏色、位置、直徑和百分比范圍繪制一個(gè)餅狀圖切片。

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ù)，初始化一個(gè)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í)時(shí)更新。

• **交互性增強(qiáng)：**允許用戶與餅狀圖交互，如選擇切片或查看詳細(xì)信息。

• **移動(dòng)設(shè)備優(yōu)化：**優(yōu)化代碼以適應(yīng)移動(dòng)設(shè)備，實(shí)現(xiàn)跨平臺兼容性。

到此這篇關(guān)于基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化的文章就介紹到這了,更多相關(guān)p5.js實(shí)現(xiàn)色彩輪和餅狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論