蟲群文字 text
文字化為蟲群，滑鼠靠近時會散開，離開後重新聚集。
鱈魚：「隨手一揮就可以使用油女一族的秘傳忍術！( •̀ ω •́ )✧」
PM：「不用吧，你不是隨手一寫都是 Bug 嗎？(◜◔。◔◝)」
鱈魚：「說好的尊重呢？(╥ω╥`)」
技術關鍵字
| 名稱 | 描述 |
|---|---|
| Pointer 事件 | 偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊 |
| Canvas Shader | 使用 GLSL 開發，直接在 GPU 上執行，比 Canvas 2D API 更快，但也更難 |
| Canvas getImageData | 取得指定 Canvas 區域的像素資料 |
| Noise | 比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等 |
| 向量計算 | 處理方向、加速度、速度等等數學運算 |
使用範例
基本用法
文字會以蟲群粒子呈現，滑鼠靠近時粒子散開，離開後慢慢聚回原位。
查看範例原始碼
vue
<template>
<div class="w-full border border-gray-200 rounded-xl">
<text-swarm :text="t('text')" class="h-[50vh]" />
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import TextSwarm from '../text-swarm.vue'
const { t } = useI18n()
</script>原理
利用 Offscreen Canvas 繪製文字，取樣像素資料產生粒子位置。
透過 WebGL2 shader 在 GPU 上進行物理模擬，使用 ping-pong 浮點紋理儲存粒子狀態，預計算 curl noise 紋理提供氣流擾動。
滑鼠接近時施加徑向推力與風力將粒子推散，離開後粒子以群集飄盪的方式回歸原位。
原始碼
API
Props
interface Props {
/** 要顯示的文字 */
text: string;
/** 文字大小（px）。@default 80 */
fontSize?: number;
/** 字型。@default 'sans-serif' */
fontFamily?: string;
/** 字重。@default 'normal' */
fontWeight?: string;
/** 粒子大小（px）。@default 0.1 */
particleSize?: number;
/** 粒子顏色。@default 'currentColor' */
particleColor?: string;
/** 粒子取樣間距（px），越小粒子越密。@default 0.1 */
particleGap?: number;
/** 滑鼠散開影響半徑（px）。@default 40 */
scatterRadius?: number;
/** 散開力道。@default 40 */
scatterForce?: number;
/** 回歸速度，0~1 之間，越大回歸越快。@default 0.1 */
returnSpeed?: number;
/** 摩擦力，0~1 之間，越大慣性越強。@default 0.92 */
friction?: number;
}