More Data Structures Animations

After refactoring my data structure animation code at the start of the year, it has become significantly easier to add more animations.  So far I have added:

  • merge sort
  • singly linked lists
  • queues (both array and linked list implementations)
  • stacks (both array and linked list implementations)

I have also fixed many bugs in my basic animation objects and spent some time to style the animations.

The other big feature I added was the ability to put in controls and interactive elements.  The animations are written in Processing.js.  The interactive elements are standard HTML elements.  To accomplish this I used the method suggested on the Processing.js site.  That is I built a number of javascript functions that then made function calls to my processing.js object.  This method is fairly easy to do.  In your canvas tag for your sketch you need to add an id.

<canvas id="dsanim" data-processing-sources="..."></canvas>

You will then want to add the following bindJavaScript() function (note the use of the id from the canvas tag to get access to the appropriate sketch):

// javascript reference to our sketch
var pjs = undefined;
var bound = false;
// bind JS to the p5 sketch for two way communication
function bindJavaScript() {
  if(Processing) { pjs = Processing.getInstanceById("dsanim"); }
  if (pjs !== undefined && pjs.bindJavaScript !== undefined) {
    pjs.bindJavaScript(this);
    bound = true; }
  if(!bound) setTimeout(bindJavaScript, 250);
}
bindJavaScript();

You can then  call any function from your sketch by accessing it through the pjs object.

For example, in my linked lists sketches I have a function called insert() that will perform the animation of adding a node to the front of the linked list.  I did not want an interactive element to be able to disrupt the animation part way through as it can cause errors.  Thus, I also added a function called midStep() that returns true, if it is in the middle of an animation routine (for insertion for example).  Both midStep() and insert() are processing.js functions.  With the above bindJavaScript() function, the pjs variable is associated with the sketch and thus, I can call these from a JavaScript function:

function insert(){
  if(!pjs.midStep()){
    var v = document.getElementById('val').value;
    if(v != ""){
      pjs.insert(v);
    }
  }
}

All I need to do is then associate this function with an interactive element and it will trigger the appropriate function call in my processing.js sketch.

You can check out the sketches here.  I plan to add more over the course of the next year as I’m teaching Data Structures and Animations this year.

http://cathyatseneca.github.io/DSAnim/index.html

Please file an issue if you spot a bug.  I tried to get as much out as I can.  In particular I tend to not test on windows at all, so if you are looking at it on a window’s machine and its not working please let me know.

Also, I know that I had initially chosen some colours that were not at all visible on some monitors.  if it looks like part of the animation is missing something, please let me know.  Thanks in advance.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s