Creating Data Structure Animations with Processing.js

Ever since I saw the first demonstration of Processing.js I have wanted to do something with it.  I teach a data structures and algorithms course and one of the annoying things I have found is that many of the animations for showing how these structures work were written in Java and put on a web page as an applet.  Many of these animations are also just broken.   Thus as a response I thought it would be a good idea to put together a set of algorithms animations that didn’t need any plugins.

I started putting together a small bubble sort animation about a year ago.  I liked the way the way the final animation looked but I didn’t like the way the code looked and felt.  It was really hacky and not very good.  Definitely not extendible for other algorithms.  About a week ago I decided to restart that effort.  I thought about what would actually be necessary to do general algorithms and data structure animations.  I rewrote the code (you can get it here: ).  Currently the code animations are pure Processing sketches (I didn’t stick any bits of JS in my sketch this time :P).  However that might change later when I try to add in controls.  You can check it out live here:

When I was putting these animations together, one of the things that I had trouble with was translating the algorithms into animations. Processing works by repeatedly calling a draw() function in which you tell it what to draw in the next frame.  In other words there is a sort of built in loop.  While it is possible to call a function for some algorithm (a sort for example) within the draw loop, you can’t really animate it just by calling it as it will be called each frame and what you want is to animate steps within the function.

I admit that I’m very new to Processing.  Thus, this may not be the best way to do this (if anyone has suggestions please let me know!)  The design I settled on in the end was to create a general array animation. The array has a single draw function that the main draw loop will call.  Depending on the state of the array, the array’s draw() function will animate one frame of what is going on (one frame of a swap for example).

The array has states which determines what to draw.   Currently the array has these functionalities:

  • moves (move number from one element to another)
  • swaps (swaps two values in array)
  • stable (nothing is happening)
  • move to temp (move number to a temporary location out of array)
  • move from temp (move number from temporary location to array)

The object also has indicators and a splitter bar that you can add to your animation. You can also change the colour of the text in the array.

So far I have completed the bubble and insertion sorts.  I think I will need to add more functionality to properly show merge sort.  I have not yet really thought too much about a quick sort.  After the sorts I will probably start looking to add trees and lists.  I am hoping to also add animations for other data structures as well.  The code is far from perfect but it looks neat and for now that will have to do :).


4 responses to “Creating Data Structure Animations with Processing.js

  1. Johannes Rummel

    Hi Cathy,
    i am a student of the degree programm “Information Management” at FH Joanneum in Austria. During research I stumbled across this article and I really like it!
    Currenly I am working on an e-learning course for programming beginners. One topic of this course are basic algorithms (quick sort, merge sort, tree sort, shortest path (Dijkstra)) and also data structures. As it is a major goal of our project to enhance the learning experience with plug-in free animations I wanted to know if I can reuse your animations. I just started playing around with JavaScript and processing.js a few days ago so this animations will (hopefully 😉 ) provide me with a solid base.

    I am looking forward to your reply.

    Best regards

  2. Hi Johannes,

    You are definitely welcome to use it as it is open source (MIT license). I have modified it a bit since I wrote this but haven’t had time to add other animations. I’m very interested in working to create animations to aid in explanations of common computer algorithms (or just teaching cs concepts in general).

    For the latest source please see:

  3. Pingback: Fixed My Processing.js Data Structure Animations | Cathy's Blog

  4. Pingback: Fixing My Processing.js Data Structure Animations | Cathy's Blog

Leave a Reply

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

You are commenting using your 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