Scrawl.js - demonstration 004

Moving a wheel entity over a quadratic path

Extensions: path, wheel, phrase, factories, animation

Pink ball travels at a constant speed

Golden ball moves slower around corners, and makes up time on the straighter sections

Drag the blue dots to shape the red line

Scenario: testing scrawl.init(), scrawl.loadModules(), scrawl.makeQuadratic(), scrawl.newAnimation(), scrawl.newGroup(), scrawl.newPhrase(), scrawl.newTween(), scrawl.newWheel(), scrawl.render(), Group.getSpriteAt(), Pad.getMouse(), Path.buildPositions(), Phrase.clone(), Point.setToFixed(), Tween.clone(), Tween.nextTween,, Wheel.clone(), Wheel.pathSpeedConstant, Wheel.pickupSprite(), Wheel.dropSprite()


  1. create two groups: one to hold details of animated balls; the other for detecting interactions with curve handles
  2. create 3 Wheel sprites to act as handles for shaping a Path sprite
  3. create the quadratic Path sprite
  4. fix Path sprite point objects to the Wheel sprite handles
  5. create/clone 3 Phrase sprite labels; pivot them to their respective Wheel sprite
  6. create/clone 2 Wheel sprites; 'path' them to the Path sprite
  7. define event listeners for dragging and dropping the Wheel sprite handles
  8. create/clone Tween objects for animating the other Wheel sprites along the Path sprite
  9. create an Animation object
  10. load Scrawl modules; initialize Scrawl; run scenario code

During the animation:

  1. test cursor position
  2. if cursor not over canvas, stop dragging any sprites
  3. if user initiates mousedown while over canvas, test for hits with Wheel handle sprites
  4. if user mousedown over Wheel handle sprite, pivot sprite to cursor
  5. if user mouseup over canvas, stop dragging any sprite
  6. when user drags Wheel handle sprite, recalculate Path sprite data
  7. tween animations should run continuously

Known browser issues: none

Result images:

image of expected test result