蟲群文字 text
文字化為蟲群，滑鼠靠近時會散開，離開後重新聚集。
鱈魚：「隨手一揮就可以使用油女一族的秘傳忍術！( •̀ ω •́ )✧」
PM：「不用吧，你不是隨手一寫都是 Bug 嗎？(◜◔。◔◝)」
鱈魚：「說好的尊重呢？(╥ω╥`)」
技術關鍵字
| 名稱 | 描述 |
|---|---|
| Pointer 事件 | 偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊 |
| Canvas Shader | 使用 GLSL 開發，直接在 GPU 上執行，比 Canvas 2D API 更快，但也更難 |
| Canvas getImageData | 取得指定 Canvas 區域的像素資料 |
| Noise | 比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等 |
| Curl Noise | 基於 Noise 的無散度向量場，產生自然流動的粒子運動效果 |
| 向量計算 | 處理方向、加速度、速度等等數學運算 |
| 粒子系統 | 產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果 |
| 物理模擬 | 模擬真實世界物理現象，如重力、碰撞、速度等物理效果 |
使用範例
基本用法
文字會以蟲群粒子呈現，滑鼠靠近時粒子散開，離開後慢慢聚回原位。
查看範例原始碼
vue
<template>
<div class="w-full example-wrap">
<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;
/**
* 粒子取樣間距，單位為裝置像素，越小粒子越密。
*
* 以裝置像素計算才能在高解析度螢幕上正確超取樣文字，還原度不隨 DPR 改變。
*
* @default 0.5
*/
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;
}