processingjs

Queue & Cyclic Queue visualization with ProcessingJS

Previous posts:

Updates

I finished refactoring the code and loading all the scripts using requireJS.
RequireJS not only helped modularize the code but it also helped me find/fix a few bugs.

I knew about modular script loaders by working with nodeJS and commonJS
However, I had never used a script loader on the client side, and after playing with requireJS I can’t see myself not using anymore.
One of my last projects we didn’t anticipate the amount of client side code we would need to write, thus not planning and design a proper architecture. The code was mostly composed by event handlers and some logic needed to determine the flow of the app. It tried to mimic the functionality provided by BackboneJS and SpineJS
With that being said, once the app grew the event handling code started to get bloated and hard to maintain and some logic ended up being repeated across files.
RequireJS more than anything forces you to think in a modular way when creating web apps, and that helps maintain and also scale the app while it grows.

Here is an overview of the structure so far

The Element object is the tile that is used by the processing canvas to represent an element of a data structure
Since the Element can be reused between different data structures, it doesn’t contains any logic regarding how it should behave. It just knows where to position itself and to animate its entry and exit from the canvas.
That worked so far since all three data structures are some what similar. However, the idea is to have an abstract Element and derive separate elements for each data structure/algorithm. This would give more flexibility to each element once more examples are added.

Entry Point

RequireJS allows you to create an entry point for the application, where you can initialize any objects you need.

main.js

  
 require(  
 [  
 "./stack/stack",  
 "./queue/queue",  
 "./cyclic-queue/cyclic-queue",  
 ],  
 function () {

 // Init Stack  
 var Stack = require("./stack/stack");  
 var stack = new Stack();  
 stack.init();

 // Init Queue  
 var Queue = require("./queue/queue");  
 var queue = new Queue();  
 queue.init();

 // Init CyclicQueue  
 var CyclicQueue = require("./cyclic-queue/cyclic-queue");  
 var cyclicQueue = new CyclicQueue();  
 cyclicQueue.init();  
 });  

The first argument passed to require is a list of scripts to load before running the code.
The second argument is the code that will run once all the scripts specified in the first argument are loaded.

In the example above, the stack, queue and cyclic-queue scripts are loaded, then after their instantiation they are initialized.
All the logic of how they need to be initialized and how they will interact with the browser events are define within themselves, so to add a new data structure/algorithm the only thing that needs to be added to the main.js is the instantiation and initialization of the new object.
**An option for a future iteration is to create a factory to instantiate different objects, moving the responsibility of creating objects away from the main.js

Processing canvas

Since each example has its own canvas, a different instance of processing needs to be created.
However, not only the specific code for each example needs a reference to the processing canvas, but also the Element object, and right now all examples use the same Element.
Problem The Element object wasn’t referencing the right instance of processingJS

Solution:
Use requireJS to modularize the instantiation of the processingJS objects

So all the Elements will always reference the right canvas, and its code can be reused between the examples.
*A factory would probably be useful here to centralize the instantiation of the processing objects.

Some screen-shots:

You can find the code here and a live examples here

What’s Next?

There still a bunch of stuff to be done and improved.
The next iteration I plan to create a visualization for Hash Tables
I also want to refactor the code a little bit more and use factories to create processingJS canvas and to initialize the examples

References:

Visualizing algorithms using Processing.js , part II

A quick update on the project:

So far I’ve created examples for

  • Stack
  • Queue
  • Cyclic Queue

Before I move on to other algorithms I started refactoring the existing code and reviewing the logic.
One of the tools I started to use was: requireJS
I refactor and restructured the stack example to load all its dependencies with requireJS.
The idea is to reuse some code between all the examples, and requireJS will definitely help on that

You can check a live example here
GitHub Repo
What’s next?

  • Refactor Queue and Cyclic Queue
  • Use requireJS to load files for Queue and Cyclic Queue
  • Blog :)

Next ->

Simple Drawing Application with ProcessingJS, part I

One of the assignments I have this semester is to create a simple drawing application.
The assignment is for the Design Patterns course , and the goal is to utilize the patterns we’ve learned so far into the application.

Here are the requirements for the assignment:

  • A tool palette to draw simple shapes
    • Line
    • Rectangle
    • Circle
    • Triangle
  • A drawing area where the shapes will be rendered
  • A menu with commands on it
    • Exit
    • Load
    • Save
    • Copy
    • Paste
    • Undo
    • Redo
    • Group
    • Ungroup
  • Color(red, green, blue, black)
  • Line Weight(1—10)
  • Style (solid, dashed)

When a tool is selected, the mouse can be used to place an instance of that shape, resize it and position it. One or more items can be selected by dragging a selection rectangle around them so that everything entirely enclosed by the rectangle is selected. When several items have been selected, they can be combined into a group. When an item in a group is moved, all members of the group are moved. The last command can be undone or performed again. The drawing can be saved into a file and loaded from a file. A simple object or group can be copied and pasted.

Your implementation should use the following patterns:

Singleton, factory or abstract factory, command, composite.

It might also use mediator, façade, and any others that you deem appropriate.

I’ll try to blog about the whole process of working on this assignment.
I’m very excited about this, since I’ve been hearing and reading about ProcessingJS for a while now.
My first real contact with ProcessingJS was on the 2011 FSOSS in the workshop given by David Humphrey and Jon Buckley.
Since then I’ve been waiting for the opportunity to use ProcessingJS in one of my projects, and now it’s the perfect time!.

So far I was able to get something working.

It’s possible to create some shapes and move them around

TODO:

  • Change the color and style of the shapes
  • Deal with overlapping shapes, create option to send them to the back/front of the canvas or of other shapes.
  • Resize shapes

You can find the work in progress here