Author: | ramesaliyev |
---|---|
Views Total: | 188 views |
Official Page: | Go to website |
Last Update: | October 8, 2018 |
License: | MIT |
Preview:

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"> 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>