Release 0.1 for my processing.js work

I’ve hit the point that it’s time to release some of my work.  So here is a detailed run down of what I’ve been working on and where my progress is at.

Added:

• shorten( array ) – receives an array and shortens it by one element and then returns a copy of the array.  shorten test
• expand( array, newSize ) – receives an array and optionally a newSize to make the array.  expands the array to double its original length by default or expands the array to the newSize if specified. expand test
• unhex( str ) – receives a 8 character hex string that represents a color.  unhex returns an int that represents that hex value as a signed int value. unhex text
• nfs( num, left, right ) – number format string accepts either an int, float, int[], or float[] and a number of digits to show on the left of the decimal and optionally a number of digits to show on the right of the decimal place.  nfs test

Bug Fixes:

• fill( num ) – fill is designed to take 1 number argument in the range of 0 to 255 for shades of grey.  However the java processing native client allows you to pass in an int value representing a color and it will fill with that color.  fill( num ) for pjs did not currently support a single number argument for values outside the 0 – 255 range.  I added this because the native java client for processing does support it even though the reference for processing in java doesn’t specify it should work this way.  example test
• nf( num, pad ) – This function was causing an infinite loop script crash in Firefox when called with certain numbers.  I’ve added a fix for the crash but this function still needs to have code written to support 3 arguments. example test

I had planned to implement nfc() as well for this release but I ran out of time so it will make it into 0.2 in November.  The bug fixes for fill() and nf() were unplanned though so I don’t feel as though I didn’t achieve my goal for this release.

My wiki page contains the code snippets for each function and I’ll be adding my entire set of code changes with the 2 bug fixes to the repository code which F1lt3r updated yesterday.

Advertisement

completed unhex() and fixed a bug in fill() !

I started testing unhex( str ) to make sure it was working properly and I realized it would only display certain colors with fill().  As I investigated some more I noticed that the reference for fill() in java will take an int that is a representation of a 8 character hex string converted to an int.

The thing is in Java an int is unsigned and goes from -2^31 to 2^31 and in JavaScript a var is 64 bit.  So I had to make my unhex() convert lets say a hex value of FFFF0000 which is pure red with 0 transparency.  That hex value converted to a decimal is 4294901760.  However in Java that hex string would cause an overflow and be stored as -65536.  So I had to wrap my head around converting the decimal numbers that were over 2^31 to be negative.

Once I did that I had my unhex() working exactly the same as the java version of processing.

Here’s where it gets interesting …  the implementation for fill() in p.js looked like this :

else if ( typeof aValue1 == “number”) {
aColor = p.color( aValue1, aValue1, aValue1, opacityRange );
} else {
aColor = p.color( redRange, greenRange, blueRange, opacityRange );
}

If the number of arguments passed in is 1 it does this above code.  Now if the aValue is between 0 and 255 this is fine to pass that for aValue1 2 3  it will give you grayscale shades … but if you pass -65536 for pure red its going to try to call fill with :

fill(-65536,-65536,-65536,255)

This causes the color to come out pure black usually.  Whats even more interesting is the processing java reference for fill() doesn’t say that it will support an int value above 255 or below 0 … but it does !  You can call fill() in the native client with fill(-65536) and you will get red color.

So I went ahead and added support in fill to take any single int value from -2^31 to 2^31 and display its corresponding color.  Technically it doesn’t say its required in the reference but the native processing supports it so if we want true compatibility I think this should be added.

processing.js unhex() and GITHUB

I’ve got a 0.1 version for unhex( str ) working and a test to check what happens when you have a hex string that is larger than 2^32 as well as normal values.  The native java client overflows and returns a remainder of n % 2^31 which is expected.  I expected a hex string of 8 digits to be red green blue alpha but its represented as alpha red green blue so that kinda threw me for a loop in my tests.  The other interesting tidbit was that fill() in processing.js doesn’t seem to accept int’s properly yet I tried fill(255) and fill(65535) etc and all I can get is white squares printed.  I’ll have to look into this more tomorrow.

I’ll have to do a little more testing tomorrow after work and then its on to digging in to nfc() and nfs().

I also signed up for GITHUB tonight and got through the install and setting up a fork and learning a bit about the whole process.  Thanks to Anna’s blog post about how to setup GIT and connect to the repository I was able to do it with only one or two little snags.  She has another great post about how to make your first contribution to the repository once you’ve written some code.

processing.js shorten() and expand() functions

I put a little more work into the shorten() test lately to check how it functions with arrays of objects.  Right now its only doing a shallow copy so i’ll have to add code to support arrays of objects properly for 0.2 and also support elements in an array that might be arrays in themselves.

I think for now shorten() is ready to be used in a 0.1 context.

Ive also got a test up for expand().  Expand takes an array and optionally a size argument and expands the array to twice its size if there is no newSize argument, otherwise it makes the array the size of the newsize argument passed in.  This function returns a copy of the array passed in.  The same results take place if this function is used with arrays of objects.  You essentially end up with 2 references and each one has a different .length property so it appears to work but once an element is changed in one array it also changes in the other array.  So I’ve obviously not made a proper copy for arrays of objects.  Shouldn’t be to hard to fix for a 0.2 release.

Next up : unhex(), nfc(), and nfs().

I’ll be putting up my code on GIT in a few days.

processing.js test creation template

I noticed that there was lots of tests for some of the work the people in my dps909 class are doing for processing.js but they seemed to be all over the place and all different in design.

So I created a html file for a basic template layout for anyone who wants to make some nicely laid out tests that are all a consistent design and format.

I got this idea from looking at Andor’s tests for mag() and splice() and I immediately saw that it would be useful if everyone followed a similar format for making their tests and included source code for the test at the bottom of the test. So i followed suit and used the same format for my shorten() test.

The template is posted on the processing.js wiki page for others who want to use it.  You can just copy the text into a html file and change what is necessary.  I also added a table for tests everyone has created so that we can reference each others tests all from one location.

processing.js on iPhone

processing.js iPhone

Just for kicks I had to check out what my tests would look like on my iPhone to see how much JavaScript is supported on the iPhone.  It rendered this processing code ok but it did have trouble doing an image with text in it.  My shorten tests drew the rectangle box with a border but no text.  It could be because it tries to load the font Arial and that might not be on my phone since its Safari.

processing.js moving animation on iPhone

Yes ! those round circles in the image were moving and floating around the menu area of the page.  I wish i knew how to take a short movie of whats on my screen on iPhone to post an animation of it.  The picture doesn’t do it justice really.

If anyone wants to see what their processing creations look like on iPhone feel free to post a comment with links to your creations.  Id like to test out a few and see what it can handle.

processing.js, day 2

I had a major crash course on IRC last night with F1LT3R and Dave last night on JavaScript and processing in general.  My run of students didnt exactly get a steller professor for our JavaScript course so most of us are lacking solid JavaScript skills.  It was easy enough to pick up though aside from a few little things it’s not bad.

The processing language and concepts are making a lot more sense now and I think I understand pretty well even after only two days. I’m sure there is a lot more to learn but for now at least I feel comfortable enough to be able to start writing functions soon.

Friday I’ll be redesigning my first pass at shorten() to work for arrays of objects and then I’ll be starting expand(), nfs(), nfc(), and unhex().

processing.js, day 1

Wow

What a long and eventful day.  I haven’t accomplished this much .. or at least felt like I accomplished as much on one project in one day in weeks.

To keep this short ill just rhyme off a list of things I did today from start to finish to get up to speed on exactly what processing was all about.

• installed java version of processing from processing.org
• downloaded the processing.js source and examples
• added myself to the processing wiki page and updated my personal wiki site
• assigned myself to the shorten() function to contribute to andor’s work
• read up on the getting started and coordinates/drawing examples
• created a test drawing of a little alien guy to test out the drawing capabilities
• wrote shorten() and 6 tests for it and uploaded the test here

As for the future I’ve assigned myself to create the expand(), nfs(), nfc(), and unhex() functions.  In a few days I will pick out a medium difficulty function and that will be my release 0.1 for Oct 28.

Change of project

Unfortunately it became time for me to realize my current project was way over my head and not something i could complete in the given time frame.  So I have put my work on Fennec aside and plan to revisit it sometime when I have a larger timeline and more experience in c++ and Mozilla code.

I have decided to change my project and hop on board the processing.js team.  I was interested in this project as well when the course began and since there are other students working on it as well it makes it much easier to help contribute to other peoples work and offer up contributions others can make to my work in the future.

Firefox vs Internet Explorer testing @font-face

Put together a small image showing what the page renders like in FF 3.5 vs IE8 (display is the same in IE7 as well). Click on the image for a full size view to compare how the fonts are rendered.

Here it is on the device