Added bar glow

Author: eliasfloreteng

LivelyProperties.json

@@ -53,6 +53,15 @@
     "type": "slider",
     "value": 50
   },
+  "barGlow": {
+    "max": 25,
+    "min": 0,
+    "tick": 25,
+    "step": 1,
+    "text": "Bar glow",
+    "type": "slider",
+    "value": 10
+  },
   "barWidth": {
     "max": 25,
     "min": 1,

main.js

@@ -6,6 +6,7 @@ let endHue = 180
 let saturation = 50
 let lightness = 50
 let compensation = 50
+let glow = 10
 
 let debug = document.getElementById("debug")
 let middle = document.getElementById("middle")
@@ -36,6 +37,7 @@ function livelyAudioListener(audioArray) {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
   ctx.lineWidth = barWidth
   ctx.lineCap = "round"
+  ctx.shadowBlur = glow
 
   if (audio.length > 2) {
     // Draw each bar
@@ -48,9 +50,11 @@ function livelyAudioListener(audioArray) {
       ctx.rotate(2 * Math.PI * ratio)
 
       // Color from given hue, saturation, lightness
-      ctx.strokeStyle = `hsl(${
+      let color = `hsl(${
         ((endHue - startHue) * halfRatio + startHue) % 360
       }, ${saturation}%, ${lightness}%)`
+      ctx.strokeStyle = color
+      ctx.shadowColor = color
 
       // Move to approparite height
       ctx.moveTo(0, innerRadius)
@@ -107,6 +111,9 @@ function livelyPropertyListener(name, val) {
     case "barCompensation":
       compensation = val
       break
+    case "barGlow":
+      glow = val
+      break
 
     default:
       console.error(`Unknown customization option: ${name}`)