DEV Community

loading...
Cover image for Animate objects along a user editable path in two lines of JavaScript.

Animate objects along a user editable path in two lines of JavaScript.

Dr Abstract
Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator
・1 min read

In ZIM, we can do so much with so little! We are constantly coming in at 25%-50% the code of competing platforms - wow! Here is an example - copy this and paste it at https://zimjs.com/lab/ to try it out:

const track = new Beads(new Blob({
    borderColor:dark,
    borderWidth:50, 
    radius:200
}), new Circle(20,[pink,orange,blue])).center();
track.beads.animate({
    props:{path:track.path},
    time:10,
    loop:true,
    ease:"linear"
});
Enter fullscreen mode Exit fullscreen mode

ZIM Beads is just one of many things you can do with ZIM on the Canvas. Here is a link to the Beads Mini-site. There are tabs at the top right of the site for more examples.


If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.

Discussion (2)

Collapse
zimlearn profile image
Dr Abstract Author

Just a note to those devs who cringe at us using Blob as a class... ya... truthfully, we built Blob in ZIM before we knew there was a JS Blob. If you need the JS Blob it is stored on the document... so document.Blob. Or you can set zns=true to require ZIM to use the zim namespace and then the JS Blob will be available as Blob. You can then zimplify("Blob") and you will get all ZIM commands without namespace except for Blob which you can then use zim.Blob() to access.

Collapse
karelrosseel profile image
Karel Rosseel

I like it a lot.. for example used in the chain of a bicyclehttps://zimjs.com/explore/bike.html