$(document).ready () -> 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) -> ctx.clearRect(0, 0, canvas.height, canvas.width) ang1 = angle1 * Math.PI / 180 ang2 = angle2 * Math.PI / 180 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) pos = (angle, radius) -> x = Math.cos(angle) * radius y = Math.sin(angle) * radius {x: x, y: y} ctx.arc(cx, cy, r1, 0, 2 * Math.PI, false) ctx.arc(cx, cy, r2, 0, 2 * Math.PI, false) ctx.closePath() ctx.stroke() ctx.beginPath() ctx.moveTo(cx, cy) l1 = pos(ang1, axis) ctx.strokeStyle = 'darkorange' ctx.lineTo(l1.x + cx, l1.y + cy) ctx.closePath() ctx.stroke() ctx.beginPath() ctx.moveTo(cx, cy) l2 = pos(ang2, axis) ctx.strokeStyle = 'darkred' ctx.lineTo(l2.x + cx, l2.y + cy) ctx.closePath() ctx.stroke() # Calculate slope of spike 1 # Calculate intercept of line 3 m1 = l1.y / l1.x l3 = pos(ang2, r1) # Use the SLOPE of the first radius, but the intercept of the # second radius with the first circle. Everyone got that? b1 = l3.y - l3.x * m1 # Draw line 3 ctx.beginPath() a = 1 + (m1 * m1) b = 2 * m1 * b1 c = (b1 * b1) - (axis * axis) xa1 = ((-1 * b) + Math.sqrt( (b * b) - (4 * a * c))) / (2 * a) xa2 = ((-1 * b) - Math.sqrt( (b * b) - (4 * a * c))) / (2 * a) ya1 = xa1 * m1 + b1 ya2 = xa2 * m1 + b1 ctx.strokeStyle = 'blue' ctx.moveTo(xa1 + cx, ya1 + cy) # ctx.arc(xa1 + cx, ya1 + cy, 5, 0, Math.PI * 2, true) ctx.lineTo(xa2 + cx, ya2 + cy) ctx.closePath() ctx.stroke() angle = 0 slip = -> angle = angle + 1 if angle < 360 drawit(angle, angle + 15) 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() #