filmov
tv
ZIM Basics 11 - How to Make a Blob and Squiggle on the HTML 5 Canvas with JavaScript and ZIMjs

Показать описание
00:00 examples of blobs and squiggles
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
17:33 EXAMPLE 3. control 2 points together with the control-key pressed
20:24 what is an array of points?
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
31:11 EXAMPLE 5. SQUIGGLE new Squiggle().pos(0,100,CENTER,BOTTOM)
33.37 squiggle example with sca(2)
35:25 squiggle with .sca(10) where strokeObj:{ignoreScale:true}
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
51:50 SQUIGGLE handleSize and allowToggle + editPoints and adding point