Customize visualizer position and shake/wobble

Author: eliasfloreteng

LivelyProperties.json

@@ -26,13 +26,13 @@
   },
   "middleImage": {
     "type": "folderDropdown",
-    "value": "tn_white.png",
+    "value": "cldkid.svg",
     "text": "Center image",
     "filter": "*.jpg|*.jpeg|*.png|*.webp|*.gif|*.svg",
     "folder": "logos"
   },
   "middleImageScale": {
-    "max": 100,
+    "max": 105,
     "min": 10,
     "tick": 25,
     "step": 1,
@@ -53,41 +53,46 @@
     "type": "slider",
     "value": 100
   },
-  "innerRadius": {
-    "max": 90,
-    "min": 0,
+  "barWidth": {
+    "max": 25,
+    "min": 1,
     "tick": 25,
     "step": 1,
-    "text": "Inner space",
+    "text": "Bar width",
     "type": "slider",
-    "value": 50
+    "value": 8
   },
-  "innerMovement": {
-    "max": 100,
+  "barGlow": {
+    "max": 25,
     "min": 0,
     "tick": 25,
     "step": 1,
-    "text": "Inner circle movement",
+    "text": "Bar glow",
     "type": "slider",
-    "value": 25
+    "value": 10
   },
-  "barGlow": {
-    "max": 25,
+  "roundedBars": {
+    "type": "checkbox",
+    "value": true,
+    "text": "Rounded bars"
+  },
+  "innerRadius": {
+    "max": 90,
     "min": 0,
     "tick": 25,
     "step": 1,
-    "text": "Bar glow",
+    "text": "Inner space",
     "type": "slider",
-    "value": 10
+    "value": 50
   },
-  "barWidth": {
-    "max": 25,
-    "min": 1,
+  "innerMovement": {
+    "max": 100,
+    "min": 0,
     "tick": 25,
     "step": 1,
-    "text": "Bar width",
+    "text": "Inner circle reactivity",
     "type": "slider",
-    "value": 8
+    "value": 25
   },
   "barCompensation": {
     "max": 100,
@@ -138,6 +143,28 @@
     "type": "slider",
     "value": 50
   },
+  "shakeLabel": {
+    "type": "label",
+    "value": "Visualizer shake/wobble:"
+  },
+  "shakeSpeed": {
+    "max": 100,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Shake speed",
+    "type": "slider",
+    "value": 50
+  },
+  "shakeRadius": {
+    "max": 50,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Shake radius",
+    "type": "slider",
+    "value": 15
+  },
   "starsLabel": {
     "type": "label",
     "value": "Background stars:"
@@ -169,5 +196,27 @@
     "text": "Star glow",
     "type": "slider",
     "value": 15
+  },
+  "locationLabel": {
+    "type": "label",
+    "value": "Visualizer location:"
+  },
+  "xPercent": {
+    "max": 100,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Horizontal location",
+    "type": "slider",
+    "value": 50
+  },
+  "yPercent": {
+    "max": 100,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Vertical location",
+    "type": "slider",
+    "value": 50
   }
 }

README.md

@@ -29,10 +29,10 @@ https://user-images.githubusercontent.com/18127101/117224561-86d8d880-ae10-11eb-
 - [x] Background effects (snow/stars/debris with glow, similar to Trap Nation)
 - [x] Moving inner ring (similar to NCS)
 - [x] Background image blur option
-- [ ] Different types of visualizers (eg. lines from bottom)
-- [ ] Change visualizer position
-- [ ] Camera shake/wobble for background and/or visualizer
-- [ ] Multi monitor background span
+- [x] Change visualizer position
+- [x] Camera shake/wobble for visualizer
+- [x] Multi monitor background span
+- [ ] Different types of visualizers (eg. lines from bottom or sparkline)
 - [ ] Smoother bar visualizer bars
 
 ## Troubleshooting

index.html

@@ -56,6 +56,7 @@
 
     <pre id="debug"></pre>
 
+    <script src="noise.js"></script>
     <script src="main.js"></script>
     <script src="stars.js"></script>
 </body>