ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS

For our last Badge, we will stop the physics and animate all the balls up to a dangly chain. We will then animate in a message and button to link to the Badges tutorial for the app.

Next, we will animate() the balls up towards the top with an animation sequence. This animates each ball in the sequence the same but delayed in time. If we animate to {y:100} all the balls would go to the same height and the chain would be straight. We want the chain to droop a little like in real life. So we will use a ZIM VEE value as the y value of the animation. ZIM VEE uses zik() to pick a value for each animation sequence. Click the link for zik() to see the various options for ZIM VEE values. An example would be passing {y:{min:100,max:200}} to animate each ball to a random number between 100 and 200. Or {y:[100,150,200]} for a random choice of these values. We want to pass a function with a little equation that has values which make a parabola. A function that returns a value is another option for a ZIM VEE value. We will set a count value outside the function to help our little equation.

We want each ball to get a color and then when all the colors are used up, start over again. We will use the index of the ball within its container. The index will go from 0-10 for 11 balls. We only have 8 colors. A common technique to use in this case is the modulus which has the format of:

count%divisor

This will evaluate to the remainder of count/divisor with the count being used when count is less than the divisor. So the result of ball index % number of colors will be: 0,1,2,3,4,5,6,7,0,1,2

It is risky to chain an on() method as it does not return the object. This means that if the statement were assigned to a variable it would not contain a reference to the Button we made but rather the function identifier that the on() method returns. Here, we will not need the button again - but if we changed code so that we did, we would have to remember to unchain the on() method. A good rule of thumb is to not chain the on() method. To accommodate that here, we would have to assign the Button to a variable and then put the on() method on the variable.

CONCLUSION: Physics can add magical movement to your Interactive Media. It can also make many things easier like mazes, side scrollers, etc. The ZIM Physics module makes physics very easy to use with ZIM. Here is an example of making a physics rectangle without it:

    var b2Vec2 = Box2D.Common.Math.b2Vec2;
    var b2BodyDef = Box2D.Dynamics.b2BodyDef;
    var b2Body = Box2D.Dynamics.b2Body;
    var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
    var b2Fixture = Box2D.Dynamics.b2Fixture;
    var b2World = Box2D.Dynamics.b2World;
    var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
    var SCALE = 30;
    var boxW = 200 / SCALE;
    var boxH = 200 / SCALE;

    // define the box
    var boxBodyDef = new b2BodyDef(); // for some reason classes are lowercase
    boxBodyDef.type = b2Body.b2_dynamicBody;
    boxBodyDef.position.Set(300/SCALE, 400/SCALE); // for some reasons methods are uppercase

    // create a body for the box
    boxBody = world.CreateBody(boxBodyDef);

    // create a shape for the box
    var boxBox = new b2PolygonShape();
    boxBox.SetAsBox(boxW/2, boxH/2);

    // create a fixture to make the box body take the shape
    var boxFixtureDef = new b2FixtureDef();
    boxFixtureDef.shape = boxBox;
    boxFixtureDef.density = 1;
    boxFixtureDef.friction = 1;
    boxBody.CreateFixture(boxFixtureDef);

So, you can see that we have saved you some work considering that this is ONE LINE in ZIM Physics! The mapping from physics to ZIM has been made easy and the dragging and the running of the world, etc.

This is a very real tutorial with much more than just physics. It demonstrates many of the usual Interactive Media techniques found throughout the MORE links. These include:

• Animation with waits and calls
• Configuration objects or parameters
• Looping and hitTests
• Tickers and timeouts
• Containers, arrays and modulus
• Variables, conditionals and function
• Classes, objects, properties and methods
• Events and event objects
• Buttons and Labels
• Particle emitters and wiggling
• Dynamic drawing in shapes
• Principles of abstraction

Congratulations if you have gotten this far. If you have, please consider joining the ZIM Slack Team - free and easy, of course. Also, please try out the other Badges tutorials and let others know about ZIM. All the best.

Dr. Abstract and Pragma