Skip to content

Instantly share code, notes, and snippets.

@groveriffic

groveriffic/unit_circle.html

Created March 16, 2017 19:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save groveriffic/931d5bebebf91b6bf474ec1ca09c4630 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save groveriffic/931d5bebebf91b6bf474ec1ca09c4630 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. groveriffic created this gist Mar 16, 2017.
    72 changes: 72 additions & 0 deletions unit_circle.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    <html>
    <head>
    <title>Trigonometry in the Unit Circle</title>

    <style>
    circle, line {
    fill: none;
    stroke: black;
    stroke-width: 0.01;
    }
    </style>

    <script>
    // TODO: Labels
    var svg;

    function setLine(id, x1, y1, x2, y2) {
    var el = svg.getElementById(id);
    el.setAttribute("x1", x1);
    el.setAttribute("x2", x2);
    el.setAttribute("y1", y1);
    el.setAttribute("y2", y2);
    }

    function update(theta) {
    var sin = Math.sin(theta);
    var cos = Math.cos(theta);
    var sec = 1/cos;
    setLine("hypotenuse", 0, 0, cos, sin);
    setLine("sin", cos, 0, cos, sin);
    setLine("cos", 0, sin, cos, sin);
    setLine("tan", cos, sin, sec, 0);
    }

    document.addEventListener("DOMContentLoaded", function(e) {
    svg = document.getElementById("svg");
    svg.addEventListener("mousemove", function(e) {
    var p = svg.createSVGPoint();
    p.x = e.x;
    p.y = e.y;
    p = p.matrixTransform(svg.getScreenCTM().inverse());
    update(Math.atan2(p.y, p.x));
    });
    });
    </script>
    </head>
    <body>

    <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="-2 -2 4 4">

    <defs>
    <!--
    <marker id="Length" viewBox="0 0 10 10">
    <path d="M 0 0 " />
    </marker>
    -->
    </defs>
    <circle cx="0" cy="0" r="1" />
    <line id="hypotenuse" />

    <line id="sin" />
    <line id="cos" />
    <line id="tan" />

    </svg>

    <svg id="sandbox" xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 100 100">
    <path d="M 0,0 " />
    </svg>

    </body>
    </html>