Sine function visualization using JavaScript (React)
Tags: react, math, sine, visualization
Published: 2019-07-12 03:57:31

---
title: Sine function visualization using JavaScript (React)
published: true
description: **"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.
tags: React, Math, Sine, visualization
cover_image: https://thepracticaldev.s3.amazonaws.com/i/op2idw4oo1x2rmrze3jq.gif
---



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

----
**Coding Druid**
Part: Math
Chapter: Trigonometric Function
Section: Javascript (React)

*In other sections, I visualized Trigonometric function (Sine and unit circle) by [MaxMSP](https://www.patreon.com/posts/sine-function-28131990/), [Python](https://www.patreon.com/posts/sine-function-28238879), [Unity3D](https://www.patreon.com/posts/sine-function-28291611):*


![trig-sine-visualization-unity](https://thepracticaldev.s3.amazonaws.com/i/1lwa8c2fi4f0p4pvcp3n.gif)



This time I use javascript to implement it.


There are kinds of ways to draw graphic in javascript in browser:
- Directly in Canvas or WebGL
- d3js
- p5js
- pixijs
- SVG + CSS
- More and more

I found a [React + SVG example](https://codepen.io/HunorMarton/pen/ggQGqQ) by chance, and I very like it.

![React + SVG example](http://floatcc.intplusplus.org/WX20190706-174205@2x.png)

The SVG descripted Sine function in a marked way:

![svg](http://floatcc.intplusplus.org/svg.png)

And binding and updating the value of param `degree` along x-axis taking advantage of the updating mechanism of React State. 
 
![reactstate](http://floatcc.intplusplus.org/reactstate.png)

I think its a beautiful and charming way.

<br/>

I rarely used SVG in my past projects. Then I learn it from this example and cool! Thanks for its [author](https://codepen.io/HunorMarton/pen/ggQGqQ).

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](https://reactjs.org/docs/hooks-intro.html) is great. I just followed its rules and implemented the functions like that:

![reacthooks](http://floatcc.intplusplus.org/reacthooks.png)

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](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects).

**Final Effect**:

![sine-visualization-reactjs](https://thepracticaldev.s3.amazonaws.com/i/op2idw4oo1x2rmrze3jq.gif)
I changed the color style to make a distinction with the original example.


**Talk is cheap. Show me the code!**

This demo of the "Coding Druid" series is open source here:
https://github.com/avantcontra/coding-druid


You can find more resources in my site [floatbug.com](https://www.floatbug.com).
 Or you may **buy me a coffee** in my [Patreon](https://www.patreon.com/avantcontra). Your encouragement is my driving energy!


Cheers~

Contra


- Website: [floatbug.com](https://www.floatbug.com)
- Github: [avantcontra](https://github.com/avantcontra)
- Facebook: [avantcontra](https://facebook.com/avantcontra)
- Twitter: [avantcontra](https://twitter.com/avantcontra)
- Instagram：[avantcontra](https://www.instagram.com/avantcontra)
- Patreon (**buy me a coffee** XD): [avantcontra](https://www.patreon.com/avantcontra)