$(document).ready () ->
PI = Math.PI
TAU = 2 * PI
ZERO = 1e-15 # Math isn't very precise in Javascript. Grump.
cx = 300 # center of circles
cy = 300 # Center of circles
r1 = 200 # Radius of inner circle.
r2 = 250 # Radius of outer circle.
axis = 275 # Axis Length.
container = $('.canvas_demo')
container.html('')
canvas = $('canvas', container).get(0)
canvas.width = container.width()
canvas.height = container.height()
ctx = canvas.getContext('2d')
drawit = (angle1, angle2) ->
ang1 = angle1 * Math.PI / 180.0
ang2 = angle2 * Math.PI / 180.0
fam = (angle) ->
(angle / Math.PI * 180.0).toFixed(2)
pos = (angle, radius) ->
x = Math.cos(angle).toFixed(15)
y = Math.sin(angle).toFixed(15)
{x: x * radius, y: y * radius}
ctx.lineWidth = 1.0
ctx.strokeStyle = 'green'
ctx.beginPath()
# Draw Axis: X
ctx.moveTo(cx, cy - axis)
ctx.lineTo(cx, cy + axis)
# Draw Axis: Y
ctx.moveTo(cx - axis, cy)
ctx.lineTo(cx + axis, cy)
# Draw Circle One
ctx.arc(cx, cy, r1, 0, TAU, false)
# Draw Circle Two
ctx.arc(cx, cy, r2, 0, TAU, false)
ctx.closePath()
ctx.stroke()
# Center of the circle.
ctx.beginPath()
ctx.moveTo(cx, cy)
# Draw Reference Line.
ctx.strokeStyle = 'darkorange'
l1 = pos(ang1, axis)
ctx.lineTo(l1.x + cx, l1.y + cy)
ctx.closePath()
ctx.stroke()
# Calculate slope of spike 1
# Calculate intercept of line 3
norm_angle = (angle) ->
angle = angle + TAU while angle < 0
angle = angle - TAU while angle > TAU
angle
# Use the SLOPE of the first radius, but the intercept of the
# second radius with the first circle. Everyone got that?
intercept = (reference_angle, angle_distance, radius1, radius2) ->
target_angle = reference_angle + angle_distance
direc = 1
if angle_distance < 0
direc = -1
rf_ang = norm_angle(reference_angle * Math.PI / 180)
tg_ang = norm_angle(target_angle * Math.PI / 180)
tg_pos = pos(tg_ang, radius1)
rf_pos = pos(rf_ang, radius1)
d = (() ->
xd = (tg_pos.x - rf_pos.x)
yd = (tg_pos.y - rf_pos.y)
Math.sqrt((xd * xd) + (yd * yd)))()
nr = Math.asin(d / radius2)
na = norm_angle(rf_ang + (nr * direc))
pos2 = pos(na, radius2)
[{x: tg_pos.x, y: tg_pos.y, a: tg_ang}, pos2]
[pos1, pos2] = intercept(angle1, angle2, r1, r2)
ctx.beginPath()
ctx.strokeStyle = 'royalblue'
ctx.moveTo(pos1.x + cx, pos1.y + cy)
ctx.lineTo(pos2.x + cx, pos2.y + cy)
ctx.closePath()
ctx.stroke()
# Intercept of line 3 and circle 1:
# tang = 4
# drawit(tang, tang + 5)
# drawit(tang, tang - 5)
angle = 0
slip = ->
angle = angle + 1
if angle < 360
ctx.clearRect(0, 0, canvas.height, canvas.width)
drawit(angle, +5)
drawit(angle, -5)
setTimeout(slip, 50);
slip()
#class Arc
# constructor: (container, options) ->
# @container = $(container)
# @height = if @container.height() < @container.width() then @container.height() else @container.width()
# @options =
# start: 0
# end: 360
# gap: 2 # Degrees between arcs.
# thickness: parseInt(@height * 0.24) # The difference between the inner circle and the outer circle
# stroke: 2 # The heaviness of the line around the edge.
# stroke_style: '#3b4449' # The edge color
# gradient_start: '#526c7a'
# gradient_end: '#64a0c1'
# intervals: [60,] # A default interval.
#
# $.extend @options, options
#
# @radius2 = (@height / 2) - (@options.stroke * 2)
# @radius1 = @radius2 - @options.thickness
#
# # Drawing offsets. To be applied last
# @cx = @radius2 + (@options.stroke * 2)
# @cy = @radius2 + (@options.stroke * 2)
#
# @range = @options.end - @options.start
#
# total = 0
# $.each @options.intervals, (i, v) ->
# total += v
#
# range = 360
# @spans = [[0, range * (@options.intervals[0] / total)]]
#
# # The start and end rays of each arc.
# if @options.intervals.length > 1
# $.each [1..@options.intervals.length - 1], (i, v) =>
# @spans.push([@spans[v - 1][1], @spans[v - 1][1] + (360 * (@options.intervals[v] / total))])
#
# clear: () ->
#
# sweep: () ->
# @clear
# $.each @spans, (i, s) =>
# @render(s[0], s[1])
#
#
#class CanvasArc extends Arc
# constructor: (container, options) ->
# super
# @container.append('')
# @canvas = $('canvas', @container).get(0)
# @canvas.width = @container.width()
# @canvas.height = @container.height()
# @ctx = @canvas.getContext('2d')
#
# clear: ->
# @ctx.clearRect(0, 0, @radius2, @radius2)
#
# render: (a1, a2) ->
#
# ang = (angle) ->
# angle * (math.PI / 180)
#
# pos = (angle, radius) ->
# x = Math.cos(angle) * radius
# y = Math.sin(angle) * radius
# [x, y]
#
#
# # The first arc, in the smaller circle
#
# an1 = ang(a1 + @options.gap)
# an2 = ang(a2 - @options.gap)
#
# @ctx.lineWidth = @options.stroke * 2
# @ctx.strokeStyle = @options.stroke_style
# @ctx.beginPath()
# @ctx.arc(@cx, @cy, @radius1, an1, an2, false)
#
# an1s = ang(a1, @radius1)
# [xs, ys] = pos(an1s)
# m = ys / xs
#
# a = 1 + (m * m)
# b = -2 * (cx + (m * m * x1) - (m * y1) + (m * cy))
# c = (cx * cx) + (cy * cy) + (y1 * y1) + (m * m * x1 * x1) - (@radius2 * @radius2) - (2 * m * cy * x1) - (2 * cy * y1)
#
# xa1 = (-b + Math.sqrt( (b * b) - 4 * a * c)) / (2 * a)
# xa2 = (-b - Math.sqrt( (b * b) - 4 * a * c)) / (2 * a)
#
# y =
#
#
#
#
#
#
#
#
#
# [xs, ys] = pos(ang(a1, @radius1)) # This is the point on the actual spike on which the arc is based
# ms = ys/xs
#
#
#
# [x1, y1] = pos(ang(a1 + @options.gap), @radius1) # We can now draw arc1: We have the start and the angle.
#
#
#
#
# an1 = (a1 + (@options.gap)) * (Math.PI / 180)
# an2 = (a2 - (@options.gap)) * (Math.PI / 180)
#
# [x1, y1] = pos(an1, @radius1)
#
# [x2, y2] = pos
#
#
# p3 = pos(an2, @radius2)
#
#
# @ctx.beginPath()
# @ctx.lineTo(p3[0] + @cx, p3[1] + @cy)
# @ctx.arc(@cx, @cy, @radius2, an2, an1, true)
# @ctx.closePath()
#
# lingrad = @ctx.createLinearGradient(0, 0, 0, @radius2 * 2)
# lingrad.addColorStop(1.0, @options.gradient_start)
# lingrad.addColorStop(0.0, @options.gradient_end)
# @ctx.fillStyle = lingrad
# @ctx.stroke()
# @ctx.fill()
#
#
#
##
## a1 = 0
## b1 = 15
## slip = ->
## b1 = b1 + 1
## arc.attr({sweep: [250, 250, a1, b1, 140, 220]})
## if (b1 < 358)
## setTimeout(slip, 16)
## slip()
##
##
## a1 = 0
## b1 = 15
## slip = ->
## b1 = b1 + 1;
## if (b1 < 358)
## sweep(250, 250, a1, b1, 140, 220)
## setTimeout(slip, 16)
##
## slip()
##
#
#
#$(document).ready ->
# $('.wrapper').each ->
# demo = =>
# intervals = $.map $('input[type=hidden]', this).val().split(','), (i) -> parseInt(i)
# c = new CanvasArc $('.canvas_demo', this), {intervals: intervals}
# c.sweep(1.0)
#
# scan = =>
# demo()
## else
## setTimeout(scan, 100)
#
# scan()
#