Version 3.3.0

hvianna · May 3, 2021 · 48bfbb3 · 48bfbb3
2 parents 057ee6f + cb71722
commit 48bfbb3
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 98 deletions.
diff --git a/.well-known/brave-rewards-verification.txt b/.well-known/brave-rewards-verification.txt
@@ -0,0 +1,4 @@
+This is a Brave Rewards publisher verification file.
+
+Domain: audiomotion.dev
+Token: a91d5cb66865661e9009a87d50ddab91363600ce53d32ecceccfe62af9c6a57a
diff --git a/Changelog.md b/Changelog.md
@@ -1,6 +1,17 @@
 Changelog
 =========
 
+## version 3.3.0 (2021-05-03)
+
+### Added: {docsify-ignore}
+
++ New horizontal mirroring effect; see [`mirror`](README.md#mirror-number) property - thanks [@lexterror](https://github.com/lexterror) for suggesting this feature.
+
+### Improvements: {docsify-ignore}
+
++ `colorStops` type definition updated for improved compatibility ([see #17](https://github.com/hvianna/audioMotion-analyzer/pull/17)) - props to [@Staijn1](https://github.com/Staijn1).
+
+
 ## version 3.2.1 (2021-04-03)
 
 + Fixes an undefined property error.

diff --git a/README.md b/README.md
@@ -12,8 +12,8 @@ I originally wrote it as part of my [**audioMotion**](https://audiomotion.me) mu
 + High-resolution real-time dual channel audio spectrum analyzer
 + Logarithmic frequency scale with customizable range
 + Visualize discrete frequencies or octave bands based on the equal tempered scale
-+ Optional effects: vintage LEDs, luminance bars, customizable reflection, radial visualization
-+ Customizable Web Audio API parameters: FFT size, sensitivity and time-smoothing constant
++ Optional effects: vintage LEDs, luminance bars, mirroring and reflection, radial visualization
++ Customizable sensitivity, FFT size and time-smoothing constant
 + Comes with 3 predefined color gradients - easily add your own!
 + Fullscreen support, ready for retina / HiDPI displays
 + Zero-dependency native ES6+ module (ESM), less than 20kB minified
@@ -105,6 +105,7 @@ options = {<br>
 &emsp;&emsp;[maxFreq](#maxfreq-number): **22000**,<br>
 &emsp;&emsp;[minDecibels](#mindecibels-number): **-85**,<br>
 &emsp;&emsp;[minFreq](#minfreq-number): **20**,<br>
+&emsp;&emsp;[mirror](#mirror-number): **0**,<br>
 &emsp;&emsp;[mode](#mode-number): **0**,<br>
 &emsp;&emsp;[onCanvasDraw](#oncanvasdraw-function): *undefined*,<br>
 &emsp;&emsp;[onCanvasResize](#oncanvasresize-function): *undefined*,<br>
@@ -388,6 +389,22 @@ The maximum practical value is half the sampling rate ([`audioCtx.sampleRate`](#
 
 It is preferable to use the [`setFreqRange()`](#setfreqrange-minfreq-maxfreq-) method and set both values at once, to prevent `minFreq` being higher than the current `maxFreq` or vice-versa at a given moment.
 
+### `mirror` *number*
+
+*Available since v3.3.0*
+
+Horizontal mirroring effect. Valid values are:
+
+mirror | Effect
+:-----:|--------
+-1     | Mirrors the analyzer to the left (low frequencies at the center of screen)
+0      | Disables mirror effect (default)
+1      | Mirrors the analyzer to the right (high frequencies at the center of screen)
+
+**Note:** when [`radial`](#radial-boolean) is **_true_**, both `1` and `-1` will produce the same effect.
+
+Defaults to **0**.
+
 ### `mode` *number*
 
 Current visualization mode.

diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+include: [".well-known"]
diff --git a/demo/fluid.html b/demo/fluid.html
@@ -8,7 +8,7 @@
 	<link href="styles.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="wide">
 	<header>
 		<h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | fluid layout demo</h1>
 		<ul class="header-nav">
@@ -80,6 +80,8 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | fl
 					<option value="40">40</option>
 					<option value="60">60</option>
 					<option value="100">100</option>
+					<option value="500">500</option>
+					<option value="1000">1000</option>
 				</select>
 			</label>
 
@@ -137,7 +139,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | fl
 			<fieldset>
 				<legend>mode 10 only</legend>
 				<label class="label">lineWidth
-					<input type="range" min="0" max="9" step="1" data-setting="lineWidth">
+					<input type="range" min="0" max="5" step="1" data-setting="lineWidth">
 					<div class="value"></div>
 				</label>
 
@@ -158,7 +160,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | fl
 			</fieldset>
 
 			<fieldset>
-				<legend>Reflex effect</legend>
+				<legend>Reflex & Mirror</legend>
 				<label class="label">reflexRatio
 					<input type="range" min="0" max=".9" step=".1" data-setting="reflexRatio">
 					<div class="value"></div>
@@ -175,6 +177,11 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | fl
 				</label>
 
 				<button data-prop="reflexFit">reflexFit</button>
+
+				<label class="label">mirror
+					<input type="range" min="-1" max="1" step="1" data-setting="mirror">
+					<div class="value"></div>
+				</label>
 			</fieldset>
 
 			<fieldset>

diff --git a/demo/fluid.js b/demo/fluid.js
@@ -36,6 +36,7 @@ const presets = [
 			fillAlpha: .6,
 			gradient: 'rainbow',
 			lineWidth: 2,
+			mirror: -1,
 			radial: false,
 			reflexAlpha: 1,
 			reflexBright: 1,
@@ -74,6 +75,22 @@ const presets = [
 			showPeaks: true,
 			overlay: false
 		}
+	},
+	{
+		name: 'Testing config 1',
+		options: {
+			mode: 10,
+			gradient: 'rainbow',
+			reflexRatio: .4,
+			showBgColor: true,
+			showPeaks: true,
+			showScaleX: false,
+			mirror: -1,
+			maxFreq: 8000,
+			overlay: true,
+			lineWidth: 2,
+			fillAlpha: .2
+		}
 	}
 ];
 

diff --git a/demo/multi.html b/demo/multi.html
@@ -128,7 +128,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | mu
 			<fieldset>
 				<legend>mode 10 only</legend>
 				<label class="label">lineWidth
-					<input type="range" id="line_width" min="0" max="9" step="1" data-setting="lineWidth">
+					<input type="range" id="line_width" min="0" max="5" step="1" data-setting="lineWidth">
 					<div class="value"></div>
 				</label>
 
@@ -149,7 +149,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | mu
 			</fieldset>
 
 			<fieldset>
-				<legend>Reflex effect</legend>
+				<legend>Reflex & Mirror</legend>
 				<label class="label">reflexRatio
 					<input type="range" min="0" max=".9" step=".1" data-setting="reflexRatio">
 					<div class="value"></div>
@@ -166,6 +166,11 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | mu
 				</label>
 
 				<button data-prop="reflexFit">reflexFit</button>
+
+				<label class="label">mirror
+					<input type="range" min="-1" max="1" step="1" data-setting="mirror">
+					<div class="value"></div>
+				</label>
 			</fieldset>
 		</div>
 

diff --git a/demo/overlay.html b/demo/overlay.html
@@ -8,7 +8,7 @@
 	<link href="styles.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="wide">
 	<header>
 		<h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | overlay demo</h1>
 		<ul class="header-nav">
@@ -128,7 +128,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | ov
 			<fieldset>
 				<legend>mode 10 only</legend>
 				<label class="label">lineWidth
-					<input type="range" id="line_width" min="0" max="9" step="1" data-setting="lineWidth">
+					<input type="range" id="line_width" min="0" max="5" step="1" data-setting="lineWidth">
 					<div class="value"></div>
 				</label>
 
@@ -149,7 +149,7 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | ov
 			</fieldset>
 
 			<fieldset>
-				<legend>Reflex effect</legend>
+				<legend>Reflex & Mirror</legend>
 				<label class="label">reflexRatio
 					<input type="range" min="0" max=".9" step=".1" data-setting="reflexRatio">
 					<div class="value"></div>
@@ -166,6 +166,11 @@ <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | ov
 				</label>
 
 				<button data-prop="reflexFit">reflexFit</button>
+
+				<label class="label">mirror
+					<input type="range" min="-1" max="1" step="1" data-setting="mirror">
+					<div class="value"></div>
+				</label>
 			</fieldset>
 
 			<fieldset>

diff --git a/demo/styles.css b/demo/styles.css
@@ -7,6 +7,9 @@ body {
 	max-width: 100%;
 	width: 1000px;
 }
+body.wide {
+	width: 1200px;
+}
 
 a {
 	color: #b5c6d0;
@@ -235,7 +238,7 @@ ul {
 
 /* overlay */
 #container.overlay {
-	height: 563px;
+	height: 675px;
 	margin: 0 auto;
 	position: relative;
 	width: 100%;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "audiomotion-analyzer",
   "description": "High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "main": "./src/audioMotion-analyzer.js",
   "module": "./src/audioMotion-analyzer.js",
   "types": "./src/index.d.ts",