by admin

Neural net-like canvas animation(2)

How to use html5 canvas to create animation that looks like neural net(part 2)

I took a little harder way to start, since I first introduced a node model, which is more complicated than simple line model. Here it is:


Line model is quite easy to grasp. It is a basic line between two nodes. Because all the movements are stored in Node model, it’s not required to do any other actions besides stoic animation, which only follows those two nodes. As a plus point – i don’t need to call init method.

But with the line accessing node’s pos attribute it is obvious we can’t move, because the attribute is updated only after the animation is complete. We have a few options, with 2 listed here:

  • use reference, so the pos attribute would be always the current one(or rather the next one) – preferred
  • update the values every time after iteration


Our first app.js script only works with one node. Now it should utilize two nodes and one line:

After you run it, you should see two points moving around while constantly being connected by line. Easy as that.


Let’s update our basic recommendations for models and add this:

  • Each animation should be stored as object. This object should have its own context(in terms of attributes).
  • Animation object should therefore consist of blueprint action(basically unique for each model so it could be stored inside of current model instead of another script) and function which prepares this action


Render method now utilizes disposableRenderActions. Since there could be time, when we need to queue more animations, but the old splice-to-dispose could broke the for renderActions cycle. With this, all of those finished animations should be removed at the end of render call. For simplicity, it is placed in Node model instead of Base model. If you are wondering about the ‘this.renderActions[i].iteration();’ part, check the code below.


Following my notes about models, each animation object should have its render part stored in actions attribute. With this, the model won’t be the one, that repaints the context. In the core, it should be the action of that model. According to new moveTo method, the rendering would be called through bind function. That gives more freedom while rendering, especially with attributes which belongs to animation object.

Animation object has two basic callable methods – iteration and finished. Accordig to previous code, call to finished method would dispose of associated animation right after current render method. As before, this occurs when animation reaches the iteration max counter.


With this, the Node model is prepared for another type of method – behavioral.

The point of this method is repeatedly calling some animation. It could be done like this, or it could be made into bigger moveTo method, which resets iteration count and sets a new positions. I wanted it to be separated so i picked the first one. The code above demonstrates how to do it BUT also demonstrates necessity to implement pseudo-asynchronous control flow, which i pointed out in the previous article in Base model(on and event methods).

The thing is, the repeated moveTo call would be disposed even before the increment call. It’s because the callback would be called before the render cycle ends, therefore the disposableRenderAction part would always remove the new animation instead of the old one.


On & Event mechanism is example of preventing such thing to happen, but also provides more flexibility in other areas. Please note, that for parallel animations it is still lacking something.


And finally app.js

This creates 40 nodes and for each 2 neighboring nodes additional one line. That means even first and last node.
Second example.