Trigonometry Visualisation Tool In JavaScript – trigonoparty

trigonoparty is a lightweight Trigonometry Visualisation Tool that allows the user to play with trigonometry. Written in pure JS and HTML5 canvas without any dependencies.

How to use it:

Insert the Trigonometry.js and UI.js into the document.

<script src="trigonoparty.js"></script>
<script src="ui.js"></script>

Create the HTML for the Trigonometry Visualisation Tool.

<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="root">
  <div class="content">
    <div class="canvas-wrapper">
      <canvas class="canvas" id="canvas" />
    </div>
    <aside class="drawer">
      <div class="row block">
        <div class="column">
          <button id="togglePlay" class="button">Stop</button>
        </div>
      </div>
      <details class="row">
        <summary>general options</summary>
        <div class="state-table">
          <div class="row state-table-row">
            <label class="column state-table-column">
              round numbers <input id="roundNumbers" type="checkbox" checked />
            </label>
          </div>
        </div>
      </details>
      <details open class="row">
        <summary>state values</summary>
        <div class="state-table">
          <div class="row state-table-row">
            <div class="column state-table-column">
              degree <input id="stateDeg" type="text" disabled />
            </div>
            <div class="column state-table-column">
              radian <input id="stateRad" type="text" disabled />
            </div>
            <div class="column state-table-column">
              quandrant <input id="stateQua" type="text" disabled />
            </div>
          </div>
          <div class="row state-table-row">
            <div class="column state-table-column">
              sinus <input id="stateSin" type="text" disabled />
            </div>
            <div class="column state-table-column">
              cosinus <input id="stateCos" type="text" disabled />
            </div>
            <div class="column state-table-column">
              tangent <input id="stateTan" type="text" disabled />
            </div>
          </div>
          <div class="row state-table-row">
            <div class="column state-table-column">
              cotangent <input id="stateCot" type="text" disabled />
            </div>
            <div class="column state-table-column">
              secant <input id="stateSec" type="text" disabled />
            </div>
            <div class="column state-table-column">
              cosecant <input id="stateCsc" type="text" disabled />
            </div>
          </div>
        </div>
      </details>
      <details class="row">
        <summary id="degreeTitle">angle θ (-)</summary>
        <div class="row zebra">
          <div class="column">
            <input id="degreeRange" type="range" min="-1" max="361" step="1" />
          </div>
          <div class="column">
            <input id="degreeInput" type="number" min="-1" max="361" />
          </div>
        </div>
      </details>
      <details class="row">
        <summary id="radiusTitle">radius scale (-)</summary>
        <div class="row zebra">
          <div class="column">
            <input id="radiusRange" type="range" min="0" max="500" step="5" />
          </div>
          <div class="column">
            <input id="radiusInput" type="number" min="0" />
          </div>
        </div>
      </details>
      <details class="row">
        <summary id="stepTitle">step by frame (-)</summary>
        <div class="row zebra">
          <div class="column">
            <input id="stepRange" type="range" min="0" max="1" step="0.01" />
          </div>
          <div class="column">
            <input id="stepInput" type="number" min="0" step="0.01" />
          </div>
        </div>
      </details>
      <details class="row">
        <summary>draw lines</summary>
        <div class="state-table">
          <div class="row state-table-row">
            <label class="column state-table-column hidden-checkbox">
              uncheck all <input id="drawNoLines" type="checkbox" />
            </label>
          </div>
          <div class="column separator"></div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              radius <input id="drawLineRadius" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              x axis <input id="drawLineXAxis" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              y axis <input id="drawLineYAxis" type="checkbox" checked />
            </label>
          </div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              sinus <input id="drawLineSin" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              cosinus <input id="drawLineCos" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              tangent <input id="drawLineTan" type="checkbox" checked />
            </label>
          </div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              cotangent <input id="drawLineCot" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              secant <input id="drawLineSec" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              cosecant <input id="drawLineCsc" type="checkbox" checked />
            </label>
          </div>
        </div>
      </details>
      <details class="row">
        <summary>draw names</summary>
        <div class="state-table">
          <div class="row state-table-row">
            <label class="column state-table-column hidden-checkbox">
              uncheck all <input id="drawNoNames" type="checkbox" />
            </label>
          </div>
          <div class="column separator"></div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              full names <input id="drawFullNames" type="checkbox" checked />
            </label>
          </div>
          <div class="column separator"></div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              fps <input id="drawNameFPS" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              info <input id="drawNameInfo" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              credits <input id="drawNameCredits" type="checkbox" checked />
            </label>
          </div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              radius <input id="drawNameRadius" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              theta <input id="drawNameTheta" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
            </label>
          </div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              sinus <input id="drawNameSin" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              cosinus <input id="drawNameCos" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              tangent <input id="drawNameTan" type="checkbox" checked />
            </label>
          </div>
          <div class="row state-table-row">
            <label class="column state-table-column">
              cotangent <input id="drawNameCot" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              secant <input id="drawNameSec" type="checkbox" checked />
            </label>
            <label class="column state-table-column">
              cosecant <input id="drawNameCsc" type="checkbox" checked />
            </label>
          </div>
        </div>
      </details>
      <div class="row separator"></div>
    </aside>
  </div>
</div>