Herramienta de visualización de trigonometría en JavaScript-trigonoparty

Vista prévia

Descripción

trigonoparty es una herramienta de visualización de trigonometría ligera que permite al usuario jugar con trigonometría. Escrito en puro JS y HTML5 Canvas sin ninguna dependencia.

Funcionamiento

Inserte el Trigonmetry. js y UI. js en el documento.

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

Crea el HTML para la herramienta de visualización de trigonometría.

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