Ink Blob Effect

This is a neat ink blobbing effect (using filters in EaselJS). It’s a JS class that gets applied to display objects in EaselJS. You can see the demos and download the package below.

Demo OneDemo TwoDownload It


How to Use

The download comes with two demo files. But here’s an explanation as well.

Step one, you gotta have a canvas element. You set up an EaselJS stage just like normal, add objects just like normal. Then you make an instance of the InkBlobEffect class and apply it to a display object. You also need to give an array that tells it a rectangle on the object to render such as [x, y, width, height]. Like so:

var inkEffect = new InkBlobEffect(myDisplayObject, [-250,-200,500,400]);

The effect must be updated (it’s basically drawn to a bitmap for all intents and purposes, so calling instance.update() updates the drawing). By default an automatic ticker is set up internally and constantly redraws it. However, that is really resource intense and should be avoided. You can pass a 3rd parameter of false to not turn it on. Likewise you can set the instance.autoRender property to false (basically the same thing). Then you can manually call the update function only as needed.

There is also a 4th parameter that determines the quality of the effect. 1 is significantly less resource intense, but 2 is noticeably smoother aesthetically. Your choice. By default it is 1.

Both demos show the effect being updated manually. The first is being updated on the normal stage updating tick, updated right before the stage is. The second updates only when an an actual object is being dragged around. Between those you should get a good idea of how to update the effect efficiently.