<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
}
}
View Compiled
This Pen doesn't use any external CSS resources.