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


  • 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