List of demos

Canvas

  1. Adding a DOM canvas element to a page programmatically - #1
  2. Adding a DOM canvas element to a page programmatically - #2
  3. Importing a DOM canvas element into the Scrawl library
  4. Moving a wheel entity over a quadratic path
  5. Cloning a Block entity
  6. Measuring the length of a Quadratic curve
  7. Scrawl entitys: stamping methods
  8. Moving a wheel entity over a bezier path
  9. Measuring the length of a Bezier curve
  10. Styling a Wheel entity, and its clone
  11. Animating a Wheel entity by manipulating its 'roll' attribute
  12. Moving wheel entity groups along the perimeter of a complex path
  13. Scrawl animation - moving and rotating Blocks
  14. Shape entitys - World Map
  15. 'Hello' (I think) in Chinese
  16. Ellipse Shape entity
  17. Using the Picture entity 'copy' and 'paste' attributes
  18. Determining a Picture entity's color value at the mouse cursor
  19. Amimating a Picture entity using a sprite sheet
  20. Scrawl Path entity - straight lines
  21. Scrawl Path entity - quadratic curve
  22. Scrawl Path entity - bezier curve
  23. Scrawl Path entity - triangles
  24. Scrawl Path entity - pentangle (or star)
  25. Scrawl Path entity - pentagons
  26. Styling the Path entity
  27. Drag-and-drop Shape and Phrase entitys
  28. Using a canvas as the source for a fill/stroke pattern
  29. Animated patterns
  30. Rounded corner rectangle Shape entitys
  31. Bunny rendering test (#1 - naive coding; slow result)
  32. Bunny rendering test (#2 - setting acceleration flags; manual collision detection ... better results)
  33. Bunny rendering test (#3 - single bunny)
  34. Using globalCompositeOperation to build dynamic clipping regions
  35. Entity offsets (handle attributes)
  36. Pinning a Path's Point object to an absolute coordinate
  37. Magnifier over image
  38. Markers on Path entity
  39. Creating gradients to use with entitys
  40. Creating patterns to use with entitys - dynamic pattern loading
  41. Scrawl animation - moving Blocks using percentage values
  42. Scrawl animation - moving Path entitys and Point objects
  43. Scrawl animation - attaching entitys to Point pivots
  44. Scrawl animation - changing entity style attributes
  45. Scrawl animation - attaching entitys to entity pivots
  46. Cell zoom
  47. Scrawl animation - moving entitys via their group
  48. Attaching a Scrawl entity to the mouse cursor
  49. Drag-and-drop Picture entitys, ignoring their transparent zones
  50. Cloning Scrawl entitys
  51. Scrawl animation - moving Cells by manipulating their attributes
  52. Parallax scrolling
  53. Scrawl animation - manipulating entity 'roll' and 'scale' attributes
  54. Scrawl animation - attach an SVG-based Picture entity to the mouse cursor
  55. Scrawl animation - bezier Path entitys
  56. Scrawl animation - move and resize a Phrase entity
  57. Scrawl animation - building Shape entitys dynamically
  58. Using sprite sheets with Picture entitys
  59. Vectors
  60. Scrawl collisions - build a Cell collision field using entitys
  61. Rotating entities in line with their path
  62. 3D Carousel effect with selectable items
  63. Scrawl collisions - Path entity collision zones
  64. Scrawl collisions - Wheel entity collision zones
  65. Scrawl collisions - Path entity collision zones - lines and curves
  66. Dragging entitys between DOM canvases
  67. Text along a path
  68. Loading local image files into a DOM canvas element
  69. Scrawl collisions - Block entity collision zones
  70. Multiple line Phrase entitys
  71. Scrawl collisions - Picture entity collision zones
  72. Scrawl collisions - in-Group collision detection #1
  73. Scrawl collisions - between-Group collision detection #1
  74. Scrawl collisions - between-Group collision detection #2
  75. Scrawl collisions - in-Group collision detection #2
  76. Scrawl collisions - Block.collisionPoints
  77. Scrawl collisions - Wheel.collisionPoints
  78. Global composite operations
  79. Using colors in a Cell collision field
  80. Cell clear and display operations - spirograph simulation
  81. Gradients assigned to cells and entitys
  82. Wrapping text dynamically
  83. Bridge and/or valley text
  84. Image tile puzzle
  85. Radial Gradients assigned to cells and entitys
  86. Interactive Scrawl line graph: crime in Hackney, London
  87. djankey canvas performance test
  88. The effects of the entity .flipReverse and .flipUpend attributes
  89. Scrawl entity stamping methods - with added roll
  90. Kaleidoscope clock
  91. Animating gradients
  92. Spotlight effect using gradient
  93. Grouped filter effect; filtering on wheel perimeter
  94. Position, spin and scale SVG Picture entitys
  95. Fade in/out banner text
  96. Create and run Tickers and Tweens
  97. Sequence multiple tweens on a ticker
  98. Actions and tickers
  99. Gradient and color tween animation
  100. Tween built-in easing engines
  101. Filters
  102. Applying filters at the entity, cell and pad levels
  103. Convert Group of entitys to a single Picture entity
  104. Convert a single, non-picture entity to a Picture entity
  105. Markers on Path entity, all converted to a single Picture entity
  106. Testing Group.getEntitysCollidingWith() and Group.getAllEntitysAt()
  107. Page loading effects
  108. Canvas animated favicon
  109. Using percentage strings to position entitys, and set entity dimensions
  110. The scrawl.makeRegularShape() factory
  111. Cell absolute and relative positioning
  112. Using video as a Picture entity source, and as a pattern
  113. Ticker controls
  114. Perspective transform a Frame entity by manipulating its corners
  115. Attach a Frame entity's corners to a Path entity
  116. Building and running a timeline with Ticker and Tween objects
  117. Ticker event
  118. Checking design.set() functionality
  119. Starfield
  120. Frame-based selector panel
  121. Drag/mousewheel-based timeline animation

Automated bunny tests

  1. Bunny rendering test #1 (automated)
  2. Bunny rendering test #2 (automated)
  3. Bunny rendering test #3 (automated)

Stack

  1. Programmatically creating a stack and <canvas> elements
  2. Attaching an SVG <img> element to the mouse cursor in a Scrawl stack
  3. Adding HTML elements to a Scrawl stack
  4. CSS3 animation in a Scrawl stack <div> using two <canvas> elements
  5. CSS 3d rotating cube in Scrawl stack
  6. Animated cat across an animated 3D background
  7. Easing DOM elements - scrawl Paths
  8. CSS 3d rotating cube in responsive Scrawl stack
  9. Position DOM elements using pivot
  10. Easing DOM elements - Scrawl tweens
  11. Test mouse tracking on transformed canvas element
  12. Animated caption over image
  13. Element positioning within a stack, including scaling; locking canvases to stacks
  14. Setting element width and height as a percentage of the stack's dimensions
  15. Locking elements horizontally and vertically
  16. Setting element width and height as a value relative to the browser viewport (fixed elements)
  17. Lock a Frame entity to a CSS3 3d transformed element
  18. Cloning a Frame entity
  19. Drag and drop entitys and elements via an ElementGroup
  20. Starfield - DOM only, tweening start (top/left) and scale (width/height)
  21. Starfield - DOM only, tweening translate values

Physics engine

  1. Physics engine - particles falling under gravity, wind and air drag
  2. Physics engine - entity-limited forces
  3. Physics engine - in-group collisions
  4. Physics engine - springs: rope demo
  5. Physics engine - cloth in wind

Filters

  1. Scrawl filters - grayscale
  2. Scrawl filters - invert
  3. Scrawl filters - brightness
  4. Scrawl filters - saturation
  5. Scrawl filters - threshold
  6. Scrawl filters - sepia
  7. Scrawl filters - tint
  8. Scrawl filters - blur
  9. Scrawl filters - pixelate
  10. Scrawl filters - matrix
  11. Scrawl filters - channels
  12. Scrawl filters - channelStep
  13. Scrawl filters - sharpen
  14. Scrawl filters - leach
  15. Scrawl filters - separate
  16. Scrawl filters - noise

Save and load

  1. Scrawl load - group with entitys
  2. Scrawl load - entire pad
  3. Scrawl load - patterns
  4. Save Scrawl entitys using .toString()