{"code":"<audio id=\"audio\" autoplay loop>\n  <source src=\"https://picturelements.github.io/images/nggyu.mp3\" type=\"audio/mpeg\"></source>\n  Fuck, you can't play audio.\n</audio>\n<div class=\"circle\" id=\"sun\"></div>\n<div class=\"circle\" id=\"moon\"></div>\n<div id=\"perc\">10%</div><style>body {\n  margin: 0;\n  height: 100vh;\n  background: hsl(194, 66%, 49%);\n  overflow: hidden;\n  font-family: Inconsolata,sans-serif;\n  font-size: 20px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.circle {\n  position: absolute;\n  width: 150px;\n  height: 150px;\n  margin: -75px;\n  background: black;\n  top: 50%;\n  left: 50%;\n  border-radius: 50%;\n}\n\n#sun {\n  background: red;\n  box-shadow: 0 0 50px #ffff77;\n}\n\n#moon {\n  background: #222;\n  left: 50%;\n}\n\n#perc {\n  position: absolute;\n  width: 100%;\n  text-align: center;\n  top: 50%;\n  margin-top: 110px;\n  color: white;\n  pointer-events: none;\n}</style><script>//Another contribution to the great Eclipse/Volume circlejerk\n\nvar moon=document.getElementById(\"moon\"),\n    parc=document.getElementById(\"perc\"),\n    audio=document.getElementById(\"audio\"),\n    dragging=false,\n    radius=75,\n    area=Math.PI*radius*radius,\n    offs=[0,0];\n\nfunction init(){\n  moon.addEventListener(\"mousedown\",selectMoon);\n  moon.addEventListener(\"touchstart\",selectMoon);\n  document.body.addEventListener(\"mousemove\",moveMoon);\n  document.body.addEventListener(\"touchmove\",moveMoon);\n  document.body.addEventListener(\"mouseup\",dropMoon);\n  document.body.addEventListener(\"touchend\",dropMoon);\n  setMoonData(window.innerWidth/2+radius*2.5,window.innerHeight/2);\n  audio.play();\n}\n\nfunction selectMoon(evt){\n  dragging=true;\n  var coords=getCoords(evt),\n      bcr=moon.getBoundingClientRect();\n  offs=[coords[0]-bcr.left-radius,coords[1]-bcr.top-radius];\n}\n\nfunction moveMoon(evt){\n  if (!dragging)\n    return;\n  var coords=getCoords(evt);\n  setMoonData(coords[0]-offs[0],coords[1]-offs[1]);\n}\n\nfunction setMoonData(x,y){\n  moon.style.left=x/window.innerWidth*100+\"%\";\n  moon.style.top=y/window.innerHeight*100+\"%\";\n  \n  var offset=Math.hypot(x-window.innerWidth/2,y-window.innerHeight/2),\n      sector=Math.acos((offset/2)/radius)/Math.PI,\n      triangle=Math.sqrt(radius*radius-offset*offset/4)*(offset/2),\n      overlap=(area*sector-triangle)*2/area || 0,\n      opacity=Math.max(400-offset,0)/1000,\n      expOverlap=Math.pow(overlap,4);\n  \n  //Bling bling\n  moon.style.boxShadow=\"inset \"+(x-window.innerWidth/2)/10+\"px \"+(y-window.innerHeight/2)/10+\"px 50px rgba(255, 255, 119, \"+opacity+\")\";\n  moon.style.background=\"hsl(194, 56%, \"+(1-expOverlap)*60+\"%)\";\n  perc.innerHTML=\"Volume: \"+(overlap*100).toPrecision(4)+\"%\";\n  document.body.style.background=\"hsl(\"+(194+Math.floor(166*expOverlap))+\", 66%, \"+(1-expOverlap)*50+\"%)\";\n  \n  //Oh yeah, set the volume, I guess.\n  audio.volume=overlap;\n}\n\nfunction dropMoon(){\n  dragging=false;\n}\n\nfunction getCoords(evt){\n  return [(evt.touches || [evt])[0].clientX,(evt.touches || [evt])[0].clientY];\n}\n\nMath.hypot=function(a,b){\n  return Math.sqrt(a*a+b*b);\n};\n\ninit();</script>"}