demo_03.coffee

We want to rotate graphical objects at varying speeds to produce interesting visual effects.

define ['paper'], (paper) ->  # package everything as a RequireJS module

Rotating objects

Compute a point's position from its angle $\alpha$ and radius $r$ according to $$(x,y) = r \, (\cos \alpha, \sin \alpha)$$

  position = (alpha, radius) ->
    [radius * Math.cos(alpha), radius * Math.sin(alpha)]

Rotate a Paper.js item around a rotation center.

  rotate = (item, alpha, radius, center) ->
    item.position = position(alpha, radius)
    item.translate center
    item

The animation

  example = (canvasID) ->

Setup the canvas

    canvas = document.getElementById(canvasID)
    paper.setup canvas

Create two circles

    circle1 = new paper.Path.Circle center: [100,100], radius: 10, fillColor: "green"
    circle2 = new paper.Path.Circle center: [100,100], radius: 20, fillColor: "indigo"

Rotate circles on every animation frame. The paper.view.onFrame function is called approximately 60 times per second.

    alpha = 0
    paper.view.onFrame = ->
      rotate circle1, 1.1*alpha, 50, [200, 100]
      rotate circle2,    -alpha, 30, [200, 120]
      alpha = (alpha + 0.05)

Return the example as a function that can be used via RequireJS.

  example