ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM with Zdog 3D – a good match for the Canvas with JavaScript, CreateJS and ZIMjs

zdogsite

Zdog at http://zzz.dog is a nice easy pseudo 3D engine great for quick code based modeling.  The format is very similar to ZIM and it is easy to bring in to a ZIM app through the ZIM Tag().  Here is a CodePen example of controlling Zdog properties with ZIM components and controls:

zdog

The Tag() code looks like this:

const dogTag = new Tag(300,300)
.center()
.mov(0,-80)
.add(“<canvas id=dog width=300 height=300></canvas>”);

dogTag.tag.style.pointerEvents = “none”;

And then here is what Zdog looks like:

const dog = new Zdog.Illustration({
element: “#dog”,
});
const hemi = new Zdog.Hemisphere({
addTo: dog,
diameter: 300,
stroke: false,
color: blue,
backface: green,
});

You can also just use Zdog controls which are very nice orbit-like controls.  Set dragRotate: true on the Illustration.  In doing so, the Zdog canvas which is overlaid on ZIM will have control and you will not be able to interact with ZIM directly underneath.

ZIM also works with ThreeJS which is perhaps a larger undertaking.  See the THREEjs example here:  https://zimjs.com/three/ or some basics here: https://zimjs.com/bits/view/three.html

threejs

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Information

This entry was posted on June 3, 2019 by in animation, design, interactive media, javascript, library and tagged , , , , , , , , , , .

Categories

%d bloggers like this: