I am developing a graphics application (JavaScript browser based) and one function of the app is to draw a poly-line (mouse clicks will determine the relevant points along the poly-line). The app currently extends a guide line from the last click point and shows a line that re-orientates itself on screen as the user moves the mouse to a next click point (I think this is termed a rubber band type effect).

The geometric problem I am trying to solve is to make sure that the rubber band line between one point (the last point clicked) and the next point (still to clicked) is forced to subtend a certain angle. For example if a complete rotation is divided into 12 (30 degree segments from the horizontal and vertical axis with 0,0 at the top left) then the guide line (rubber band) is forced to be drawn so as to maintain a subtended angle of 30 degrees. The affect of this will be that the guide line will show a line between the last point clicked and the possible next point to be clicked which has been adjusted from the actual point where the mouse pointer is located to maintain and line-up with the imposed 30 degree segment lines.

I appreciate that there is probably a reasonably detailed amount of geometry (trigonometry) to perform this task but it boils down to finding the desired point (for the end of the rubber band line) given the last clicked point and the current mouse cursor position point where this desired point maintains the required angle as the user moves the mouse through the various segments that fan out around the last clicked point. This desired point will form the next point on the poly-line if the user clicks the mouse. The rubber band will give the impression of snapping to snap points as the user moves through segments but snap points that are based on the subtended angle determined by which fixed segment lines are closest. See diagram

The red line represents the actual position of the mouse as a user moves from the last clicked point and the blue lines represents the lines of a 30 degree segment that will represent the guide line to be drawn (which ever is closest blue line to the current mouse position) - only a blue line is to be shown as the rubber-band.


Is it best to work in angles or radians to solve this problem.

Sorry for such a long winded post I hope my meaning is reasonably clear.

Any ideas/pointers will be much appreciated. Thanks in advance