From 0df2ed7dab2ec15e85727fc2ec3e51eeb571b1df Mon Sep 17 00:00:00 2001 From: Henrique Vianna Date: Thu, 25 Apr 2024 17:46:56 -0300 Subject: [PATCH 01/16] feat: Add `gravity` property. --- src/audioMotion-analyzer.js | 16 ++++++++++++++-- src/index.d.ts | 4 ++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/audioMotion-analyzer.js b/src/audioMotion-analyzer.js index 41dc906..37e6bc0 100644 --- a/src/audioMotion-analyzer.js +++ b/src/audioMotion-analyzer.js @@ -92,6 +92,7 @@ const DEFAULT_SETTINGS = { fillAlpha : 1, frequencyScale : SCALE_LOG, gradient : GRADIENTS[0][0], + gravity : 1, height : undefined, ledBars : false, linearAmplitude: false, @@ -485,6 +486,16 @@ export default class AudioMotionAnalyzer { this._setGradient( value, 1 ); } + get gravity() { + return this._gravity; + } + set gravity( value ) { + let newVal = +value; + if ( ! ( newVal > 0 ) ) // '<= 0' won't work if newVal is NaN + newVal = this._gravity || DEFAULT_SETTINGS.gravity; + this._gravity = newVal; + } + get height() { return this._height; } @@ -1767,6 +1778,7 @@ export default class AudioMotionAnalyzer { _energy, fillAlpha, _fps, + _gravity, _linearAmplitude, _lineWidth, maxDecibels, @@ -1909,7 +1921,7 @@ export default class AudioMotionAnalyzer { if ( _energy.peak > 0 ) { _energy.hold--; if ( _energy.hold < 0 ) - _energy.peak += _energy.hold / ( holdFrames * holdFrames / 2 ); + _energy.peak += _energy.hold / ( holdFrames * holdFrames / _gravity ); } if ( newVal >= _energy.peak ) { _energy.peak = newVal; @@ -2141,7 +2153,7 @@ export default class AudioMotionAnalyzer { bar.hold[ channel ]--; // if hold is negative, it becomes the "acceleration" for peak drop if ( bar.hold[ channel ] < 0 ) - bar.peak[ channel ] += bar.hold[ channel ] / ( holdFrames * holdFrames / 2 ); + bar.peak[ channel ] += bar.hold[ channel ] / ( holdFrames * holdFrames / _gravity ); } // check if it's a new peak for this bar diff --git a/src/index.d.ts b/src/index.d.ts index b1ef5aa..7f56a2a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -28,6 +28,7 @@ export interface Options { gradient?: string; gradientLeft?: string; gradientRight?: string; + gravity?: number; height?: number; ledBars?: boolean; linearAmplitude?: boolean; @@ -165,6 +166,9 @@ declare class AudioMotionAnalyzer { get gradientRight(): string; set gradientRight(value: string); + get gravity(): number; + set gravity(value: number); + get height(): number; set height(h: number); From 97977066d3af90b0cb19de030c49fc2a1fd2ac78 Mon Sep 17 00:00:00 2001 From: Henrique Vianna Date: Sat, 27 Apr 2024 10:21:29 -0300 Subject: [PATCH 02/16] Update documentation. --- README.md | 19 ++++++++++++++++--- index.html | 3 ++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 2640e53..a1357f8 100644 --- a/README.md +++ b/README.md @@ -140,6 +140,7 @@ options = {
  [gradient](#gradient-string): **'classic'**,
  [gradientLeft](#gradientleft-string): *undefined*,
  [gradientRight](#gradientright-string): *undefined*,
+  [gravity](#gravity-number): **1**,
  [height](#height-number): *undefined*,
  [ledBars](#ledbars-boolean): **false**,
  [linearAmplitude](#linearamplitude-boolean): **false**,
@@ -498,6 +499,16 @@ For **_dual-combined_** channel layout or [`radial`](#radial-boolean) spectrum, See also [`gradient`](#gradient-string) and [`splitGradient`](#splitgradient-boolean). +### `gravity` *number* + +*Available since v4.5.0* + +Controls the acceleration of [peaks](#showpeaks-boolean) falling down. + +It must be a number greater than zero. Invalid values are ignored and no error is thrown. + +Defaults to **1**. + ### `height` *number* ### `width` *number* @@ -607,7 +618,7 @@ Defaults to **false**. *Available since v4.0.0* -Performs an *n*th-root to amplify low energy values when using linear scale for the amplitude. +Performs an *n*th-root operation to amplify low energy values when using linear scale for the amplitude. It should be a number >= 1, while 1 means no boosting. Only effective when [`linearAmplitude`](#linearamplitude-boolean) is set to *true*. @@ -906,9 +917,11 @@ and setting `showBgColor` to ***true*** will make the "unlit" LEDs visible inste ### `showPeaks` *boolean* -*true* to show amplitude peaks. Defaults to **true**. +*true* to show amplitude peaks. -See also [`peakLine`](#peakline-boolean). +See also [`gravity`](#gravity-number) and [`peakLine`](#peakline-boolean). + +Defaults to **true**. ### `showScaleX` *boolean* diff --git a/index.html b/index.html index be31f82..16b4795 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ --emoji-size: 1.2em; --sidebar-name-font-family: Orbitron, var(--base-font-family); --sidebar-name-font-weight: 800; + --sidebar-width: 18rem; --heading-h4-font-size: 1.2rem; } @@ -43,7 +44,7 @@ } .sidebar > h1 .app-name-link { - font-size: 82%; + font-size: 85%; } h3 code { From d7bdc5804814e9889534a3167f13998e4378cb0c Mon Sep 17 00:00:00 2001 From: Henrique Vianna Date: Sat, 27 Apr 2024 10:22:08 -0300 Subject: [PATCH 03/16] Update demos. --- demo/fluid.html | 65 ++++++++++++++++++++++++++----------------------- demo/fluid.js | 12 ++++----- demo/multi.html | 9 +++++-- demo/styles.css | 7 ++++++ 4 files changed, 55 insertions(+), 38 deletions(-) diff --git a/demo/fluid.html b/demo/fluid.html index def592e..54c2be1 100644 --- a/demo/fluid.html +++ b/demo/fluid.html @@ -45,7 +45,7 @@

| fl -