Set gradient3 midpoint from slider

README.md

@@ -14,8 +14,8 @@ There are three implementations:
 
 ## Raison d'être
 
-wav2png was initially created as a Go utility library to render an audio file as an anti-aliased waveform for
-a WASM project - it just seemed like a good idea to add a standalone command line version, and later a WebGPU 
+_wav2png_ was originally created as a Go utility library to render an audio file as an anti-aliased waveform for
+a WASM project - it just sseemed like a good idea to add a standalone command line version, and now a WebGPU 
 implementation for better interactivity.
 
 [<img width="256" src="gallery/cli/acoustic.png">](gallery/cli/acoustic.png)

webgpu/html/index.html

@@ -131,13 +131,13 @@
           </div>
 
           <div for="gradient3" class="gradient3 hidden">
-            <input class="exemplar" type="range" step="any" min="0.0" max="1.0" value="0.5" />
-            <input id="rgb3"   class="swatch" type="color" value="#80ccff" />
-            <input id="alpha3" class="alpha"  type="range" step="1" min="0" max="255" value="192" />
-            <input id="rgb2"   class="swatch" type="color" value="#80ccff" />
-            <input id="alpha2" class="alpha"  type="range" step="1" min="0" max="255" value="128" />
-            <input id="rgb1"   class="swatch" type="color" value="#80ccff" />
-            <input id="alpha1" class="alpha"  type="range" step="any" min="0" max="255" value="255" />
+            <input id="midpoint" class="exemplar" type="range" step="any" min="0.0" max="1.0" value="0.5" />
+            <input id="rgb3"     class="swatch" type="color" value="#80ccff" />
+            <input id="alpha3"   class="alpha"  type="range" step="1" min="0" max="255" value="192" />
+            <input id="rgb2"     class="swatch" type="color" value="#80ccff" />
+            <input id="alpha2"   class="alpha"  type="range" step="1" min="0" max="255" value="128" />
+            <input id="rgb1"     class="swatch" type="color" value="#80ccff" />
+            <input id="alpha1"   class="alpha"  type="range" step="any" min="0" max="255" value="255" />
           </div>
 
           <input id="vscale" type="range" step="any" min="0.0" max="4.0" value="1.0" />

webgpu/html/javascript/components/waveform.js

@@ -32,6 +32,7 @@ export class Waveform extends HTMLElement {
     const styles = Array.from(shadow.querySelectorAll('#waveforms input[type="radio"]'))
     const swatches = Array.from(shadow.querySelectorAll('#settings input.swatch'))
     const alphas = Array.from(shadow.querySelectorAll('#settings input.alpha'))
+    const midpoint = shadow.querySelector('#settings input#midpoint')
     const vscale = shadow.querySelector('#settings input#vscale')
 
     styles.forEach((e) => {
@@ -48,6 +49,9 @@ export class Waveform extends HTMLElement {
       e.onchange = (event) => onChanged(this, e)
     })
 
+    midpoint.oninput = (event) => onChange(this, midpoint)
+    midpoint.onchange = (event) => onChanged(this, midpoint)
+
     vscale.oninput = (event) => onChange(this, vscale)
     vscale.onchange = (event) => onChanged(this, vscale)
   }
@@ -189,8 +193,9 @@ export class Waveform extends HTMLElement {
         const alpha2 = settings.querySelector('input#alpha2').value
         const rgb3 = settings.querySelector('input#rgb3').value
         const alpha3 = settings.querySelector('input#alpha3').value
+        const midpoint = settings.querySelector('input#midpoint').value
 
-        return styles.gradient3Style(this.vscale, 0.5, rgba(rgb1, alpha1), rgba(rgb2, alpha2), rgba(rgb3, alpha3))
+        return styles.gradient3Style(this.vscale, rgba(rgb1, alpha1), rgba(rgb2, alpha2), rgba(rgb3, alpha3), midpoint)
       }
 
       default: {

webgpu/html/javascript/shaders/gradient3.js

@@ -3,7 +3,7 @@
 const PADDING = 20
 const WORKGROUP_SIZE = 64
 
-export function gradient3 (device, format, a, width, height, vscale, midpoint, colour1, colour2, colour3) {
+export function gradient3 (device, format, a, width, height, vscale, colour1, colour2, colour3, midpoint) {
   const xscale = (width - 2 * PADDING) / width
   const yscale = (height - 2 * PADDING) / height
   const samples = a.audio.subarray(a.start, a.end)

webgpu/html/javascript/styles.js

@@ -26,13 +26,13 @@ export function gradientStyle (vscale, colour1, colour2) {
   }
 }
 
-export function gradient3Style (vscale, midpoint, colour1, colour2, colour3) {
+export function gradient3Style (vscale, colour1, colour2, colour3, midpoint) {
   return {
     type: 'gradient3',
     gradient3: {
       vscale,
-      midpoint,
-      colours: [colour1, colour2, colour3]
+      colours: [colour1, colour2, colour3],
+      stops: [0.0, midpoint, 1.0]
     }
   }
 }

webgpu/html/javascript/waveform.js

@@ -14,8 +14,6 @@ export function waveform (context, device, format, audio, style) {
     return {}
   }
 
-  console.log(`>>>>>>> start:${audio.start}  end:${audio.end}`)
-
   const width = context.canvas.width
   const height = context.canvas.height
   const samples = audio.audio
@@ -44,11 +42,11 @@ export function waveform (context, device, format, audio, style) {
   if (style.type === 'gradient3') {
     const {
       vscale = '1.0',
-      midpoint = 0.5,
-      colours = ['#80ccffff', '#80ccff40', '#80ccff80']
+      colours = ['#80ccffff', '#80ccff40', '#80ccff80'],
+      stops = [0.0, 0.5, 1.0]
     } = style.gradient3
 
-    return gradient3(device, format, { start, end, audio: samples }, width, height, vscale, midpoint, rgba(colours[0]), rgba(colours[1]), rgba(colours[2]))
+    return gradient3(device, format, { start, end, audio: samples }, width, height, vscale, rgba(colours[0]), rgba(colours[1]), rgba(colours[2]), stops[1])
   }
 
   // ... default