Show HN: Trigonoparty – JavaScript trigonometry visualization

[bazooka2th]

This is awesome! Just a few days ago, as part of my schoolwork, I made this: 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... 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...

something like this: 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!

[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

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

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

[ramesaliyev]

You're right! I've added a new section named 'general options' and 'rounding numbers' option under it to you can disable rounding. I hope it helps, if not please tell.

And thanks about other great suggestions, those are really interesting. I'll check and try to bring them into party!

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

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

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

[daef]

I also always used the perpendicular to x-axis version, but I like this version better bcs the tangent tangents in the point of interrest, plus cotangent and tangent are colinear

[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

[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 :)