<div class="info">move mouse to alter a, d and o
  <div class='details'></div>
</div>

.info  {
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

details = document.querySelector '.details'

down = false;
document.addEventListener 'mousedown', ->
  down = true
  
document.addEventListener 'mouseup', ->
  down = false
  
  
Z animate, ->
  background "#c29a4b"

  stroke '#80311a';
  fill '#fff', 0.3
  strokeWidth 2
  
  # hermit crab curve
  o = mouseY / height * TWO_PI
  d = mouseX / width
  scale = 0.1
  a = mouseY / height * 2
  
  details.innerHTML = "a = #{a}, d = #{d}, o = #{o}"
  if down then console.log details.innerHTML
  
  polar 0.8, 0.28,
    step: 0.1
    radius: (t) ->
      sqrt (a ** PI % sin(d * (t ** 2 * a) + o)) * (scale / 2)
      
 
  
  para 0.5, 0.8, {
    range: [ 0, 1.9 ]
    scale: 0.015
    f: (t) -> 
      vv = sqrt (a ** PI % sin(d * (t ** 2 * a) + o))
      fill 'rgba(255, 255, 255,'+vv+')'
     
      rect 0, t , 0.5, 0.01
      noFill()
      { 
        x: t * 40,
        y: vv * -20
      }
    
  }