Draw Line + Tangent Line

by bgrins

HTML

<link rel="stylesheet" href="http://bgrins.github.com/ui.anglepicker/ui.anglepicker.css">
<script src="http://bgrins.github.com/ui.anglepicker/ui.anglepicker.js"></script>
<div id="anglepicker" class="ui-anglepicker"></div>

<em id='log'></em>

<div id='svg-container'></div>
<div id='tan-container'></div>

CSS

#anglepicker{
margin: 40px;    
}

#svg-container, #tan-container {
    width: 200px;
    height: 200px;
    position:absolute;
    top:100px;
    left: 100px;
    border: solid 1px;
    
}

JavaScript

var angleToVector = function(ang) {
    function pointOfAngle(a) {
        return {
            x: Math.max(Math.cos(a), 0),
            y: Math.max(Math.sin(a), 0)
        };
    }

    function degreesToRadians(d) {
        return (d * Math.PI) / 180;
    }
    ang = ang % 360;

    var startPoint = pointOfAngle(degreesToRadians(180 - ang));
    var endPoint = pointOfAngle(degreesToRadians(360 - ang));
    return {
        x1: startPoint.x,
        y1: startPoint.y,
        x2: endPoint.x,
        y2: endPoint.y
    };
}

function midpointTangent(ang) {
     return angleToVector( ang + 90);
}

function getLine(vec, mod, color) {
    return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' + '<line x1="' + (vec.x1 * mod) + '" y1="' + (vec.y1 * mod) + '" x2="' + (vec.x2 * mod) + '" y2="' + (vec.y2 * mod) + '" style="stroke:' + color + ';stroke-width:2"/>' +

    '</svg>';
}

$(function() {
    $("#anglepicker").anglepicker({
        change: function(e, ui) {
            $("#log").text(ui.value);
            var vec = angleToVector(ui.value);
            var mod = Math.sqrt(Math.pow(200, 2) + Math.pow(200, 2));
            $("#svg-container").html(
            getLine(vec, mod,  'rgb(255,0,0)')

            );
            $("#tan-container").html(
            getLine(midpointTangent(ui.value), mod,  'rgb(0, 255 ,0) ')

            );
        }
    });
});