jump to navigation

Binary Blues October 24, 2009

Posted by Andor Salga in Open Source.
8 comments

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?

Regex

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;
binary(int(b));

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

Release 0.1 October 24, 2009

Posted by Andor Salga in Open Source, Processing.js.
4 comments

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:

linelengths
Line Lengths
processingpoetry
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 October 17, 2009

Posted by Andor Salga in Open Source.
add a comment

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?

Splicing October 16, 2009

Posted by Andor Salga in Open Source, Processing.js.
add a comment

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]);
  }
 }
 else
 {
  array.splice(index, 0, value);
 }
 return array;
};

strlen(yarn) October 16, 2009

Posted by Andor Salga in Open Source, Processing.js.
4 comments

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!

focused October 16, 2009

Posted by Andor Salga in Open Source, Processing.js.
add a comment

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 October 15, 2009

Posted by Andor Salga in Open Source, Processing.js.
add a comment

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….

Awaiting Contributions! October 10, 2009

Posted by Andor Salga in Open Source.
2 comments

For all the students in the DPS909 and OSD600 classes: I have updated my zenit wiki page which now includes possible contributions. The contributions I need done are straightforward and I’m always on IRC if you need any clarification. I have a few posted up right now, so go ahead and claim one! Simply place a link to your wiki page in the appropriate cell to claim the task . Once you have finished the work, post the resources/files somewhere and place a link in my wiki page in the contribution section.

splice() October 10, 2009

Posted by Andor Salga in Open Source, Processing.js.
1 comment so far

A .jpg with worth a bunch of JS. Here is the highlighted splice() method, simple test and results.

results

subset() October 9, 2009

Posted by Andor Salga in Open Source, Processing.js.
1 comment so far

Yesterday I implemented the mag() function for the Processing.js library for my DPS909 class. I then gave subset() a try. I first read what it does and it didn’t seem to difficult to write. Albeit, this course is about reusing code. I decided to give the process of code reuse a try in this environment, on something simple, like subset.

To examine the code, I turned to Processing. I looked in the folder on my system, but I couldn’t find any of .java files. I figured I only had the runtime installed. I went to the Processing site and found a link on the download page referring to the build instructions page. I didn’t need to actually build, I just needed the source files. I made a Processing-src folder and opened a terminal.
macbook-pro:Documents andor$ cd Processing-src/
macbook-pro:Processing-src andor$ svn checkout svn://processing.org/trunk/processing

screenshot
Copying took a while….

Next, I did a search in the source for the string “subset(“. My hope was I could copy and paste the Java code in the Processing.js library and insert the appropriate JavaScript functions right under the Java lines. I ran my search and got about eight .java files. I decided to check them one by one since the file names weren’t very helpful. I got lucky. The first file, PApplet.java had the code I was looking for.

In PApplet.java, subset was overloaded fourteen times. Most of them for different types (float, Object, etc). I noticed most of the functions had a “recursive” structure.

static public Object subset(Object list, int start) {
  int length = Array.getLength(list);
  return subset(list, start, length - start);
}

static public String[] subset(String list[], int start, int count) {
  String output[] = new String[count];
  System.arraycopy(list, start, output, 0, count);
  return output;
}

If the last parameter is provided, an internal Java function is called. I thought I could probably do the same in JavaScript or the Processing.js library already has an array copy function. After searching the library, I came across ArrayList, but wasn’t sure if that was what I needed. What I did find was slice().

I had enough information to start the function. I added the function to library using the standard Andor method:
p.subset = function()
{
  return 0xdeadbeef;
};

dead beef
Er, I guess it’s working…

The next step was to divide the function into two parts depending the number of arguments passed in. If the user only specifies which array to copy and the index where to start copying, assume they want to copy until the end of the array. We call subset with a third parameter in that case. Recursion is recursion!

p.subset = function(array, offset, length){
  if(arguments.length == 2){
    return p.subset(array, offset, array.length - offset);
  }
}

One case finished! Now, if the user passes us three arguments, some actual work needs to get done. I looked up slice on MDC and saw this:
For object references (and not the actual object), slice copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.
I’m not sure this is what I needed…Should I copy the array manually? I decided to just use slice and see what happens.

p.subset = function(array, offset, length)
{
  if(arguments.length == 2)
  {
    return p.subset(array, offset, array.length - offset);
  }
  else if(arguments.length == 3)
  {
    return array.slice(offset, offset+ length);
  }
};

tests_passed
Seems okay.

I then wanted to play around with array references. What If I try to change a value in array B if it was a subset of array A. Will the change be reflected in both arrays?

I get this:
array references

That’s great, but it wasn’t what I actually expected. I’ll have to talk to f1lt3r about this. Onto the next function…

Follow

Get every new post delivered to your Inbox.