<div class="info">move mouse to alter a, d and o
  <div class='details'></div>
</div>
.info  {
  position: absolute;
  left: 0;
  top: 0;
  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.3
  a = mouseY / height * 2
  
  details.innerHTML = "a = #{a}, d = #{d}, o = #{o}"
  if down then console.log details.innerHTML

  polar
    step: 0.1
    radius: (t) ->
      sqrt (a ** PI % sin(d * (t ** 2 * a) + o)) * scale

      
      
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/ZevanRosser/pen/Xgaveb