Summer 2016

Once again, it is almost that time of the year for school to start once again.  The summer has been an interesting one and this blog is a reflection on some of the things I did.

I had a good number of summer projects planned… but I only really got around to one of them.  This summer, I wrote a guide to using p5.js with my cousin Ben, who teaches at an international school in Hong Kong.  We wanted something that a teacher could use with their students in the classroom. We decided to write the guide using an online publisher named gitbook (I love gitbook for writing notes for my students.  Write it once with markdown, get it published to web, pdf, epub and mobi… awesome)

I had actually started this project back in February.  I got to about chapter 3 and I hated what I was doing with it.   I felt that it was very wordy, too much reading, not enough getting to the fun programming parts.  I remember learning to program when I was a kid.  I didn’t want to read about how things were done.  I didn’t care about the background of BASIC…  I just wanted to write programs to make my computer do things.

After talking things through with Ben, we decided to take a different approach to our project.  What is the minimum amount of background info/setup we need in order to get started?   How can we allow someone to write code with as little setup as possible? It turns out that we only need to write about 3 paragraphs, include a picture guide, add a link to a video and use an amazing web based editor.

Sometimes, I teach introduction to programming and the first week typically involves explaining how to set up the development environment.  It takes time to do this.  How to get the compiler.  How to get an IDE.  how to claim your unix account.  Where to find your text editor.  The joys of pico/nano (don’t laugh too hard…it was the first editor I learned how to use on unix…)…vi, emacs, gcc, vs, xcode… its a lot of setup.  I know a lot of us take this stuff for granted but think about what happens when you get a new computer… getting your dev environment set up is not a fast process.  So, how do we simplify this as much as possible?  How do we get to the fun parts as quickly as possible?

It starts by choosing tools that will minimize the setup.  p5.js is a JavaScript library.  To use it, you need to get the library files from  You need to set up an html page and you need a JavaScript file to write the script in.  After you set up your html page, you actually generally do not modify it.   You only need to edit your js file so even though you absolutely need the html page its not actually part of the program you are writing.  For tools you typically need a web browser and an editor. This is not a lot… but if you are first starting or if you are in an environment where what you are allowed to put on your machines is limited every extra thing you need to do before you start coding makes it that much harder to start.

To help simplify this setup, we decided to use Mozilla’s Thimble editor.  It is an html/css/js online editor.   It also allows you to publish your work. By doing this, we eliminate the text editor (and if you want to publish your work, we eliminated the webserver too).  Using Thimble means that the only application we need is a modern web browser.

Furthermore, and this is the really cool part, using Thimble means that we can actually setup the basic p5.js project.  Ben and I created an account on Thimble.  We then set up thimble project with all the files need (the p5.js lib file, the html file and a stubbed out  JavaScript file for people to write in).  The JavaScript file contains some starter code for the p5.js sketch.  Thimble also allows us to write our own tutorials.  Thus, we can write instructions on what to do inside thimble.  We then publish this project (one button inside thimble).  We get the link off of the Remix button from the published page and put that link into our project book.  Each chapter of our project book contains a goal (typically an image) to show what we are aiming for.  This is immediately followed by a link to the related thimble project remix.  The remix contains instructions (typically where to write the code, what to write).  In otherwords, all you need to get started is to click a link!  No other setup.

The guide then continues on with more detailed explanations for those who want to know the why for each of the topics covered.  Towards the end of the guide, I added the chapters about how to setup your own sketch outside of thimble and some background material.

There is still a lot of work to be done on our guide for sure.  Currently we have only one very basic project.  We will add more in the future but I’m pretty happy with what we have done so far.  You can access our guide here

On a more personal note, I started the summer by helping my parents out for a bit at their restaurant.  Its very different from my usual job to say the least.  My part of the work was not really hard but the hours are quite long.  All I can say is how much I respect my parents for doing it.  I know how hard  they have worked all these years to raise my brother and I.  I am forever grateful.
I am also continuing to decorate my new place.  This summer’s decorating involved the balconies, one of the best features of my new place.  I grew some strawberries, some herbs, and some cherry tomatoes (why are the leaves drying out ? there is plenty of water. help!). I even put in a couple of chairs.

I also made a few pieces of pottery this summer mostly for myself.   One of them is this garlic jar.  I am rather happy with it.


End of Summer – Thank you!

This summer was a big one at for CDOT (Centre for Development of Open Technology).  We had almost 30 RA’s working on many many different types of project.  Yesterday was our final cdot presentation day for the summer.

For those unfamiliar, CDOT is an applied research group within Seneca College.  Over the years we have worked on many different projects related to open technology in various areas.  I am one of the faculty members involved with CDOT.  Projects tend to run over the course of a semester or two.  Students are hired either while they are studying or just after they graduate.

My team worked on projects related to 3D web graphics.  This summer I had two projects.  The first was a project with Box, to implement a 3D data visualization tool.  The second was with a Gorilla Productions.  The project was to implement realistic cameras for three.js.  (cameras that behave as real world cameras do).  In total I had 4 awesome research assistants working for me (Andrii, Barbara, Dmitry and Koji).  They have done a fantastic job on their projects.

However, aside from my two projects, CDOT also hosted many other projects.  One of the reasons the reasons that CDOT exists is to provide experiential learning opportunities to our students.  A chance for them to work on real projects and develop skills.  One of those skills is the ability to talk about their work.  Thus, each Thursday was we have “Demos”.  During that time, the teams will talk about their project and what they have been working on, problems they encountered, solutions they found.  Yesterday, was the last day and everyone had a chance to talk about thoughts of on their summer’s work.

Generally the comments were all very positive. However, there did seem to be a few themes that were shared by multiple students.  These were:

  1. Being surrounded by other very smart people working on interesting projects has helped them develop as programmers
  2. Demo days helped them learn from other teams even when they were not working on remotely the same thing.
  3. Demo days made them less nervous about speaking in front of crowds
  4. CDOT provided opportunities to work on something important with a great amount of freedom to design and implement their work
  5. CDOT experience has helped them to either find a job (a couple of students will start in new positions right after labour day) or the confidence that they will be able to find one shortly.

I truly believe that CDOT is one of those places that are unique and special.  We have students that do very interesting work on a wide variety of projects.  Our students are very bright, and I have always admired their ability to exceed my expectation.  Many of you have taught me things I did not know.  To all the RA’s at CDOT, know that you are the ones that make CDOT special.  When I see what you do, when I see what you have accomplished, I am reminded of why I teach.   Thank you!

On Code Documentation

There are two major problems that I see when I look at my student’s documentation for their code.

  1. no documentation … we are talking about not even having a header with their name on it here for assignments
  2. too much documentation – repeat all code in comments!

Both of these are problems.  One may not seem like a problem but it in fact is.

The lack of documentation in its entirety is just a job of incompleteness.  Most students understand that when they don’t do it, they will lose marks.  They know they should but for whatever reason they didn’t.   Its like knowing you should exercise but you don’t…This post isn’t about that.  The complete lack of documentation is relatively simple to address.

This post is addressed to those that document everything.  I know students who do this are very proud of their work and they put a lot of effort in it.  I get that.  I’m not knocking that.  However, I would like to ask you to please please please please please stop doing it.  Don’t do it.  It isn’t better.  A bad comment is worse than no comments at all.

Here are a few commenting guidelines:

  1. please don’t repeat your code in your comments… your code is there… anyone reading it sees what it does if they need to know it.  “this is a for loop” is not useful.  “this loop runs 10 times” completely silly.  “assign 5 to x”….please stop. please stop.
  2. I have found that comments become sacred over time.  programmers do not hesitate to alter code… and yet comments…well you can’t touch those (sarcasm).  So, with this in mind, I encourage you to write as little comments in the body of your code as possible!  Your code should be clear enough to read.  Unless you are doing something very very tricky, don’t put in a comment in the body of the code.
  3. Comments that are useful explain reasoning, that may not be immediately obviously.  In my first programming job I was trying to hunt down a bug in a program and I saw this comment “find first sunday in april and last sunday in october”… I could tell thats what the code was doing… that wasn’t hard.  I then spent a day trying to figure out why they needed to do this and whether or not it was the cause of the bug.  What they did and how they did it was clear… the code said as much.  I couldn’t figure out why it was that this was something that needed doing.  Finally, I realized the why and changed the comment to “adjust time calculations for daylight savings times”… to me this makes way more sense.  I’m not saying how to do it (and the how has changed since then as the time of year that daylight savings time comes into effect has changed).

Here is are the three things you should document:

  1. Have a header!  State who wrote the code, major modification dates, versions etc
  2. state the intention of each function (not how but what it is suppose to do), its parameters, expected return value and restrictions.
  3. document unclear variables, units  of measurement etc.

That’s it.  Let the code speak for itself.

Using git and github in your classroom

I wrote this for the ACSE mailing list about year ago and have passed it onto my colleague when they ask about using github for their classroom.  At the encouragement of another colleague, David Humphrey (he did a really good talk on git and github for fsoss2015),I’m going to post it to my blog to make it more accessible.

Using git and github for your classes

Firstly it is important to distinguish between git and github.

git is the open source distributed revision control system used by the Linux project. It lets you create a history of all your code.  You can send git repository around as zip files if you like.

github is a company that creates a nice place for you to put these repositories into the cloud so that you can much more easily sync and share these repositories without having to set up servers or send around giant archives.  It also provides things like access control, issue tracking, wikis, activity graphs and so on.  Very handy.

As this post is long, I’ll start with some links for quick reference on where to find/get stuff.  After that I have a section specifically for dealing with github, working together and git itself.

git client download:
git tutorial:
github gui:
tortoise git:

About Github

github  has 2 types of accounts: individual and organization.
As a teacher, will need to make for yourself an individual account and an organization account.  Any individual account can belong to zero or more organizations.  For myself, I have quite a few different organization accounts.  One for each of my courses and one for my research group.

It should be noted that both types of accounts are free to use if your repositories are open source.  I have been using github as a place to put my in-class examples for students…and that is open source so I don’t have to pay for doing that…you can check out the repo for my data structures and algorithms course here.  I use the repository itself for code examples, the wiki for assignments and course documents (minus the notes… I prefer gitbooks for that).  I have not yet tried to do this consistently but I think the issue tracker in this case can also serve as a notification and discussion board.  You can check out the repo here:
github makes money by essentially charging for privacy so under normal circumstances they would charge some amount for some number of private repositories.   You can see their pricing plans here:

However, as an educator, what you can do is request for an organization account with X number of private repositories at some discount.    You can do so at this site:

Typically they will want info about your school, number of students and so on.  The number of private repositories depends on how many students and how you plan to use the repositories.  So for example, if you have 20 students and they work in groups of 4, then you will need 5 private repositories.  However, if you have 20 students and they are working individually you will want 20 private repositories.   If you want both team and individual repos for some group work and some individual work, then you would need 25.    I also suggest asking for a couple of extras for yourself or for class material that you don’t want to open source.  In any case what you want to do is set it up so that your organization can have some number of private repositories that will suit your needs.

Aside from you setting up an account, your students must each individually create a github account.  Once that is done, have them send you their github ids.  They can get a free one.  They don’t need to pay for it as the private repos will be given to them through the your organization account.

Once you have created your organization, you can go to your organization settings and create teams.  A team consist of 1 or more individual.  As the administrator of the organization you will be able to see all the repos so if you forget to add yourself its no big deal.  Each team also has different access permissions.  Typically I would set up a student team for write access but not admin access.  If you are only planning on doing group work then set up each team so that all members are part of that group.  If you plan to do individual work or a mix of team and individual work then you will want to set up a team for each student.

Once you have the teams set, you can then create private repositories.  You can initialize them with an empty readme (or push some code up by following the instructions).  In any case once you have created those repos, you can give access to 1 or more “teams”  by hitting the collaborator button in the settings tab.
Only teams with access to private repos can see that repo.  So its a great way for groups to all contribute to a project because you can limit who sees what.  As a teacher, if each student actually submits their own stuff (and not email around and have one person do it) you can actually see their commits down to the line they put in through the blame button.

About collaboration

Getting students to unlearn the code collaboration method they had been working with for years is a definite challenge.  Putting in some best practices may be a good idea.  Here is something I wrote up for the students in my research team to help them do this:

To ensure that we are not going to step all over each others code, these are the steps we will use when putting code into  the repository:

  1. All commits should be accompanied by an issue. If there is no issue for your commit, please make one first!
  2. All commits should be put into a branch matching the issue number. Thus, if the problem the code is solving is described in issue 2, then the branch should be named issue2
  3. before pushing your code to github make sure you merge in the most recent code on master to your branch and resolve any conflicts
  4. push your code into the remote issue branch (if you want to work off your own fork then thats fine but issue branch on your fork)
  5. submit a pull request for the code that you have submitted but DO NOT merge that code yourself.
  6. assign someone else to review your pull request
  7. if you are assigned a pull request, test out the pull request on your local machine BEFORE accepting it. Do not just click the button. If there are any problems, comment and let the submitter know and have them fix it. If all goes well accept the pull request to merge into master

There are other methods out there… but you probably will need to invest some time to teach whatever that method is.

About git and git clients

git is a revision control system and it is part of all linux distributions so if you are running linux, you already have git installed (unless it is a really really old linux release).  For OSX git is installed as part of command line tools for xcode (if I remember correctly… on mavericks the first time I tried to type git at the command prompt, it installed those tools for me).  For windows, you can download it from:

The above are command line tools for using git… and this is all you need for git and github.

You can learn to use git with this interactive tutorial:

Everyone tells me that gui’s are awesome… so github does provide some fancy gui clients for git (

Tortoise git is what one of my student use to swear by… so that may be worth looking at (

I tend to prefer the command line myself so I can’t speak to either unfortunately.

Anyhow, hope this is useful to others trying to figure this out.  Let me know what would make this even more useful for you

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) {
    bound = true; }
  if(!bound) setTimeout(bindJavaScript, 250);

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(){
    var v = document.getElementById('val').value;
    if(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.

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.

Fixing My Processing.js Data Structure Animations

Over the holidays, I spent some time fixing some code for a processing.js data structures and algorithms animation project that I had been working on.  Check out the results here:

Now, a bit of a story about the code.  About 2 years ago, I wrote some code to do some animations of sorting algorithms while I was learning Processing.js.  The idea was to build a library of these animations that my students can use as reference. I wanted to add animations for all the data structures and algorithms we covered in my data structures class. Although I was able to implement two simple sorts using my previous code, I had quite quickly realized that there were two big flaws in the way I had designed my code.  The first is that the animations were frame based.  I basically went and changed the frame rate in my sketch to get the animation to play at the speed I wanted… not a good idea but it was something that was easy to code with pjs so I had done it that way. The bigger problem however was that I had written a state transitioning mess of a program.

The way that Processing works is that there is a single draw() function that is repeatedly called to produce an animation.  The way that I have coded my animation was to have different states for each of my objects and depending on what I wanted to show, I would modify the state of that object.  So if the array was swapping the values of two elements, the array object would be in a swapping state. The drawing and animation was pretty simple.  Change the state, change what animation to play. However, when it came time to code the actual sort animations though, I realized I had a problem.  Translating the procedural sorts into a series of state transitions of the various animation objects was difficult to do.  When completed the animation code was a big mess and does not in any way resemble the sorting algorithm. For example here is the original mess that drew the bubble sort animation (don’t cringe too much… it was a first attempt :P)

  void draw(){

          if(currJ_ >= sortLength_){

As you can see it does not in any way resemble a bubble sort… no loops, just a nasty series of state transitions. After completing the animation for bubble and insertion I posted my code to github and just left it as is… I always wanting to go back to add more but the thought of translating something more complicated into that mess made my head hurt.

Sometime in the fall I was talking with my friend Phil about the mess I made with my code and trying to think of a way to fix it or possibly even rewriting it. He pointed out that what I needed was really an animation system… something that you can record and play back. Essentially the idea is that you would run through a standard algorithm as is on some given piece of data. During the process of running through the algorithm, the system would “record” the states the animation objects should go through. Displaying the animation was simply playing back the recorded steps. My new design involves 3 new objects (they are not yet complete .. but complete enough for sorting algorithms).

  • Animation step – one discrete step in an animation. I wanted a way to allow for the ability to step through an algorithm. Each step may involve modifying multiple objects or even modifying one object in more than one way but it is taken as one whole step.
  • Animation Instruction – an instruction sent to an object that changes the object’s state in some way… The way it is currently implemented is a series of instructions represented by a constant, and parameters to the instructions which are all done as integers. Its not the best way to do this… but for now it works.
  • Animation – contains a list of animation objects (things that are drawn), and a list of animation steps.

In any case… this method works. Here is the function that creates the bubble sort animation:

void bubble(int array[],int sz){
    int i,j;
    int tmp;
        for(j=0;j array[j+1]){

You can actually see the bubble sort algorithm in here… the animation steps and animation instructions are simply like “print” functions except that they state what should be drawn instead. Each of the addInstruction() calls passes in the index of the animation object to modify and the instruction (SET, SETFONTCOLOUR, etc.) and parameters of the instructions. its not perfect but its way better than the original.  The animation has also been fixed to be time based.  Furthermore, while it is not currently implemented,  it will be possible to allow a step through of the animation also.

I have updated both animations for insertion and bubble sort using this new animation system.  I have also implemented the animation of selection sort and quicksort.  Both were not really hard to do (though I admit that I would want to tweak the quick sort a bit as it isn’t quite as accurate as I would like). Hopefully others will find these animations useful.  Let me know if there is an error or something that is unclear with how the animation is done.

Sharing is awesome!

Earlier I wrote about making a zelda sword using  When I first created the model, there were some problems with it.  The sword did not appear to have an edge… you have to turn it to see the sharp edge.  It looked very much like a box.  The grooves that I had put into the sword hilt also did not appear to show very well.  I thought maybe it was a rendering problem or the shininess of the material or something and tweaked it for a bit but the problem persisted.

One of the things that I had done after I first finished my sword was I shared it with my industry partner… this is easy in….its like google docs, just hit share and say who with. 

About a day later, my industry partner had applied a normal modifier to my model and fixed my sword!  It actually had sharp edges and proper ridges.

To me … this really showed how useful it is to work collaboratively in the cloud.  For me to share my scene was easy… no fiddling with ftp, attempts to attach large files to emails etc.  My industry partner was able to look at the exact thing that I had been working on (including all my most recent attempts at fixing my problem…).  He could then fix it.  Immediately after this, I was able to see what he had done and use that solution to fix the rest of model.   I knew from the start what Ben’s vision for had always been… but to actually see it in action… now that’s cool