# Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

# Unit Circle Angle Open in Sandbox

## Description

An interactive to demonstrate how a point along the circumference of the unit circle also defines an angle in the polar coordinate system.

## Script

``````/**
* @title Unit Circle Angle
* @description An interactive to demonstrate how a point along the circumference of the unit circle also defines an angle in the polar coordinate system.
* @tags [math]
* @date June 9, 2019
* @author Kurt Bruns
*/
import { Interactive } from '../../index.js';
export default function main(id) {
// Initialize the interactive
let interactive = new Interactive(id);
interactive.window = false;
interactive.width = 320;
interactive.height = 340;
interactive.originX = interactive.width / 2;
interactive.originY = 125;
// Create a circle
let circle = interactive.circle(0, 0, 100);
// Create a control
let control = interactive.control(circle.r * Math.cos(-1), circle.r * Math.sin(-1));
control.constrainToCircle(circle.cx, circle.cy, circle.r);
// Create a path
let path = interactive.path('');
path.root.style.fill = 'rgb(236,236,236)';
path.update = function () {
let flag = (control.y > 0) ? 1 : 0;
path.d = `M 0 0
L \${circle.r} 0
L \${circle.r / 3} 0
A \${circle.r / 3} \${circle.r / 3} 0 \${flag} 0 \${control.x / 3} \${control.y / 3}
L \${control.x} \${control.y}
z`;
};
path.update();
// Create a point at the origin
let point = interactive.circle(0, 0, 3);
point.fill = 'black';
// Create a checkbox to toggle between displaying radians and degrees
let degrees = interactive.checkBox(-80, 180, "degrees", false);
// Gets the normalized angle between zero and tau. TODO: Maybe transform the
// coordinate system so that the positive y-direction is up instead of down.
// UPDATE: transform = 'scale(1,-1)' applied to the main svg  didn't quite work
// as expected: the text element was upside down, but maybe that could be
// reversed? bleh.
function getAngle() {
let angle;
if (control.y <= 0) {
angle = Math.abs(Math.atan2(control.y, control.x));
}
else {
angle = Math.PI * 2 - Math.atan2(control.y, control.x);
}
if (degrees.value) {
return (angle * 180 / Math.PI).toFixed(1) + '°';
}
else {
}
}
// Create text to display the current angle. TODO: add a check-box to change