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 :


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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s