5 ms·
Show HN: Trigonoparty – JavaScript trigonometry visualization
- atrilumen 8y agoHey, may I suggest calling it Trig Party? (trig.party is available as of this comment.)
- ramesaliyev 8y agothank you for suggestion! honestly i dont want to add another domain to my "endless domain hell", but still i will think about it :)
- deleted 8y ago[deleted]
- kroltan 8y agoPretty nice. It glitches on the 4th quadrant while dragging though, at least in Firefox.
- ramesaliyev 8y agothanks a lot for feedback, fixed it!
- gedy 8y agoVery 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 8y agoThat 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 8y agoWell, thanks!
- Wafje 8y agoInteresting, 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 8y agoI 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
- deleted 8y ago[deleted]
- daef 8y agoI 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
- arriu 8y agoThis is awesome! It might also make sense to draw out the sine or cosine curves as the point moves about the circle.
- ramesaliyev 8y agoThanks! I really like the idea of drawing curves, will do it!
- chris_wot 8y agoInteresting 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 8y agoSince sinus also refers to a curved surface, this is surprisingly apt.
- chris_wot 8y agoI find it funny and ironic :-) One of the more obscure stories in mathematics.
- quickthrower2 8y agoIt also refers to a cavity in Latin, e.g. a nose
- thaumasiotes 8y agoDo 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=sinus0#lexicon http://www.perseus.tufts.edu/hopper/morph?l=sinus&la=la&can=... 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.
- Sohcahtoa82 8y agoWow...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 8y agoReally happy to see that trigonoparty lights up things for you! :)
- bazooka2th 8y agoThis 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/File:Unit_Circle_Definitions_of_Six_Trigonometric_Functions.png 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/File:Trigonometric_functions.svg https://en.wikipedia.org/wiki/Trigonometric_functions#/media... something like this: https://www.geogebra.org/m/cNEtsbvC https://www.geogebra.org/m/cNEtsbvC
- ramesaliyev 8y agoI 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 8y agoYou're right, it was set as private but it's fixed now :)
- ramesaliyev 8y agoYour 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 8y agoFor 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 8y agoThey're golden angles! https://link.springer.com/content/pdf/10.1007%2Fs00004-015-0285-1.pdf 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 8y agoYou'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!
- noneucat 8y agoThis was very enlightening for me, thank you!
- ramesaliyev 8y agoReally glad to hear that!
- perilunar 8y agoThis 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 8y agoThanks! 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 :))