Trigonometry Visualisation Tool In JavaScript – trigonoparty

Category: Javascript , Recommended | October 8, 2018
Author: ramesaliyev 203 views Go to website October 8, 2018 MIT

Description:

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">
</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">
<div class="row zebra">
<div class="column">
<input id="radiusRange" type="range" min="0" max="500" step="5" />
</div>
<div class="column">
</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">
</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">
</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>```