From c2f4bc625a47dfc67ee58c78e179f789e25e8498 Mon Sep 17 00:00:00 2001
From: FiniteLooper <chris.m.barr@gmail.com>
Date: Thu, 3 Aug 2023 15:47:15 -0400
Subject: [PATCH] Adding a bunch of presets

---
 README.md      |   2 +-
 src/index.html |   8 +
 src/presets.js | 752 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 761 insertions(+), 1 deletion(-)
 create mode 100644 src/presets.js

diff --git a/README.md b/README.md
index adfbcff..979b492 100644
--- a/README.md
+++ b/README.md
@@ -6,4 +6,4 @@ https://finitelooper.github.io/noise-maker/
 
 TODO:
 
-- Add "handles" for modifying X/Y light positions
+- Add "handles" in the UI for modifying X/Y light positions
diff --git a/src/index.html b/src/index.html
index fb90086..441c155 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,6 +27,13 @@
     </a>
 
     <aside class="flex-shrink-0 overflow-auto">
+      <div class="card m-3 mb-0">
+        <div class="card-body">
+          <select class="form-select" id="ctrl-preset">
+            <option value="" selected>Presets</option>
+          </select>
+        </div>
+      </div>
       <div id="svg-controls" class="d-flex flex-column">
         <div class="card m-3 mb-0">
           <div class="card-body">
@@ -1088,6 +1095,7 @@ <h5 id="code-modal-title" class="modal-title">Your Texture Code</h5>
     ></script>
     <script src="main.js"></script>
     <script src="helpers.js"></script>
+    <script src="presets.js"></script>
     <script src="modal.js"></script>
   </body>
 </html>
diff --git a/src/presets.js b/src/presets.js
new file mode 100644
index 0000000..b09f44c
--- /dev/null
+++ b/src/presets.js
@@ -0,0 +1,752 @@
+function serializeControls() {
+  //used to log out the current values to the console to manually save as presets
+  return $('#svg-controls')
+    .find('input, select')
+    .toArray()
+    .map((el) => {
+      let value = el.value;
+      if (el.type === 'checkbox') {
+        value = el.checked;
+      } else if (el.valueAsNumber !== 'undefined' && !isNaN(el.valueAsNumber)) {
+        value = el.valueAsNumber;
+      }
+      return { id: el.id, value };
+    });
+}
+
+function applyPreset(arr) {
+  arr.forEach((obj) => {
+    if (typeof obj.value === 'boolean') {
+      $('#' + obj.id)
+        .prop('checked', obj.value)
+        .trigger(inputEventName);
+    } else {
+      $('#' + obj.id)
+        .val(obj.value)
+        .trigger(inputEventName);
+    }
+  });
+}
+
+$(() => {
+  const $presetDdl = $('#ctrl-preset');
+
+  const presetOptions = presets.map((p, i) => `<option value='${i}'>${p.name}</option>`).join('');
+  $(presetOptions).appendTo($presetDdl);
+
+  $presetDdl.on('change', (ev) => {
+    if (ev.target.value !== '') {
+      applyPreset(presets[ev.target.value].settings);
+      ev.target.value = '';
+      $presetDdl.blur();
+    }
+  });
+});
+
+const presets = [
+  {
+    name: 'Defaults',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.05 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 1 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: false },
+      { id: 'ctrl-lighting-lighting-color', value: '#f1efe2' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#f5f5f5' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Wood Grain',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.1 },
+      { id: 'ctrl-base-frequency-y', value: 0.001 },
+      { id: 'ctrl-separate-frequencies', value: true },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#daa841' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 7.7 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 3.3 },
+      { id: 'ctrl-lighting-specular-exponent', value: 35.9 },
+      { id: 'ctrl-lighting-specular-constant', value: 1.3 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: 0 },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#af994e' },
+      { id: 'ctrl-blend-mode', value: 'multiply' },
+      { id: 'ctrl-enable-saturation', value: true },
+      { id: 'ctrl-num-saturation', value: 1.6 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Water',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.001 },
+      { id: 'ctrl-base-frequency-y', value: 0.011 },
+      { id: 'ctrl-separate-frequencies', value: true },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'fractalNoise' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#2492ff' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 9.1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 5.6 },
+      { id: 'ctrl-lighting-specular-constant', value: 1.6 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 86 },
+      { id: 'ctrl-lighting-distant-elevation', value: 62 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#0080c0' },
+      { id: 'ctrl-blend-mode', value: 'multiply' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1.6 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Leather',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.231 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 2 },
+      { id: 'ctrl-noise-type', value: 'fractalNoise' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#ded6bc' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 0.4 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 0.7 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 90 },
+      { id: 'ctrl-lighting-distant-elevation', value: 62 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#ffffff' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Paper',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.1 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'fractalNoise' },
+      { id: 'ctrl-seed', value: 2 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#fbfce9' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 0.3 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1.08 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 180 },
+      { id: 'ctrl-lighting-distant-elevation', value: 65 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#ffffff' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: true },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Threads',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.022 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 1 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#ffffff' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 0.7 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1.09 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#ffffff' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Waves',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.043 },
+      { id: 'ctrl-base-frequency-y', value: 0.942 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'fractalNoise' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#00274f' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 10 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 7.8 },
+      { id: 'ctrl-lighting-specular-constant', value: 1.9 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#f5f5f5' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Cinder',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.048 },
+      { id: 'ctrl-base-frequency-y', value: 0.059 },
+      { id: 'ctrl-separate-frequencies', value: true },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'fractalNoise' },
+      { id: 'ctrl-seed', value: 5 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#ff0000' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 9 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 19.2 },
+      { id: 'ctrl-lighting-specular-constant', value: 2.8 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#413a23' },
+      { id: 'ctrl-blend-mode', value: 'lighten' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Bokeh',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.004 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 1 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 5 },
+      { id: 'ctrl-enable-lighting', value: false },
+      { id: 'ctrl-lighting-lighting-color', value: '#f1efe2' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#ffd9ec' },
+      { id: 'ctrl-blend-mode', value: 'exclusion' },
+      { id: 'ctrl-enable-saturation', value: true },
+      { id: 'ctrl-num-saturation', value: 5.1 },
+      { id: 'ctrl-enable-brightness', value: true },
+      { id: 'ctrl-num-brightness', value: 4.1 },
+      { id: 'ctrl-enable-blur', value: true },
+      { id: 'ctrl-num-blur', value: 10 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Jazz',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.01 },
+      { id: 'ctrl-base-frequency-y', value: 0.02 },
+      { id: 'ctrl-separate-frequencies', value: true },
+      { id: 'ctrl-num-octaves', value: 1 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 2 },
+      { id: 'ctrl-enable-lighting', value: false },
+      { id: 'ctrl-lighting-lighting-color', value: '#f1efe2' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#f2f3f7' },
+      { id: 'ctrl-blend-mode', value: 'color-burn' },
+      { id: 'ctrl-enable-saturation', value: true },
+      { id: 'ctrl-num-saturation', value: 4.1 },
+      { id: 'ctrl-enable-brightness', value: true },
+      { id: 'ctrl-num-brightness', value: 2.7 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Microscope',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.035 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 1 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 28 },
+      { id: 'ctrl-enable-lighting', value: false },
+      { id: 'ctrl-lighting-lighting-color', value: '#f1efe2' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#dadedd' },
+      { id: 'ctrl-blend-mode', value: 'luminosity' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: true },
+      { id: 'ctrl-num-brightness', value: 4.3 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Color Static',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.367 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 2 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 1 },
+      { id: 'ctrl-enable-lighting', value: false },
+      { id: 'ctrl-lighting-lighting-color', value: '#f1efe2' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 1 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'feDistantLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 100 },
+      { id: 'ctrl-lighting-point-y', value: 100 },
+      { id: 'ctrl-lighting-point-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#000020' },
+      { id: 'ctrl-blend-mode', value: 'lighten' },
+      { id: 'ctrl-enable-saturation', value: true },
+      { id: 'ctrl-num-saturation', value: 8.6 },
+      { id: 'ctrl-enable-brightness', value: true },
+      { id: 'ctrl-num-brightness', value: 7.8 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 2.3 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Reptile',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.001 },
+      { id: 'ctrl-base-frequency-y', value: 0.006 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 6 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#637e30' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feDiffuseLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 10 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 1.97 },
+      { id: 'ctrl-lighting-specular-exponent', value: 1 },
+      { id: 'ctrl-lighting-specular-constant', value: 1 },
+      { id: 'ctrl-light-type', value: 'fePointLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 0 },
+      { id: 'ctrl-lighting-point-y', value: 0 },
+      { id: 'ctrl-lighting-point-z', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 90 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#ffffff' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Solarized Rose',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.032 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 3 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#d96666' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 10 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 10 },
+      { id: 'ctrl-lighting-specular-exponent', value: 8.4 },
+      { id: 'ctrl-lighting-specular-constant', value: 0.9 },
+      { id: 'ctrl-light-type', value: 'fePointLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 45 },
+      { id: 'ctrl-lighting-distant-elevation', value: 60 },
+      { id: 'ctrl-lighting-point-x', value: 260 },
+      { id: 'ctrl-lighting-point-y', value: 260 },
+      { id: 'ctrl-lighting-point-z', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#f5f5f5' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+  {
+    name: 'Fudge',
+    settings: [
+      { id: 'ctrl-base-frequency-x', value: 0.043 },
+      { id: 'ctrl-base-frequency-y', value: 0.05 },
+      { id: 'ctrl-separate-frequencies', value: false },
+      { id: 'ctrl-num-octaves', value: 4 },
+      { id: 'ctrl-noise-type', value: 'turbulence' },
+      { id: 'ctrl-seed', value: 0 },
+      { id: 'ctrl-enable-lighting', value: true },
+      { id: 'ctrl-lighting-lighting-color', value: '#e3d9ca' },
+      { id: 'ctrl-lighting-primitive-type', value: 'feSpecularLighting' },
+      { id: 'ctrl-lighting-surface-scale', value: 10 },
+      { id: 'ctrl-lighting-diffuse-constant', value: 10 },
+      { id: 'ctrl-lighting-specular-exponent', value: 5.9 },
+      { id: 'ctrl-lighting-specular-constant', value: 0.9 },
+      { id: 'ctrl-light-type', value: 'fePointLight' },
+      { id: 'ctrl-lighting-distant-azimuth', value: 157 },
+      { id: 'ctrl-lighting-distant-elevation', value: 63 },
+      { id: 'ctrl-lighting-point-x', value: 227 },
+      { id: 'ctrl-lighting-point-y', value: 163.2 },
+      { id: 'ctrl-lighting-point-z', value: 35.1 },
+      { id: 'ctrl-lighting-spot-overhead-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-overhead-x', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-y', value: 100 },
+      { id: 'ctrl-lighting-spot-overhead-z', value: 50 },
+      { id: 'ctrl-lighting-spot-overhead-pointsat-z', value: '0' },
+      { id: 'ctrl-lighting-spot-manual-cone-angle', value: 45 },
+      { id: 'ctrl-lighting-spot-manual-x', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-y', value: 100 },
+      { id: 'ctrl-lighting-spot-manual-z', value: 50 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-x', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-y', value: 150 },
+      { id: 'ctrl-lighting-spot-manual-pointsat-z', value: 50 },
+      { id: 'ctrl-bg-color', value: '#453e32' },
+      { id: 'ctrl-blend-mode', value: 'normal' },
+      { id: 'ctrl-enable-saturation', value: false },
+      { id: 'ctrl-num-saturation', value: 1 },
+      { id: 'ctrl-enable-brightness', value: false },
+      { id: 'ctrl-num-brightness', value: 1 },
+      { id: 'ctrl-enable-blur', value: false },
+      { id: 'ctrl-num-blur', value: 1 },
+      { id: 'ctrl-enable-custom-size', value: false },
+      { id: 'ctrl-custom-width', value: 500 },
+      { id: 'ctrl-custom-height', value: 500 },
+    ],
+  },
+];