Tangent + Cotangent

index.html

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

script.babel

Math.ctg = function(x) { 
  return 1 / Math.tan(x); 
};

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

        this.state = {
            degree: 0
        };

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

const TangentCotangentDraw = ({degree}) => (
  <div id='container'>
      <svg width='2000' height='1360' xmlns='http://www.w3.org/2000/svg' >
        <g transform='translate(120 780), rotate(-45)'>
          
          <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} />
          
          <line className='grey helper cotan' x1={Math.ctg(degree/180*Math.PI)*100 + 100+110} y1="0"
            x2={Math.ctg(degree/180*Math.PI)*100 + 210} y2={degree+360}/>
          
          
          
          <g transform='translate(110 0)'>
            <CircleDraw degree={degree} />
          </g>
          
          <text x="370" y="100" >
              ) =
          </text>
          
          <g transform='translate(460 0)'>
            <TanCurveDraw degree={degree} />
          </g>

          <g className='cotan' transform='translate(210, -110), rotate(90)'>
            <text>
                cot(
            </text>
          </g>
          
          <g className='cotan' transform='translate(210, 260), rotate(90)'>
            <text>
              ) =
            </text>
          </g>
          
          <g transform='translate(110 360)'>
            <CotanCurveDraw degree={degree} />
          </g>
        </g>
      </svg>
    </div>
)

const CircleDraw = ({degree}) => (
  <g>
    <circle className='grey' cx="100" cy="100" r="100"/>
    
    <line className='grey' x1="100" y1="100" x2="200" y2="100" />
    <line className='grey' x1="200" y1="-1500" x2="200" y2="1500"/>
    <line className='grey cotan' x1="-1500" y1="0" x2="1500" y2="0"/>
    
    <path className='cotan' 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} />
    <line className='grey cotan' x1="100" y1="100" x2={Math.ctg(degree/180*Math.PI)*100 + 100} y2="0" />
    
    
    <g className='cotan' 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>
)
  

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) < 2000
    }).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>
    )
  }
}

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

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

        <g transform={'translate('+(Math.ctg(this.props.degree/180*Math.PI)*100 + 100)+' '+(this.props.degree+10)+'), rotate(90)'}>
          <text >
            {parseFloat(Math.ctg(this.props.degree/180*Math.PI)).toFixed(4)}
          </text>
        </g>
      </g>
    )
  }
}


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

$primary-color2: #cccccc;
$secondary-color2: #aaaaaa;
$tertiary-color2: #664444;

$background-color: #440015;

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

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

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

tangent-cotangent.markdown

Tangent + Cotangent

A Pen by HARUN PEHLİVAN on CodePen.

License.