sincos.html

<ink-var name="r" value="0.35"></ink-var>
<ink-var name="theta" value="0" format=".1f"></ink-var>
<ink-var name="xC" :value="Math.cos(theta)*r-0.5"></ink-var>
<ink-var name="yC" :value="Math.sin(theta)*r+0.5"></ink-var>

<h3>Sin and Cos</h3>
<ink-dynamic bind="theta" min="0" step="0.01" :max="Math.PI*2" periodic="true" :transform="value*180/Math.PI" after="º"></ink-dynamic>
<ink-chart xlim="[-1, 2]" ylim="[-1, 1]" height="400" width="600" xAxisLocation="hidden" yAxisLocation="hidden">
  <ink-chart-path :data="[[-1,0],[2, 0],[],[0, -1], [0, 1]]" stroke="#ddd" strokewidth="2"></ink-chart-path>
  <ink-chart-path :data="[[-1, 0.5-r],[2, 0.5-r],[],[-1, 0.5], [2, 0.5],[],[-1, 0.5+r],[2, 0.5+r]]" stroke="#ddd" strokewidth="0.5"></ink-chart-path>
  <ink-chart-path :data="[[ 0,-0.5-r],[2,-0.5-r],[],[ 0,-0.5], [2,-0.5],[],[ 0,-0.5+r],[2,-0.5+r]]" stroke="#ddd" strokewidth="0.5"></ink-chart-path>
  <ink-chart-path :data="[[-0.5-r,1],[-0.5-r,0],[],[-0.5,1], [-0.5,0],[],[-0.5+r,1],[-0.5+r,0]]" stroke="#ddd" strokewidth="0.5"></ink-chart-path>
  <ink-chart-path :data="[[xC, yC], [0, yC]]" stroke="red" strokewidth="1"></ink-chart-path>
  <ink-chart-path :data="[[xC, yC], [xC, 0]]" stroke="blue" strokewidth="1"></ink-chart-path>
  <ink-chart-eqn eqn="[-Math.cos(t)*(-0.5-r), -Math.sin(t)*(-0.5-r)]" parameterize="t" :domain="[Math.PI, Math.PI*1.5]" stroke="#ddd" strokewidth="0.5"></ink-chart-eqn>
  <ink-chart-eqn eqn="[-Math.cos(t)/-2, -Math.sin(t)/-2]" parameterize="t" :domain="[Math.PI, Math.PI*1.5]" stroke="#ddd" strokewidth="0.5"></ink-chart-eqn>
  <ink-chart-eqn eqn="[-Math.cos(t)*(-0.5+r), -Math.sin(t)*(-0.5+r)]" parameterize="t" :domain="[Math.PI, Math.PI*1.5]" stroke="#ddd" strokewidth="0.5"></ink-chart-eqn>
  <ink-chart-eqn eqn="[-Math.cos(t)*xC, -Math.sin(t)*xC]" parameterize="t" :domain="[Math.PI, Math.PI*1.5]" stroke="blue" strokewidth="1"></ink-chart-eqn>
  <ink-chart-text text="sin(&theta;)" x="1.75" :y=" 0.43-r" fill="red"></ink-chart-text>
  <ink-chart-text text="cos(&theta;)" x="1.75" :y="-0.57-r" fill="blue"></ink-chart-text>
  <ink-chart-eqn eqn="[Math.cos(t)*r-0.5, Math.sin(t)*r+0.5]" parameterize="t" :domain="[0, Math.PI*2]" stroke="green" strokewidth="2"></ink-chart-eqn>
  <ink-chart-eqn eqn="Math.sin(x* Math.PI+theta)*r + 0.5" domain="[0, 2]" stroke="red" strokewidth="3"></ink-chart-eqn>
  <ink-chart-eqn eqn="Math.cos(x* Math.PI+theta)*r - 0.5" domain="[0, 2]" stroke="blue" strokewidth="3"></ink-chart-eqn>
  <ink-chart-node :x="xC" :y="yC" fill="green" :drag="{theta: Math.atan2(y-0.5, x+0.5)}"></ink-chart-node>
</ink-chart>