ZIM Basics 11 - How to Make a Blob and Squiggle on the HTML 5 Canvas with JavaScript and ZIMjs
Channel: ZIM LEARN
Date: 2021-06-15

Here is a ZIM Basics video about Blob and Squiggle objects in ZIM at https://zimjs.com to code creativity on the HTML 5 Canvas with JavaScript and ZIM powered by CreateJS.  Blobs and Squiggles are ZIM Shapes like Rectangle, Circle, Triangle, Poly and Line but they have Bezier handles that can be adjusted by the user.   Their paths can also be animated and other objects can be animated and dragged on their paths.  Shape tweens can be done between blob or squiggle objects, hitTestPath can be used on their paths and Labels can be placed on along them.  Also see ZIM Beads which place objects along the paths.  SVG can be converted to Blobs and Squiggles with SVGContainer or by passing an SVG path into a Blob or Squiggle.  There are all sorts of examples in the ZIM Example page here https://zimjs.com/examples.html.  Custom shapes can be made here https://zimjs.com/nio/paths.html and a series of animations along paths can be seen here https://zimjs.com/nio/

Come discuss ZIM with us at https://forum.zimjs.com and https://zimjs.com/discord  We would love to see you there!

00:00 examples of blobs and squiggles
04:44 LIBRARIES https://zimjs.com/code.html#libraries
04:58 PIZZAZZ 1-2-3-4 PATH to create blob/squiggle https://zimjs.com/nio/paths.html
07:42 start coding a new Blob({ points:[array] }) as a https://en.wikipedia.org/wiki/Bezier_curve
09:36 showControls:true
10:40 new TransformManager(Blob,"test") to remember the Blob the user made before they come on the website
13:28 intro animate the points of the array
14:39 EXAMPLE 1. BLOB how to change the points of rectangle to move it to an other shape
15:57 EXAMPLE 2. BLOB give 8 points:8, in a circle
16:33 Blob controleType:none in ZIM docs https://zimjs.com/docs.html?item=blob
17:33 EXAMPLE 3. control 2 points together with the control-key pressed
20:24 what is an array of points?
22:58 use pointControls array for animation blob.pointControls[0].mov(0,-100) blob.update();
25:21 EXAMPLE 4. BLOB ANIMATION with props, loop, rewind, events:true
26:53 same animation with Ticker for constantly updating blob
28:01 same animation with "animation" event
29:19 same animation but stops after timeout 5 seconds https://zimjs.com/docs.html?item=timeout
31:11 EXAMPLE 5.  SQUIGGLE new Squiggle().pos(0,100,CENTER,BOTTOM)
32:13 pizzazz.makePath() in ZIMdocs https://zimjs.com/nio/paths.html
33.37 squiggle example with sca(2)
35:25 squiggle with .sca(10) where strokeObj:{ignoreScale:true}
36:25.transformPoints("scale", 3).center().outline()
41:11 zim beads https://zimjs.com/ten/beads.html
45:07 EXAMPLE 6. animate 'small circle' along the squigle-path + time 4s + rewind
46:14 new Circle(50,red).addTo().animate({ props:{path:path} })
46:53 RESULT: hide the handles of the squiggle with interactive:false
48:59 EXAMPLE 7. SVG-PATHS: image.svg converted into editable paths https://zimjs.com/ten.html
49:03 difference between SVGbitmap to SVGcontainer https://zimjs.com/svg
49:45 SVGcontainer https://zimjs.com/docs.html?items=svgToBitmap,SVGContainer
51:50 SQUIGGLE handleSize and allowToggle + editPoints and adding point