螢火蟲

讓網頁充滿漫天飛舞的小小螢火。ヾ(◍'౪`◍)ﾉﾞ

大家有沒有看過螢火蟲海呢？

我原本也想說不過就是會亮亮的小蟲蟲，應該沒什麼吧？(´・ω・`)

直到自己親臨現場，才感受到那種彷彿沐浴在銀河中的那種浪漫。

照片感受不到現場的感覺，推薦大家可以去個一次看看。( ´ ▽ ` )ﾉ

微涼的夜風與飛舞營火交織成銀河一般的流光密語。

在一個又一個失眠的夜裡，呢喃。

使用範例

基本用法

設定基本參數。

顏色

最大數量: 5000

發射頻率: 100

重新產生

0

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <div class="flex flex-col gap-2 border p-4">
      <div class="flex gap-6">
        <div class="flex flex-col">
          <label class="text-sm font-bold">
            顏色
          </label>

          <input
            v-model="color1"
            type="color"
          >

          <input
            v-model="color2"
            type="color"
          >
        </div>

        <base-input
          v-model.number="quantity"
          type="range"
          :label="`最大數量: ${quantity}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="10000"
        />

        <base-input
          v-model.number="emitRate"
          type="range"
          :label="`發射頻率: ${emitRate}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="5000"
        />
      </div>

      <div
        class="w-full cursor-pointer select-none border rounded px-4 py-2 text-center"
        @click="refresh()"
      >
        重新產生
      </div>
    </div>

    <bg-firefly
      :key="key"
      v-slot="{ fps }"
      class="bg h-full w-full"
      :color="[color1, color2]"
      :capacity="quantity"
      :emit-rate="emitRate"
    >
      <div class="absolute left-0 top-0 p-4 text-white">
        {{ fps }}
      </div>
    </bg-firefly>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseInput from '../../base-input.vue'
import BgFirefly from '../bg-firefly.vue'

const color1 = ref('#22f534')
const color2 = ref('#b3ff00')
const quantity = ref(5000)
const emitRate = ref(100)

const key = ref('')
function refresh() {
  key.value = Math.random().toFixed(5)
}
</script>

<style scoped lang="sass">
.bg
  background: linear-gradient(to top, #102b19, #191f1b)
</style>

背景

靜下心，享受夜晚的寧靜。(´,,•ω•,,)

關燈

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <base-checkbox
      v-model="isDark"
      label="關燈"
      class="border rounded p-4"
    />

    <bg-firefly
      v-if="isDark"
      class="left-0 top-0 z-50 h-full w-full !fixed"
      color="#3cff00"
    />
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { onBeforeUnmount } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import BgFirefly from '../bg-firefly.vue'

const { isDark } = useData()

onBeforeUnmount(() => {
  isDark.value = false
})
</script>

<style scoped lang="sass">
</style>

原理

使用 WebGPU 與 babylon 的粒子系統，性能超棒棒。( •̀ ω •́ )✧

原始碼

元件

、範例

API

Props

type Size = number | Record<'max' | 'min', number>
type CanvasSize = Record<'width' | 'height', number>
/** string 請使用包含 # 之 HEX 格式 */
type Color = Record<'r' | 'g' | 'b', number> | string

interface Props {
  /** 粒子容量。同時存活的最大粒子數量 */
  capacity?: number;
  /** 每一幀最大發射數量 */
  emitRate?: number;
  /** 如果設定兩種顏色，則會隨機取兩色之間的顏色 */
  color?: Color | [Color, Color];
  /** 可以依 canvas 尺寸設定粒子尺寸 */
  size?: Size | ((canvasSize: CanvasSize) => Size);
}