
Show HN: Trigonoparty – JavaScript trigonometry visualization - ramesaliyev
https://ramesaliyev.com/trigonoparty/
======
bazooka2th
This is awesome! Just a few days ago, as part of my schoolwork, I made this:
[https://www.geogebra.org/m/xcfev76v](https://www.geogebra.org/m/xcfev76v)

The color schemes we used are similar, I kind of copied mine from this image
on Wikipedia:
[https://en.wikipedia.org/wiki/Trigonometric_functions#/media...](https://en.wikipedia.org/wiki/Trigonometric_functions#/media/File:Unit_Circle_Definitions_of_Six_Trigonometric_Functions.png)
I wonder if the author of this site did the same?

What would be REALLY cool would be a connection between this diagram and the
graphs of the functions:
[https://en.wikipedia.org/wiki/Trigonometric_functions#/media...](https://en.wikipedia.org/wiki/Trigonometric_functions#/media/File:Trigonometric_functions.svg)

something like this:
[https://www.geogebra.org/m/cNEtsbvC](https://www.geogebra.org/m/cNEtsbvC)

~~~
ramesaliyev
I couldnt see your work, it says 'unauthorized', maybe you didnt make it
public?

Actually i totaly go random with colors but its nice coincidence :) I really
like it!

And about graphs of functions; yes! arriu suggested the same below, and this
graphic from wikipedia is a good reference point for me, thanks! I have an
idea to how to visualize graph of functions from unit circle to make it simple
to understand! Will start to work on it in next week i hope.

Thanks for great suggestion, and if you make your work public i really would
want to see it!

~~~
bazooka2th
You're right, it was set as private but it's fixed now :)

~~~
ramesaliyev
Your work is absolutely briliant and gave me idea to draw theta angle like you
did! Also i'm gonna include an option to draw values of lines in canvas.

------
no_identd
For some mental fun, try these values for the angle and see what observations
you can make about the results:

76.34541

126.869896

137.50777

However, I find it a bit bothersome that the input field doesn't properly
accept floats, and the floats get rounded unnecessarily. Please don't do that,
or have an option to customize it.

Also, you miss the more obscure trigonometry values:

[http://datagenetics.com/blog/march22017/index.html](http://datagenetics.com/blog/march22017/index.html)

Namely, to quote from the above page:

Versine, Vercosine, Coversine, Covercosine, Exsecant, Excosecant, Haversince,
Havercosine, Hacoversine, Hacovercosine

You might also wish to expand this by adding, in addition to the already shown
degrees & radians, the following angle measures:

* Gradian * Turns * Arcminutes/Arcseconds

~~~
bazooka2th
They're golden angles!
[https://link.springer.com/content/pdf/10.1007%2Fs00004-015-0...](https://link.springer.com/content/pdf/10.1007%2Fs00004-015-0285-1.pdf)

Well the last one is. The significance of the other two angles, in OPs
diagram, is unclear to me.

------
gedy
Very nice! I had a trig teacher years ago that taught only using formulas,
without showing or explaining the unit circle. It was so confusing, hated the
class until I discovered the unit circle diagram like this, then it all made
much more sense.

~~~
ramesaliyev
That was my exact motivation while making this! This visualization helps me
alot to understand trigonometry so i think it will be good to make a sandbox
out of it. I hope this helps somebody who trying to understand basics of
trigonometry.

~~~
mimischi
Well, thanks!

------
chris_wot
Interesting fact, the sine is a mistranslation of the original Arabic
abbreviation jb, which itself is a transliteration of the Sanskrit word for
half the chord, jya-ardha. Basically the original translator they thought that
the word was jaib ("bosom"), which was then translated to sinus which means
much the same word.

So our most famous and important trig term is basically an error.

~~~
thaumasiotes
Since sinus also refers to a curved surface, this is surprisingly apt.

~~~
quickthrower2
It also refers to a cavity in Latin, e.g. a nose

~~~
thaumasiotes
Do you have a citation for this? I don't see such a sense among the glosses
given here:
[http://www.perseus.tufts.edu/hopper/morph?l=sinus&la=la&can=...](http://www.perseus.tufts.edu/hopper/morph?l=sinus&la=la&can=sinus0#lexicon)

The closest one appears to be II.A.2.d:

> _A hiding-place, place of concealment_ : ut in sinu gaudeant, gloriose loqui
> desinunt, qs. _in their bosoms_ (or, as we say, _in their sleeve_ ), i. e.
> _in secret_ , Cic. Tusc. 3, 21, 51; “so of secret joy,” _Tib. 4, 13, 8_ :
> “in tacito cohibe gaudia clausa sinu,” Prop. 2, 25 (3, 20), 30; Sen. Ep.
> 105, 3; cf. “also: plaudere in sinum,” _Tert. Pudic. 6_ : suum potius
> cubiculum ac sinum offerre contegendis quae, etc., _the secrecy or
> concealment of her bed-chamber_ , Tac. A. 13, 13: “abditis pecuniis per
> occultos aut ambitiosos sinus,” i. e. _in hiding places offered by obscurity
> or by high rank_ , id. H. 2, 92.—

But those examples make it pretty clear that the sense of _sinus_ is secrecy,
not emptiness. Presumably this comes from the idea that you can hold ideas and
opinions within your heart (in your breast, _sinus_ ) and no one else can see
them.

------
Wafje
Interesting, I have always visualized tangent differently. A line
perpendicular to the X axis that stops at the intersection with the extension
of the radius line.

~~~
ramesaliyev
I think its same thing just in another point of view, here i rotate the canvas
to explain my thought:
[https://image.ibb.co/ce0rye/qwe.png](https://image.ibb.co/ce0rye/qwe.png)

------
Sohcahtoa82
Wow...I never actually knew the significance of secant and cosecant, or how
tangent/cotangents' lengths were related to the unit circle and right
triangle. I knew the formulas to calculate them, but not really what they
truly meant.

(Also, my username is relevant)

~~~
ramesaliyev
Really happy to see that trigonoparty lights up things for you! :)

------
perilunar
This is a really nice visualisation.

My only comment is that while canvas is certainly effective, if you built it
in SVG you would only need to animate the points and not draw the whole thing
each time step. Admittedly not a big saving though.

~~~
ramesaliyev
Thanks! Happy to see you like it! And you're right about SVG, but i have plans
to draw additional things also, like graphics of functions, so im not sure if
SVG would be flexible as canvas. (or i can use it effeciently :))

------
kroltan
Pretty nice.

It glitches on the 4th quadrant while dragging though, at least in Firefox.

~~~
ramesaliyev
thanks a lot for feedback, fixed it!

------
arriu
This is awesome! It might also make sense to draw out the sine or cosine
curves as the point moves about the circle.

~~~
ramesaliyev
Thanks! I really like the idea of drawing curves, will do it!

------
noneucat
This was very enlightening for me, thank you!

~~~
ramesaliyev
Really glad to hear that!

------
atrilumen
Hey, may I suggest calling it Trig Party? (trig.party is available as of this
comment.)

~~~
ramesaliyev
thank you for suggestion! honestly i dont want to add another domain to my
"endless domain hell", but still i will think about it :)

