“Coding Druid” series is my horizontal programming practice notes, each part around a topic like mathematical, physics, electronic, graphics, sound, etc., implemented in several programming languages.
Chapter: Trigonometric Function
In the previous section, I visualized Trigonometric function (Sine and unit circle) by MaxMSP:
- Directly in Canvas or WebGL
- SVG + CSS
- More and more
I found a React + SVG example by chance, and I very like it.
The SVG descripted Sine function in a marked way:
And binding and updating the value of param
degree along x-axis taking advantage of the updating mechanism of React State.
I think its a beautiful and charming way.
I rarely used SVG in my past projects. Then I learn it from this example and cool! Thanks for its author.
While React is my most commonly used library in front-end projects for years. But I’m new with its latest features like React Hooks. So I study and refactor the React State part of the example using React Hooks.
The Hooks official document is great. I just followed its rules and implemented the functions like that:
The Hooks is simple and powerful, but you should take care the performance issue. Because the
useEffect() will run both after the first render and after every update. The offical tips here.
Talk is cheap. Show me the code!
This demo and the “Coding Druid” series is open source here: