波浪線

一條條樸實無華的實線，在極簡的脈動中，為網站添上簡約的詩意。

靈感來源

技術關鍵字

名稱	描述
Canvas 2D API	基礎的 2D 繪圖 API，可以高效繪製比 DOM 更複雜的圖形
Noise	比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等
Pointer 事件	偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊
物理模擬	模擬真實世界物理現象，如重力、碰撞、速度等物理效果
Simplex Noise	改良版 Perlin Noise，計算更快且無方向性偏差，常用於程序化生成
彈簧阻尼系統	以勁度與阻尼常數模擬彈簧的震盪與回彈，常用於自然的 UI 動態回饋

使用範例

基本用法

除了自身整體效果，還可以與滑鼠產生互動。

效果

◄ nonewindwavesorogeny ►

滑鼠互動

◄ smearblack-holewhite-holeripple ►

<template>
  <div class="w-full flex flex-col gap-4">
    <bg-wavy-lines
      :effect
      :mouse-interaction="{ type: mouseInteractionType }"
      class="h-full w-full touch-none example-wrap"
    >
      <div class="absolute left-2 top-2 opacity-10">
        <!-- {{ fps }} -->
      </div>
    </bg-wavy-lines>

    <div class="example-ctrl flex gap-6">
      <select-stepper
        v-model="effect"
        :label="t('effectLabel')"
        class="w-full"
        :options
      />

      <select-stepper
        v-model="mouseInteractionType"
        :label="t('mouseInteractionLabel')"
        class="w-full"
        :options="mouseInteractionTypeOptions"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComponentProps } from 'vue-component-type-helpers'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import SelectStepper from '../../select-stepper.vue'
import BgWavyLines from '../bg-wavy-lines.vue'

type Props = ComponentProps<typeof BgWavyLines>

const effect = ref<Props['effect']>('none')
const options: NonNullable<Props['effect']>[] = [
  'none',
  'wind',
  'waves',
  'orogeny',
]

type MouseInteractionType = NonNullable<Props['mouseInteraction']>['type']

const mouseInteractionType = ref<MouseInteractionType>('smear')
const mouseInteractionTypeOptions: MouseInteractionType[] = [
  'smear',
  'black-hole',
  'white-hole',
  'ripple',
]

const { t } = useI18n()
</script>

查看程式碼收合程式碼

原理

嘗試直接使用 Canvas 2D API 繪製生成式藝術。

原本想嘗試 GLSL，但是除了他本身很天書以外，要實現互動的限制也很多。

最後還是回到 Canvas 2D API。(´･ω･`)

噪聲演算法

線條自身自然變動的效果基於 Simplex Noise 演算法。

噪聲演算法主要用於產生隨機數值，且數值間有一定的連續性，不會像一般的隨機數值（例：Math.random）那樣離散。

因此可用來模擬地形、雲層、水波等自然效果。

不過由於自然現象的複雜性，噪聲演算法也有許多變種，比如 Worley Noise、Fractal Noise、Turbulence Noise 等等，相當有趣。◝( •ω• )◟

原始碼

元件原始碼bg-wavy-lines/範例原始碼bg-wavy-lines/examples/

API

Props

type MouseEffect = {
  type: 'smear';
  radius?: number;
  force?: number;
} | {
  type: 'black-hole';
  radius?: number;
  gravity?: number;
} | {
  type: 'white-hole';
  radius?: number;
  force?: number;
} | {
  /** 點擊後會產生水波 */
  type: 'ripple';
  speed?: number;
  maxRadius?: number;
  amplitude?: number;
}

interface Props {
  /** 線條間距 */
  lineGap?: number;

  /** 線條之點間距 */
  pointGap?: number;

  /** 線條顏色 */
  lineColor?: string;

  /** 各種效果。例：風吹、波動等等 */
  effect?: 'none' | 'wind' | 'waves' | 'orogeny';

  /** 滑鼠互動效果 */
  mouseInteraction?: MouseEffect;
}