@bg-effects/math-beauty

English | 简体中文

A Vue + Canvas mathematical visual effect component with a large coordinate stage, animated formula rendering, categorized effect browsing, and live parameter tuning.

Live Demo

---

Highlights

• 54 built-in effects across 8 categories: polar, parametric, trochoid, number theory, hybrid implicit, fractal, physics, and chaos.
• Realtime formula overlay synchronized with the active effect.
• Debug panel with category filter, grouped effect list, previous/next navigation, and effect-specific controls.
• Built-in preset cycling when switching effects, plus presetLock and lockOnComplete.
• Newly added oscilloscope effects:
  • oscilloscope-harmonic (harmonic stack with decay and phase drift)
  • oscilloscope-sincos (sine/cosine waveform synthesis)

Installation

pnpm add @bg-effects/math-beauty

Quick Start

<script setup lang="ts">
import { MathBeauty } from '@bg-effects/math-beauty'
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <MathBeauty debug lang="en" />
  </div>
</template>

Component API

Exports

import MathBeauty, { MathBeauty as NamedMathBeauty, meta } from '@bg-effects/math-beauty'
import type { MathBeautyProps } from '@bg-effects/math-beauty'

Props (core)

Prop	Type	Default	Description
debug	boolean	false	Enable debug panel
lang	'zh-CN' | 'en'	'zh-CN'	UI language
effect-index	number	resolveEffectIndex('cardioid-deluxe')	Current effect index
animation-speed	number	0.2	Drawing speed
line-width	number	2.0	Line width
line-color	string	'#c8287d'	Line color
axis-range	number	18	World coordinate range
grid-density	number	18	Grid density
show-grid	boolean	true	Show grid
show-axis	boolean	true	Show axis
show-trail	boolean	true	Enable trail
trail-alpha	number	0.3	Trail fade strength
preset-lock	boolean	false	Keep current preset style when changing effect
lock-on-complete	boolean	false	Lock after one full drawing cycle

Effect Parameters

All configurable fields are declared in MathBeautyProps (src/types.ts), including:

• Number theory: modularPointCount, modularMultiplier, gcdLayerScale, quadraticResidueScale, gcdLatticeScale.
• Polar/trochoid/parametric: archimedeanPitch, fermatR2Turns, superellipseA, lemniscateScale, lissajousFreqX, trochoidRatio, heartDepth.
• Hybrid implicit: implicitRange, implicitStep, implicitWaveMix, implicitCrossMix, implicitGcdScale, fusionFourierMix.
• Fractal/chaos: juliaCRe, juliaCIm, mandelbrotBandWidth, chaosSystem, chaosSteps, chaosDt, chaosParticleCount.
• Oscilloscope harmonic: oscBaseFreq, oscAmplitude, oscHarmonics, oscDecay, oscPhaseDrift, oscScanSpan.
• Oscilloscope sin/cos: oscSinAmp, oscCosAmp, oscFreq, oscPhase, oscPhaseShift, oscOffset.

Exposed Instance Methods

<script setup lang="ts">
import { ref } from 'vue'
import { MathBeauty } from '@bg-effects/math-beauty'

const effectRef = ref<InstanceType<typeof MathBeauty> | null>(null)

const pause = () => effectRef.value?.pause?.()
const resume = () => effectRef.value?.resume?.()
const restart = () => effectRef.value?.restart?.()
const next = () => effectRef.value?.nextEffect?.()
</script>

<template>
  <MathBeauty ref="effectRef" debug />
</template>

Built-in Effects (54)

Polar

limacon, dual-frequency-bloom, star-rose, butterfly-variation, ribbon-orbit, flower-web, petal-chain, tan-cot-burst, archimedean-spiral, fermat-r2-spiral, logarithmic-spiral, fermat-spiral-weave, moire-ripple, inner-circle-spiral, mandala-curve

Parametric

superellipse, pentagram-wave, petal-orbit, lemniscate, oscilloscope-harmonic, oscilloscope-sincos, cardioid-deluxe, astroid, lissajous

Trochoid

spiral-spirograph, hypotrochoid, epicycloid, nephroid, epitrochoid-bloom, hypotrochoid-weave

Number Theory

modular-times-table, gcd-layer, quadratic-residue-grid, gcd-lattice

Hybrid (Implicit + Fusion)

sine-square-lattice, resonant-implicit-wave, tan-cot-implicit-maze, symmetric-sine-cross, exp-trig-balance, sin-tan-nexus, nested-sine-shear, gcd-cos-interference, sine-square-bias-bands, parabola-sine-balance, trig-fourier-fusion

Fractal

julia-fractal, mandelbrot-orbit, barnsley-fern

Physics

vector-field-streamlines, gravity-well, vortex-field

Chaos

lorenz-attractor, rossler-attractor, aizawa-attractor

Debug Panel Features

• Basic / Display tab switching.
• Category filter + grouped effect selector.
• Previous / Next effect navigation within current category.
• Realtime sliders, toggles, and color picker for active effect.
• Chaos system selector (lorenz, rossler, aizawa) and related controls.

Development

pnpm install
pnpm dev

Scripts

pnpm dev          # alias of pnpm play
pnpm play         # playground mode
pnpm build        # library build
pnpm build:play   # playground build
pnpm lint         # eslint for ts/vue
pnpm typecheck    # vue-tsc --noEmit
pnpm format       # prettier

License

MIT