Introduction to ZIM | Animate a Landing with HTML and JavaScript

Build the hero section of a Landing page with HTML canvas

The first part of this series introduced the HTML canvas and shared some popular JavaScript libraries for creative coding. We also took first steps to design the layout of our example project.

In this article we’ll start coding with ZIM; the JavaScript framework that is used on the page to make the fish swim and hit other objects. Then step by step we’ll build the scene for the landing page.

Why ZIM?

ZIM provides us with components like buttons, shapes, particle systems and more for the HTML Canvas. It also has great documentation with a lot of sample code that you can copy and paste into your own projects to get started quickly.

In addition, ZIM has an online editor where you can type code and view the results without needing to setup a new project on your computer every time. Dr Abstract the founder of ZIM is very active in the community and easy to reach if you need assistance. He has also written an in-depth guide to ZIM which you should check out.

Setup the code environment

The quickest way to setup ZIM for development is to copy the code below into a blank HTML file on your computer, then open in a browser or code editor or start your project with one of these ZIM frame templates

As seen above on line 7, ZIM is imported remotely as an ES6 module inside a script tag using an import statement.

Alternatively, you can also add ZIM from a CDN , then write the code for the pond in a separate JavaScript file:

Create the stage

Photo by Mark Williams on Unsplash

Every object that you can see on the screen is contained in what we call the stage, and it is responsible for creating A Canvas element. You can think of the stage like an actual stage and the display objects are the performers on stage.

To create a stage for our landing page we will do two things:

• Use the FRAME class to create a stage.
• Set the width, height and background color of the stage.

In addition to creating a Canvas the Frame class also gives us to listen to events like when the stage is resized. It is also used to load the visual assets used on the stage including sounds, images and more.

The background of the stage is a ZIM rectangle filled with a GRADIENT COLOR.

The Rectangle class is customized with parameters which include, width and height, a background color, position settings as arguments and more. Then we use ZIM’s CENTER method to add the rectangle to the stage and place it in the center.

We use the GRADIENT COLOR class to give the rectangle a color that looks like water. The class is customized with the following parameters:

1. an Array of colors,
2. an Array numbers between 0–1 which marks the positions of the colors above
3. the position where the gradient starts on the x axis
4. the position where the gradient starts on the y axis
5. the position where the gradient ends on the x axis
6. the position where the gradient ends on the y axis

Load the Images

the fish, floaters, rocks and starfish start out as transparent PNG images

All the objects that appear in the screen except the fish are simple PNG images with transparent backgrounds. We will load them into the canvas and apply physics to the floaters and rocks later.

The FRAME class has a method that enables us to load assets into the page. This ‘LOAD ASSETS’ function receives an array of images and their base URL as parameters.

When the FRAME has successfully loaded the images, we store them as variables in line 14 to 19.

Make Leaves

Since the image of leaves has also been loaded by the FRAME class, We can now add the leaves to the stage with this command on line 21:

ZIM provides us a bunch of helper methods that can be called by every ZIM object.

The Bitmap Class call 3 ZIM methods:

• SCA: Scales a display object to different sizes
• POS: positions a display object on the x and y axis.
• ADDTO: adds the display object to the stage otherwise it will not be visible on screen.

Make the Stone Blocks

We have two blocks of stone which the fish will be able to interact with when we add Physics. For now, let’s simply add them to the stage and position them in the top right-hand corner of the stage using ZIM’s BITMAP class.

Same as the leaves; the Bitmap class also calls 3 ZIM methods:

• SCA: Scales a display object to different sizes
• POS: positions a display object anywhere you want on the stage.
• ROT: rotates a display object by a specified number of degrees

As seen above, ZIM also provides us with a RANDOM function whose job is to randomly select a value in an array. In this case anytime the page is loaded the rocks are positioned randomly on the y axis.

Make Text

The next thing to be added to the stage is some text which is an essential part of any landing page. We will apply some basic typography settings including font size, color, font family and line height to our text object, and ZIM provides a LABEL class which makes this easy to do:

Make Buttons

Its very easy to creates buttons in ZIM, simply use the button class and enter settings for the label, width, height, background color and more. Here is the code for the button.

Furthermore, the button is added to the stage with the MOV method which uses x and y numbers to position the button, or else it won’t be visible on the screen.

Lastly the button needs to perform an action when clicked. In this case we want it to link to a webpage so add a ‘CLICK’ event handler:

ZIM has a helper function called ‘ZGO’ which simply navigates to a specified URL.

Making the Sea Shells

There are sea shells scattered randomly across the floor of the pond. To achieve this, we’ll make use of ZIM’s ‘TILE’ class. This class accepts a bitmap object, and duplicates it many times across a number of columns and rows with some vertical and horizontal spacing between each copy (tile).

The TILE class will arrange the shells in straight lines along the horizontal and vertical axis, so we will need to space them out randomly so things look more natural. To achieve this effect, we will loop through the array of shells created by the TILE class and move each one randomly along the x and y axis.

ZIM provides us with a ‘LOOP’ and ‘RAND’ function that makes this easy to do.

You can pass in two numbers into the ‘RAND’ function and it will pick a random number between the range of the two numbers which are passed into the function. We also call the ‘ALP’ function on every shell which will make them slightly transparent.

Make The Star Fishes

Follow the same process used above to make the sea shells, but instead create a Bitmap with the Starfish image.

In the next part we’ll animate the fish, add it to the stage along with the floaters and give add physics to each of them.