Skip to content

Instantly share code, notes, and snippets.

@groveriffic

groveriffic/unit_circle.html

Created March 16, 2017 19:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save groveriffic/931d5bebebf91b6bf474ec1ca09c4630 to your computer and use it in GitHub Desktop.
Save groveriffic/931d5bebebf91b6bf474ec1ca09c4630 to your computer and use it in GitHub Desktop.
Download ZIP
Using the stock web stack to refresh my understanding of Trigonometry
Raw
unit_circle.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment