inline the reference plates so the analysis canvas is never tainted by a cross-origin asset

README.md

@@ -64,4 +64,4 @@ a −16 LUFS master.
 - `synth.js` — image analysis, synthesis, WAV encoding
 - `panels.js` — the four analysis plates
 - `app.js` — interface wiring
-- `examples/` — four original reference plates
+- `examples.js` — the four reference plates, inlined as data URIs

app.js

@@ -14,12 +14,7 @@
   const readEl = $('#readouts');
   const canvases = [...document.querySelectorAll('#sheet .plate')];
 
-  const EXAMPLES = [
-    ['examples/misty_forest.jpg', 'I / fog lattice'],
-    ['examples/brutalist.jpg', 'II / concrete diagonals'],
-    ['examples/dusk_ocean.jpg', 'III / still water'],
-    ['examples/autumn_canopy.jpg', 'IV / crimson field'],
-  ];
+  const EXAMPLES = PLATES_DATA;   // [label, dataURI] pairs, see examples.js
 
   let current = null;      // HTMLImageElement
   let currentUrl = null;
@@ -43,16 +38,13 @@
     return img;
   }
 
-  EXAMPLES.forEach(([src, name], i) => {
+  EXAMPLES.forEach(([name, src], i) => {
     const b = document.createElement('button');
     b.innerHTML = `<img alt="${name}" src="${src}"><span>${name}</span>`;
     b.addEventListener('click', async () => {
       [...platesEl.children].forEach(c => c.classList.remove('active'));
       b.classList.add('active');
-      const img = await loadImage(src);
-      setImage(img);
-      if (currentUrl) URL.revokeObjectURL(currentUrl);
-      currentUrl = null;
+      setImage(await loadImage(src));
     });
     platesEl.appendChild(b);
   });
@@ -125,8 +117,8 @@
   goEl.addEventListener('click', transmit);
 
   // default plate so the instrument is never empty
-  loadImage(EXAMPLES[2][0]).then(img => {
+  loadImage(EXAMPLES[2][1]).then(img => {
     platesEl.children[2].classList.add('active');
     setImage(img);
-  }).catch(() => {});
+  }).catch(err => console.error('plate load failed', err));
 })();

index.html

@@ -65,6 +65,7 @@
   </footer>
 
 </div>
+<script src="examples.js"></script>
 <script src="synth.js"></script>
 <script src="panels.js"></script>
 <script src="app.js"></script>