Binary Blues

After my 0.1 release, I was compelled to take on the binary() function from the outstanding tasks list for my DPS909 course. I started by first looking up what the binary() function is supposed to do in the Processing library. binary() takes the number to convert from decimal which must be a byte, char, int or color. It returns the decimal value converted to binary in a string format (ie. ‘101010’). It also has an optional “digits” argument, in case you want a padded or truncated string.

I opened up the Processing Development Environment and started playing around with Processing binary() function. After a while, I wondered how binary() could be implemented in JavaScript. I decided to check out MDC. Maybe a similar function was already written or I may find something useful. As you can imagine, searching for ‘binary’ in MDC is near useless. I gave up and tried using a search engine and saw conversion functions have been written many times before, but I actually wanted to write it myself. Why take away all the fun? After a bit more searching, I remembered JavaScript supports bitwise operators!

I was excited to mess around with these operators, so I created a test page and started writing the binary() function in the Processing.js library. I tested the function with a few values and had working when I realized why this function wasn’t marked easy in the task list. Here is the problem:

If the user writes:

byte b = 5;
binary(b, 8); // result is "00000101";
int i = 5;
binary(i, 32); // result is "00000000000000000000000000000101"

No problem yet. The user is giving us huge clues as to the type they passed in. If an int is passed in and they only want 10 digits, I have logic to handle that. If by accident they pass in a byte and ask for 9 digits, that’s too bad for them. Can you see where this is going? The type of variable passed into binary() is very important. The problem reveals itself when no hints are provided.

byte b = 5;
binary(b); // result is "00000101" good
char c = 5;
binary(c); // result is "0000000000000101" yup
int i = 5;
binary(i); // result is "101" umm, okay?

Serious problems here. Java is typed, so the Processing library has overloaded binary() functions to deal with different types. However in JavaScript, I just have a number.

p.binary = function(numToConvert, numDigits)
// ...

I need to know how many digits to return, but without knowing which type was used to declare the variable, how can I do it? If the value of numToConvert is 100, how can I figure out if that was a byte, char or int?


Oh no. One way to solve this is to write regular expressions and find out what type was used to declare the variable before it was passed to us. This will probably create all sorts of other problems.

byte b = 5;

Do I have to parse that? Is there a better solutions? I really hope so.


Release 0.1

For the past couple of weeks I have been familiarizing myself with the Processing and Processing.js libraries. While learning the Processing.js library, I wrote some small demos including a 3D Processing demo and a ‘3D’ cube Processing.js demo based on Alistair MacDonald’s Disco demo. After another few weeks of playing with the library, I wrote some functions which required implementation for Processing.js. I also created two (slightly buggy) demos which make use of the functions I wrote. Here they are:

Line Lengths
Processing Poetry

These two demos are a part of my 0.1 release for my DPS909 class at Seneca College.

0.1 Deliverables

For 0.2

I already signed up for a bunch of other functions which need to be implemented for 0.2.

  • lights()
  • noLights()
  • pointLight()
  • ambientLight()
  • directionalLight()
  • binary()
  • sort()
  • resetMatrix()
  • bezierDetail()
  • bezierPoint()
  • bezierTangent()

It’s unlikely I’ll be able to complete all of these for 0.2, so I will focus on completing lights(), noLights(), ambientLight(), directionalLight() and pointLight() first before moving onto the other functions.

More Contributions Available

I realized I created contributions a bit too late of 0.1. I had to implement most of them myself because the 0.1 deadline is quickly approaching. So this time I have some already available for 0.2! They are due November 13th and they are a very simple to write. They include writing tests for shorten(), binary() and sort(). I think the best way to write the tests would be to write them in the Processing environment. I could then take those tests and and run them against my updated Processing.js library. As long as your tests work in Processing, they should work in Processing.js, which means you’re job is easy and mine isn’t. Doesn’t that sound like a good deal?


Here is a test for my splice() function. I’m a lot closer to finishing the function, but I still have to take into account what happens if I have multi-dimensional arrays passed into splice(). I might have to call splice() recursively. So, here is my splice function so far:

p.splice = function(array, value, index)
 if(array.length == 0 && value.length == 0)
  return array;
 if(value instanceof Array)
  for(var i = 0, j= index; i < value.length; j++,i++)
   array.splice(j, 0, value[i]);
  array.splice(index, 0, value);
 return array;


I was working on implementing my splice() function and realized the equals() method for the String class in the Procesing.js library was missing. I really needed it because after I splice a bunch of arrays of strings, I need to make sure my function did it properly. I first looked at trying to write the JavaScript in the Processing.js library. After I realized I had absolutely no idea where to place it, I brainstormed on a way to do it in the Processing.js code. This is what I came up with:

boolean stringsEqual(String str1, String str2)
 if(str1.length() != str2.length())return false;
 for(int i = 0; i < str1.length(); i++)
  char ai = str1[i];
  char bi = str2[i];
  if( ai != bi )
   return false;
 return true;

This first time around I tried casting to ints. That didn’t work, so I tried chars. So far it looks like it’s working! Feel free to offer suggestions or use this in your code!


My focused demo is here!

Snapshot 2009-10-15 19-52-33

You might be wondering why I took a screenshot of a red canvas. Well it’s red because it doesn’t have focus. In the draw() function of my processing.js code, I clear the screen to red if the canvas doesn’t have focus. I couldn’t take the screenshot without changing focus to the Preview application. So it’s working! When the content part of a page with the canvas has focus, “focus” is true. When the content loses focus (another window is clicked, or the address bar is clicked) it’s set to false. This is typically used in situations where the user can check the “focus” value and write something like “Hey, click on the window to start the demo!” if it is false.

I started trying to implement this with events.

attach( window, "blur", function(e) {
  p.focused = false;
attach( window, "focus", function(e) {
  p.focused = true;

The problem is if I refreshed the page and quickly (within half a second) clicked on another window, the first window still thought it had focus. After searching around for other possible ways I could get this done, I found document.hasFocus();.

p.focused = document.hasFocus();

I placed this in the rendering loop, so it is constantly being updated. This is not the best place to put it, but for my 0.1, it will have to do. I still need to fix my splice(), and write another function, and another….

mag() tests

The 0.1 deadline for my DPS909 class is coming up and I have to make sure all the functions I wrote are working. I posted up possible test contributions for any other students, but only Andrew Grimo signed up for one. I already wrote tests for mag() and splice(). I’m glad I actually sat down and wrote real tests for splice() because my tests are failing all over the place. I need to get the JavaScript figured out and fixed quickly.

I promised I would give Andrew a bit of a template to work from since he will be testing my subset function. So here it is! The only reason I didn’t use any tools for this test is because I felt like playing around with processing.js

Currently, my tests do not test for cases which the user passes in funky arguments. For example mag() takes either 2 or 3 arguments which must be either float or int types. What should happen in these situations?
mag(); // no args?
mag(1,2,3,4,5); // too many args!
mag(true,true); // incorrect types
mag(5); // scalar value, return 5?

Should an exception be thrown? Should it return null? Should I call alert()? I’m trying to get the answer to this question because 0.1 is due Monday. Oh dear….