Inner circle movement, moving bg stars & bg blur

eliasfloreteng · eliasfloreteng · commit 66a3163952fe · 2021-05-11T12:41:32.000+02:00
Feature requests are from lively subreddit
diff --git a/LivelyProperties.json b/LivelyProperties.json
@@ -10,6 +10,15 @@
     "filter": "*.jpg|*.jpeg|*.png|*.webp|*.gif",
     "folder": "images"
   },
+  "bgBlur": {
+    "max": 10,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Background image blur",
+    "type": "slider",
+    "value": 0
+  },
   "useMiddleImage": {
     "type": "checkbox",
     "value": false,
@@ -48,11 +57,20 @@
     "max": 90,
     "min": 0,
     "tick": 25,
-    "step": 5,
+    "step": 1,
     "text": "Inner space",
     "type": "slider",
     "value": 50
   },
+  "innerMovement": {
+    "max": 100,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Inner circle movement",
+    "type": "slider",
+    "value": 25
+  },
   "barGlow": {
     "max": 25,
     "min": 0,
@@ -119,5 +137,37 @@
     "text": "Color lightness",
     "type": "slider",
     "value": 50
+  },
+  "starsLabel": {
+    "type": "label",
+    "value": "Background stars:"
+  },
+  "showStars": {
+    "type": "checkbox",
+    "value": true,
+    "text": "Show background stars"
+  },
+  "starColor": {
+    "text": "Star color",
+    "type": "color",
+    "value": "#FFFFFF"
+  },
+  "starOpacity": {
+    "max": 100,
+    "min": 1,
+    "tick": 25,
+    "step": 1,
+    "text": "Star opacity",
+    "type": "slider",
+    "value": 50
+  },
+  "starGlow": {
+    "max": 25,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Star glow",
+    "type": "slider",
+    "value": 15
   }
 }
diff --git a/README.md b/README.md
@@ -26,18 +26,19 @@ https://user-images.githubusercontent.com/18127101/117224561-86d8d880-ae10-11eb-
 - [x] Customizable bar amplitude
 - [x] Glowing bars
 - [x] Customizable center logo image
-- [ ] Background image blur option
+- [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)
-- [ ] Background effects (snow/stars/debris with glow, similar to Trap Nation)
-- [ ] Moving inner ring (similar to NCS)
 - [ ] Change visualizer position
 - [ ] Camera shake/wobble for background and/or visualizer
 - [ ] Multi monitor background span
 - [ ] Smoother bar visualizer bars
 
-## Problems
+## Troubleshooting
 
 If the visualizer is not reacting to sound, try [this solution](https://help.wallpaperengine.io/en/audio/intermittent.html):
+
 > USB / wireless headsets are prone to sound driver issues. For many devices, changing the audio sample rate in the Windows device settings to 44100 Hz permanently fixes the issue:  
 > Right-click on the audio icon in the tray area in the lower right corner of Windows, select "Open Sound Settings". Click on "Device Properties" in the "Output" section of the window that opens up. Afterwards, click on "Additional device properties", then navigate to the "Advanced" tab. You can change the sampling rate in the menu shown there. The exact location is different on different versions of Windows. if you cannot find this option, search the web for guides on how to change the sampling rate of sound devices for your version of Windows.  
 > Set the sampling rate to "24 bit, 44100 Hz"
diff --git a/index.html b/index.html
@@ -9,7 +9,8 @@
     <style>
         html,
         body,
-        #canvas {
+        #canvas,
+        #starfield {
             margin: 0;
             padding: 0;
             height: 100%;
@@ -18,6 +19,11 @@
             user-select: none;
         }
 
+        #starfield {
+            position: absolute;
+            z-index: -10;
+        }
+
         body {
             background-position: center;
             background-repeat: no-repeat;
@@ -43,12 +49,15 @@
 </head>
 
 <body>
+    <canvas id="starfield"></canvas>
+
     <img id="middle" />
     <canvas id="canvas"></canvas>
 
     <pre id="debug"></pre>
 
     <script src="main.js"></script>
+    <script src="stars.js"></script>
 </body>
 
 </html>
diff --git a/main.js b/main.js
@@ -7,6 +7,12 @@ let saturation = 50
 let lightness = 50
 let compensation = 50
 let glow = 10
+let innerMovement = 25
+
+let showStars = true
+let starColor = "#FFFFFF"
+let starOpacity = 50
+let starGlow = 15
 
 let debug = document.getElementById("debug")
 let middle = document.getElementById("middle")
@@ -25,6 +31,9 @@ ctx.globalCompositeOperation = "destination-over"
 // ctx.strokeStyle = grad
 
 function livelyAudioListener(audioArray) {
+  // Set overall level
+  average = audioArray.reduce((acc, val) => acc + val) / audioArray.length
+  star_speed = average * 32
   // Remove duplicate frequencies
   let audio = audioArray.filter((elem, idx, arr) => arr[idx - 1] !== elem)
   // Compensate for overamplified bass
@@ -47,6 +56,7 @@ function livelyAudioListener(audioArray) {
       ctx.beginPath()
       // Center origin
       ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
+      // Rotate each bar
       ctx.rotate(2 * Math.PI * ratio)
 
       // Color from given hue, saturation, lightness
@@ -56,10 +66,11 @@ function livelyAudioListener(audioArray) {
       ctx.strokeStyle = color
       ctx.shadowColor = color
 
+      let innerOffset = average * maxLength * (innerMovement / 100)
       // Move to approparite height
-      ctx.moveTo(0, innerRadius)
+      ctx.moveTo(0, innerRadius + innerOffset)
       // Draw line outwards from origin
-      ctx.lineTo(0, val * maxLength + innerRadius)
+      ctx.lineTo(0, val * maxLength + innerRadius + innerOffset)
       // Apply stroke
       ctx.stroke()
       // Reset current transformation matrix to the identity matrix
@@ -87,6 +98,9 @@ function livelyPropertyListener(name, val) {
     case "bgImage":
       document.body.style.backgroundImage = `url(/${val.replace(/\\/g, "/")})`
       break
+    case "bgBlur":
+      document.body.style.backdropFilter = `blur(${Math.round(val)}px)`
+      break
     case "useMiddleImage":
       middle.style.display = val ? "block" : "none"
       break
@@ -114,9 +128,24 @@ function livelyPropertyListener(name, val) {
     case "barGlow":
       glow = val
       break
+    case "innerMovement":
+      innerMovement = val
+      break
+    case "showStars":
+      showStars = val
+      break
+    case "starColor":
+      starColor = val
+      break
+    case "starOpacity":
+      starOpacity = val
+      break
+    case "starGlow":
+      starGlow = val
+      break
 
     default:
-      console.error(`Unknown customization option: ${name}`)
+      // console.error(`Unknown customization option: ${name}`)
       break
   }
 }
diff --git a/stars.js b/stars.js
@@ -0,0 +1,66 @@
+let n = 256
+let w = document.documentElement.clientWidth
+let h = document.documentElement.clientHeight
+let x_mid = Math.round(w / 2)
+let y_mid = Math.round(h / 2)
+let z = (w + h) / 2
+let star_color_ratio = 1 / z
+let star_x_save, star_y_save
+let star_ratio = 256
+let star_speed = 4
+let stars = []
+
+let context
+
+function init() {
+  for (let i = 0; i < n; i++) {
+    stars.push({
+      x: Math.random() * w * 2 - x_mid * 2,
+      y: Math.random() * h * 2 - y_mid * 2,
+      speed: Math.round(Math.random() * z),
+      new_x: 0,
+      new_y: 0,
+      size: Math.round(Math.random() * 6 + 2),
+    })
+  }
+  let starfield = document.getElementById("starfield")
+  starfield.width = w
+  starfield.height = h
+  context = starfield.getContext("2d")
+  context.lineCap = "round"
+  // context.filter = "blur(1px)"
+}
+
+function anim() {
+  context.clearRect(0, 0, w, h)
+  context.strokeStyle = starColor
+  context.globalAlpha = starOpacity / 100
+  context.shadowBlur = starGlow
+  context.shadowColor = starColor
+
+  if (showStars && star_speed) {
+    for (let star of stars) {
+      star_x_save = star.new_x
+      star_y_save = star.new_y
+      star.speed -= star_speed
+      if (star.speed < 0) {
+        star.speed += z
+      }
+      star.new_x = x_mid + (star.x / star.speed) * star_ratio
+      star.new_y = y_mid + (star.y / star.speed) * star_ratio
+      if (star_x_save > 0 && star_x_save < w && star_y_save > 0 && star_y_save < h) {
+        context.lineWidth = (1 - star_color_ratio * star.speed) * 2
+        context.beginPath()
+        context.lineWidth = star.size
+        context.moveTo(star_x_save, star_y_save)
+        context.lineTo(star_x_save, star_y_save)
+        // context.lineTo(star.new_x, star.new_y)
+        context.stroke()
+      }
+    }
+  }
+}
+
+init()
+setInterval(anim, 16)
+// anim()
