蟲群文字

文字化為蟲群，滑鼠靠近時會散開，離開後重新聚集。

鱈魚：「隨手一揮就可以使用油女一族的秘傳忍術！( •̀ ω •́ )✧」

PM：「不用吧，你不是隨手一寫都是 Bug 嗎？(◜◔。◔◝)」

鱈魚：「說好的尊重呢？(╥ω╥`)」

技術關鍵字

名稱	描述
Pointer 事件	偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊
Canvas Shader	使用 GLSL 開發，直接在 GPU 上執行，比 Canvas 2D API 更快，但也更難
Canvas getImageData	取得指定 Canvas 區域的像素資料
Noise	比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等
Curl Noise	基於 Noise 的無散度向量場，產生自然流動的粒子運動效果
向量計算	處理方向、加速度、速度等等數學運算
粒子系統	產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果
物理模擬	模擬真實世界物理現象，如重力、碰撞、速度等物理效果

使用範例

基本用法

文字會以蟲群粒子呈現，滑鼠靠近時粒子散開，離開後慢慢聚回原位。

<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 紋理提供氣流擾動。

滑鼠接近時施加徑向推力與風力將粒子推散，離開後粒子會群聚飄盪，逐漸回到原位。

原始碼

元件原始碼text-swarm/範例原始碼text-swarm/examples/

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;
}