I got a response pretty fast which was PR-! The problem was that some unit tests were failing. The reason why this happened was that I never was able to run unit tests prior as I was not able to make moz build run make check. Now my task was to see why these tests were failing so I improvised by copying the code from each into example.pde and debugged it line by line from there. Doing it this way made it pretty easy to find the problems and fix them, as well as learning a little bit about XMLElement as I went through it!

This time when pushed it for review Pomax replied instead saying that there are a few more things I need to fix as well as the fact that he already made a similar constructor for a different ticket! With his help I changed my constructor around to be more efficient but I don’t know if my constructor code will actually get pushed anymore as they already have something similar. On the other hand, I think that my other function code will get applied as they do not have it yet.

If anyone wants to see, my branch is at https://github.com/gkrilov/processing-js/tree/t1540

I can safely say that I now know what style the code should go in to get accepted… now does my code have any problems? well that is a whole other story. So far out of my 5 tickets I have had one technically approved.. although we found out that because of ArrayList methods are private they will not be accessible outside of it and therefore this fixed bug was in the end marked as “wont fix”.

A few of my other bugs are currently jumping around from being assigned to jon buckley to be assigned to be for “review- needs work” and one of my bugs has not yet been looked at. I am currently in the process of trying to fix my 0.4 XML constructor bug as it seems to have some issues with the unit tests.

So far I am happy with the way things are going and in general happy with the big amount of JavaScript skills I have learned from being in this course.

The two tickets I picked had to do with the same part of code which was our ArrayList implementation.

The tickets were:
#1734 Add ArrayList.removeRange – http://download.oracle.com/javase/6/docs/api/java/util/AbstractList.html#removeRange%28int,%20int%29
#1001 removeAll() method not implemented - http://download.oracle.com/javase/6/docs/api/java/util/AbstractCollection.html#removeAll%28java.util.Collection%29

Each required me to create a different function for the ArrayList implementation of processing.js

removeRange was very straight forward although I did have to look at how Java implements this method and match it accordingly.

removeAll on the otherhand was different and more complicated because I not only had to create the function but I also had to make it more efficient than it’s Java implementation and for that i used the following link:

http://www.ahmadsoft.org/articles/removeall/index.html

At first I wanted to port the Java implementation to see how it works and then after change it to be more efficient after. The implementation uses iterator and it just happens our ArrayList has an iterator created for it. After trying to do it I quickly found out that the iterator
code we have is not completely correct as our remove function was not created according
to the Java API and therefore was breaking my code. The problem was that calling the remove function has to be preceded by a call to next because you cannot remove an item until next has been called as specified by the Java API and this was not reflected in the code. To fix this I created a variable which gets set when next gets called and reset when remove gets called. The next problem was that when next is called to get the value the index was also being incremented by one so that next time you call next it will be the next value. This was a problem because if you call remove right after you call next you would be removing the incorrect item as a result of previously incrementing the index by 1. To fix this I simply had to use index-1 in the remove function instead. The last problem with the iterator was the problem that when you removed an item the index was not being updated correctly to point to the new current item so i simply had to decrement index by 1 after every successful call to the remove function.

With this fixed and the code working I felt good about no trying to create more efficient code by looking at what was done in the link posted earlier. Basically the problem was that the was which the original code was written the worst case scenario is f(n^2) which is slow and the person was able to change it to a constant f(n). It is n^2 because for each item to remove you need to use remove which is apparently a f(n) operation and since it is possible to call remove at every point in the loop it ends up being a f(n^2). The way that I fixed this was take out the remove completely and instead check if an item in the current arraylist is not present in the collection and if not then simply put that item into a new array.

The thing I am wondering though is although Java’s iterator remove function is f(n) I am not sure if the JavaScript remove function is f(n) and changing the implementation was even necessary?

Anyways this is my 0.3 and I am glad it is finished! I spent a good part of my weekend working on this to get it over with as i have a lot of things to do this week.

First thing I did was fork and clone David Humphry’ mozilla-central which took a longish time because it was approx ~500mb..

Then what I did was panic because I had no idea whats going on.I tried to make the client.mk file but had the following issue:

client.mk:121: *** This source tree appears to have Windows-style line endings.
To convert it to Unix-style line endings, run “python mozilla/build/win32/mozill
a-dos2unix.py”.  Stop.

I tried running that python file but it did not seem to work.

I followed this with trying to google how to do this.. I stumbled upon a guide by somebody name Simon Jung (http://simon-jung.blogspot.com/2007/09/building-firefox-3-in-windows.html) which explained how to do this whole process! Only problem was that he wasn’t talking about using git.. he used mozilla’s own repository which apparently uses something called mercurial which is similar to GIT in its functions but completely different in how you use it.

I put that to the side and went on to look at mozilla’s own guide on how to do it… o man it was so confusing and full of stuff… i decided to give up trying to read and understand it and just followed Simon’s guide to do it which was a nice step by step:)

It was mostly straight forward up to the point where I got an error:
checking whether the C compiler (cl  ) works… no
configure: error: installation or configuration problem: C compiler cannot create executables.
*** Fix above errors and then restart with  “make -f client.mk build”
make[1]: *** [configure] Error 1
make[1]: Leaving directory `/d/proj/mozilla’
make: *** [/d/proj/mozilla/obj-i686-pc-mingw32/Makefile] Error 2

so after searching for an hour or so on this error I tried to run a different .bat file and that took this error away! – At the beginning I was running start-msvc9-x64 because I am using a 64bit machine and I thought I should be using that.. but then I tried using just start-msvc9 to see what happens… guess what, it worked?? not sure exactly why but maybe the x64 refers to something else. But either way it worked and i was happy Next I started the make command and after a little bit it came to a new error. Something about a atlbase.h file being missing! Apparently this is a very much known issue because apparently VS 2008 express does not come with this file, while the Professional version does come with it. Mozilla gives the workaround of downloading the last version of of microsoft SDK which came with this file which is 2003. https://developer.mozilla.org/en/atlbase.h.

Now it finally started building! approx 2-3~ hours later and it was done building.
Great success!:D

Now my next step would be to follow the guide on our wiki on how to fix my above error and do the above with our GIT.!

http://zenit.senecac.on.ca/wiki/index.php/Mouse_Lock_Implementation_FAQ

**UPDATE**
So I used the answer from the “Mouse Lock Implementation FAQ” for my initial problem of “This source tree appears to have Windows-style line ending…” which was install git with the option 2 Checkout as-is, commit Unix-style line ending on the “Configure the line ending conversions” screen. Then once git is setup run the following command before cloning:
git config –global core.autocrlf false

then I cloned the repository again and did all the steps i did previously to get it working and this time it was all good!

For my 0.2 I did not want to pick something too big as I had less time to work on it.The bug I ended up having assigned to me was ticket #1640. This bug was about the fact that shearX and shearY were not implemented yet in processing.js and needed to be added to the API because the Processing API had them.

Processing ShearX and ShearY links:
http://processing.org/reference/shearX_.html
http://processing.org/reference/shearY_.html

What the shear function does is slide parallel surfaced (x or y) past each other by a certain number given in radians in the range of 0 – PI*2.

For example a regular square transformation when sheared along the X axis by a certain factor would look something like:

The image on the right side is a X sheared copy of the one on the left. You can see how its bottom  X axis slid to the right turning it into a parallelogram.

While actually doing this is very easy using the Canvas API we already have, finding out how to do it was not easy at all. I spent hours trying to search how to do shear and looking at matrices which I didn’t know much about – knowing nothing about 2d graphics didn’t help me either. I desperately needed some help and explaining how these things work in processing.js and lucky for me I knew Andor who was able to guide me on the right track and help me with this feature. After thinking I had to create a lot of different things for this bug such at different matrix computations I found out that the Canvas API have a nice and useful Transform function which takes matrix coordinates as its argument and multiplies that matrix by the current transformation matrix.

Besides that I also had to make a ref test which following the guide was pretty straightforward to do and I still technically need to make a unit test which I am not entirely sure how to do although I have something in mind. I need to ask somebody about this to see if that is the correct way. Also I am not sure how to actually run those unit tests…

Either way I am now pretty much done my 0.2 and happy to be so..
Now it is time to move on to 0.3 which I will probably be picking sometime next week.

My task was to add IE8 compatibility to processing.js version 1.2.3 and make it as functional as possible.
This was especially hard because I did not know what compatibility problems there were besides the 4 which were originally posted on the ticket:

https://processing-js.lighthouseapp.com/projects/41284/tickets/1593-ie8-excanvas-compatibility-issues

As I fixed the original 4, more bugs started coming out one by one; each time I fixed one, a new one surfaced.
Here is a complete list of bugs and fixes that had to be done:

1) IE8 does not support “el.style.setProperty()”, use “setAttribute” instead.

2) In IE8 When using excanvas, dynamically created canvas elements need to be initialized before use. To fix it use G_vmlCanvasManager to first initialize the canvas if G_vmlCanvasManager exists. Added the following function to initialize:
var initializeCanvasIfIE8 = function(canvas) {
if ( !document.createElement(‘canvas’).getContext && typeof(G_vmlCanvasManager) != “undefined” ) {
G_vmlCanvasManager.initElement(canvas);
}};

3) IE8 doesn’t support “document.addEventListener”. Use “addListener” when necessary.
4) IE8 doesn’t support “document.removeListener”. Use “detachEvent” when necessary.
5) IE8 doesn’t support “Object.defineProperty”. Used try and catch to do alternative functionality if necessary.
6) IE8 doesn’t support “event.preventDefault”. Use event.returnValue=false to achieve same result in IE8
7) IE8 doesn’t support “script.innerText” and “script.textContent” so I had to use script.text;

Added scripts to example.html and ref tests to make them work:
<!–[if IE 8]>
<script type=”text/javascript” src=”http://xregexp.com/xregexp.js”></script>
<script type=”text/javascript” src=”excanvas.js”></script>
<![endif]–>

These will only be included in the case of IE8. One of the problems I had was that the parser was not working for some reason.. After a long time of using IE8s debugger I found out that brackets in canvas scripts did not parse properly. This is where I brought in xregexp.js which adds parsing support to IE8. excanvas.js was added for ie8′s implementation of canvas.

A few of the ref tests had to be commented out because a number of them could not be done in IE8, although this was a small amount of tests. Most of the tests which are not 3D work just fine.

IE8 Example.html

Firefox 7 Example.html

Once again let me repeat myself, if I did not receive the help I did I would never have figured out how to test the current compatibility code on a basic square with a background and I DEFINITELY would never have figured out that the current problem lies possibly in the parser!

good thing we are not alone!

So what is going on?? why can’t I release tonight?? -> because every time I fix an IE8 compatibility bug a new one pops right up! and a number of the ones I find I cannot find a fix for using Google as a result of me not knowing the 20,000 lines of code that is processing way too well! therefore I need help from someone on IRC or in person… I guess I could say that this is not your average bug where a fix is a fix is a fix.. of course there are fixes for bugs which might introduce new bug (regression ftw!) -> but in my case it is starting to blow out of annoying proportions.

Basically I cannot see or know about every IE8 incompatibility until I fix all the ones that precede it in the code and I do not know how many precede the last one as so far they keep on coming one after the other and I don’t think I even touched 30% of the massive file that processing.js is!!

All I can say is that I will not be able to release this tonight.. I am not sure exactly when I will be able to release this but hopefully soon! Although I don’t know how many more incompatibilities we will find… I have been staring at my screen for the past 4 hours basically non stop with the exception of some food and so I think my eyes need a rest..

Goodnight processing.js -> please don’t come into my dreams

To begin, I would like to say that I started this project completely perplexed at the mere thought of what I had to do. JavaScript was relatively new to me, the processing.js file was 20,000 lines of codes I could not interpret in any way I tried and scared me, I assumed things about my ticket which I should not have, and lastly I had no idea where or how to start. Although I did manage to go on IRC a few times where once I even introduced myself, I have to shamefully admit that I did the entirety of this release through face to face help and communication with the very helpful Jon Buckley (some of you may know him as jbuck on IRC).

With some initial explanations of the problem at hand I was able to slowly start understanding what it is I actually have to do. I started working which involved researching why such functionality does not work in IE8, what alternatives are present on the web, how certain JavaScript functions work as well as general JavaScript functionality, and lastly how I can insert the alternatives into the existing processing code. While I did a lot of research into this, I am sure that somebody more experienced in open source and java script development could have easily done it in a fifth of the time I spent on this simply because they know JavaScript extremely well and they know almost instantly how to start looking for the answer. Before I was able to actually get anything fixed I ran into a brain deadlock where I started to think that this is too hard and was very close to trying and switch to another ‘easier’ ticket but thanks to some help and explanation of my friend Daniel Hodgin (irc:dhodgin) who basically told me to man up and keep trying I was able to continue and break through some code.

After some more Google fighting (actually a lot more) I was able to finish my current release in terms of code which turned out to actually be not releasable because of a new bug that we found in IE8 which is the fact that Object.defineProperty only works on DOM objects and therefore is causing errors on the page which are breaking the canvas… As a result of this I don’t know if I can still do my 0.1 tomorrow because of an unforeseen new obstacle!

Enough with the rant now -> If you want to see the processing.js file with my IE8 fixes you can get it at ->IE8 Compatibility Branch.
If know additional things which are not properly supported in IE8 or found an issue in the processing.js code and would like to talk about it and possibly get it implemented/fixed come join us at irc://irc.mozilla.org/processing.js

Although if you try this after making a change to a file it will not actually work! the page forgets to mention that you first need to add the changed file to the “staging area” by doing ‘git add filename’ (you can see the name of the changed file name by doing git status -s), which then needs to be followed by something like ‘git commit -m “changes made” ‘ and only THEN you can do something like ‘git push origin master‘ where origin is the branch you are pushing by checking its name using ‘git remove -v’

1. Make a change and save the file
2. ‘git status -s’ to see the changed filename
3. ‘git add filename’
4. ‘git commit -m “changes made”‘
5. git status – see the branch
6. git remote -v – see the remote name
7. git push ‘remote’ ‘branch’
8. check github files to see changes!

Therefore I recommend using http://gitref.org/ for a good and straightforward tutorial onto how to do all the basics.