Sine + Cosine

index.html

<div id="app">Loading...</div>

script.babel

/*********
* REACT
**********/
class Sinus extends React.Component {
  constructor() {
        super();

        this.state = {
            degree: 0
        };

        setInterval(this._tick.bind(this), 30);
    }
    _tick() {
      if(this.state.degree < 360) {
        this.setState({degree: this.state.degree+1});
      }else{
        this.setState({degree: 0});
      }
    }
    render() {
      return (<SinusDraw degree={this.state.degree}/>);
    }
    
}

const SinusDraw = ({degree}) => (
  <div id='container'>
      <svg width='940' height='960' xmlns='http://www.w3.org/2000/svg' >
        <g transform='translate(20 580), rotate(-45)'>
          
          <text x="0" y="100">
              sin(
          </text>
          
          <line className='grey helper' x1={Math.cos(degree/180*Math.PI)*100 +  100+110} y1={-Math.sin(degree/180*Math.PI)*100 + 100}
            x2={degree+460} y2={-Math.sin(degree/180*Math.PI)*100 + 100}/>
          
          <line className='grey helper' x1={Math.cos(degree/180*Math.PI)*100 +  100+110} y1={-Math.sin(degree/180*Math.PI)*100 + 100}
            x2={Math.cos(degree/180*Math.PI)*100 + 210} y2={degree+360}/>
          
          
          
          <g transform='translate(110 0)'>
            <line className='grey' x1="100" y1="100" x2="200" y2="100" />
            
            
            <circle className='grey' cx="100" cy="100" r="100"/>
            <path d={'M 130 100 A 30 30 0 ' +(degree <=180 ? '0': '1')+ ' 0' + (Math.cos(degree/180*Math.PI)*30 + 100) + ' ' + (-Math.sin(degree/180*Math.PI)*30 + 100)} />
            <line className='grey' x1="100" y1="100" x2={Math.cos(degree/180*Math.PI)*100 + 100} y2={-Math.sin(degree/180*Math.PI)*100 + 100} />
            <g transform={'translate('+(Math.cos(degree/180*Math.PI)*100 + 100+10)+' '+(-Math.sin(degree/180*Math.PI)*100 + 100)+'), rotate(45)'}>
              <text>
                {degree}°
              </text>
            </g>
          </g>
          
          <text x="370" y="100" >
              ) =
          </text>
          
          <g transform='translate(460 0)'>
            <line className='grey' x1="0" y1="100" x2="360" y2="100" />
            
            <polyline className='grey'
              points={Array.from({length: 360}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <polyline 
              points={Array.from({length: degree}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <text x={degree+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
              {parseFloat(Math.sin(degree/180*Math.PI)).toFixed(4)}
            </text>
          </g>

          <g transform='translate(210, -110), rotate(90)'>
            <text>
                cos(
            </text>
          </g>
          
          <g transform='translate(210, 260), rotate(90)'>
            <text>
              ) =
            </text>
          </g>
          
          <g transform='translate(110 360)'>
            <line className='grey' x1="100" y1="0" x2="100" y2="360" />
            
            <polyline className='grey'
              points={Array.from({length: 360}, (value, key) => {
                return (Math.cos(key/180*Math.PI)*100 + 100) + " " + key
              })} />
            <polyline 
              points={Array.from({length: degree}, (value, key) => {
                return (Math.cos(key/180*Math.PI)*100 + 100) + " " + key
              })} />
            <g transform={'translate('+(Math.cos(degree/180*Math.PI)*100 + 100)+' '+(degree+10)+'), rotate(90)'}>
              <text >
                {parseFloat(Math.cos(degree/180*Math.PI)).toFixed(4)}
              </text>
            </g>
          </g>
        </g>
      </svg>
    </div>
)


ReactDOM.render(
  <Sinus />,
  document.getElementById('app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

sine-cosine.markdown

Sine + Cosine

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono');

$primary-color: #FF0050;
$secondary-color: #C1003D;
$tertiary-color: #60001E;
$background-color: #440015;

html {
  background-color: $background-color;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

svg {
  stroke: $secondary-color;
  fill: transparent;
  stroke-width: 8px;
}
.grey {
  stroke: $tertiary-color;
  fill: transparent;
  stroke-width: 3px;
}
.helper {
  stroke-dasharray: 5, 5;
}
text {
  font-family: 'Droid Sans Mono', monospace;
  font-size: 20px;
  fill: $primary-color;
  stroke: $primary-color;
  stroke-width: 1px;
}