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

#canvas #zim #zimjs #amazing

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"
});

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.

Top comments (2)

Dr Abstract • Oct 22 '20

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.