Tangent

index.html

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

script.babel

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

      this.state = {
        degree: 0
      };
    
      this.lastTime = null;
      this.animate = this.animate.bind(this);
      requestAnimationFrame(this.animate);
    }
  
    animate(time) {
      if (this.lastTime != null) {
        const delta = (time - this.lastTime) * 0.05;
        this.setState({degree: Math.round(this.state.degree+delta) % 360});
      }
      this.lastTime = time;
      requestAnimationFrame(this.animate);
    }

    render() {
      return (<TangentDraw degree={this.state.degree}/>);
    }
    
}

const TangentDraw = ({degree}) => (
  <div id='container'>
      <svg width='940' height='1040' xmlns='http://www.w3.org/2000/svg' >
        <g transform='translate(20 420)'>
          
          <text x="0" y="100">
              tan(
          </text>
          
          <line className='grey helper' x1="310" y1={-Math.tan(degree/180*Math.PI)*100 + 100}
            x2={degree+460} y2={-Math.tan(degree/180*Math.PI)*100 + 100} />
          
          <g transform='translate(110 0)'>
            <TanCircleDraw degree={degree}/>
          </g>
          
          <text x="370" y="100">
              ) =
          </text>
          
          <g transform='translate(460 0)'>
            <TanCurveDraw degree={degree}/>
          </g>
        </g>
      </svg>
    </div>
)

const TanCircleDraw = ({degree}) => (
  <g>
    <line className='grey' x1="100" y1="100" x2="200" y2="100" />
    <line className='grey' x1="200" y1="-600" x2="200" y2="700"/>

    <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} />
    <line className='grey' x1="100" y1="100" x2="200" y2={-Math.tan(degree/180*Math.PI)*100 + 100} />
    <text x={Math.cos(degree/180*Math.PI)*100 + 100+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
      {degree}°
    </text>
  </g>
)
  


class TanCurveDraw extends React.Component {
  constructor() {
    super();
  }
  
  tan(from, to, degree) {
    to = degree < to ? degree : to;
    return Array.from({length: to-from}, (value, key) => {
      return key;
    }).filter((key) => {
      return Math.abs(Math.tan((key+from)/180*Math.PI)*100) < 600;
    }).map((key) => {
      return (key+from) + " " + (-Math.tan((key+from)/180*Math.PI)*100 + 100);
    });
  }
  
  render() {
    return(
      <g>
        <line className='grey' x1="0" y1="100" x2="360" y2="100" />

        <polyline className='grey'
          points={this.tan(0,90)} />
        <polyline className='grey'
          points={this.tan(90,270)} />
        <polyline className='grey'
          points={this.tan(270,360)} />
        
        <polyline
          points={this.tan(0,90,this.props.degree)} />
        <polyline
          points={this.tan(90,270,this.props.degree)} />
        <polyline
          points={this.tan(270,360,this.props.degree)} />

        <text x={this.props.degree+10} y={-Math.tan(this.props.degree/180*Math.PI)*100 + 100}>
          {parseFloat(Math.tan(this.props.degree/180*Math.PI)).toFixed(4)}
        </text>
      </g>
    )
  }
}


ReactDOM.render(
  <Tangent />,
  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>

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;
  overflow: hidden;
}

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;
}

tangent.markdown

Tangent

A Pen by HARUN PEHLİVAN on CodePen.

License.