Archive for February, 2010

Today’s Challenge:

Posted in open source on February 26, 2010 by scottdowne

Today, I am going to see if I can edit what I created in my last post, but this time, when the mouse scrolls, I want the circle in this example to follow a circular track, and not an up and down track. Then before the end of the day, I will post my results.

So far, I believe this is what I must do.

  • Create a circle of x and y points, and store them in an array instead of drawing them to the screen
  • Sort the array’s points, as I cannot think of a way(yet) to draw a circle in the order it is used.
  • When the mouse wheel is moved up, go to the next point up in the array if it’s not the last one, if it’s the last one, go to the first. Same thing but reversed for mouse wheel down.

Update: I have created the circle, and set the point into an unsorted array.
Next: sort it, and apply the “track” to the mouse scroll

Update: To make my life and my computer’s life easier, I’m going to just create an arc, and sort the arc, then apply the arc three more times. Kinda like 1/4 of the circle, then must copy and paste it, flipping it, after the arc is sorted.

Update: And challenge complete.

Self reminder: As of this point, when I scroll the mouse, it moves the objects, but it will also scroll the scroll bar in the window, I want to figure out a way to disable this, while still allowing the mouse wheel to scroll the scroll bar when the user wants it.

Mouse scroll wheel hack: update

Posted in open source on February 25, 2010 by scottdowne


So I was playing around with my solution, my little mouse wheel hack for processing.js, that I mentioned in my last post. I first was making sure I could get it to work in Firefox, Safari, Opera, and Chrome. It really wasn’t all that hard. I also wanted to jazz it up a bit, and use the mouse scroll for something more meaty. This is what I came up with.

In my last example, it was setup to work in all browsers, but it was only being called the Firefox way.

The problem was in this line:

addEventListener('DOMMouseScroll', wheel, false);

Firefox uses ‘DOMMouseScroll’, Opera, Chrome, and Safari use “mousewheel”

So, after some research, I changed the line to this:

addEventListener(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel", wheel, false);

What this is doing, is testing the navigator.userAgent for the word Firefox. Obviously, if you’re using Firefox, the word will exist in the same spot. There are other less reliable ways to do this, as I found in my researching of this problem. I usually lean towards the solutions that make the most sense to me (obviously :P). The rest of the line just loads the certain string inside a ?: conditional statement.

I’ll do some testing and cleaning tomorrow, and if I don’t find any bugs, I’ll flag it for peer-review.

Mouse scroll wheel hack

Posted in open source on February 20, 2010 by scottdowne

Progress for the mouse wheel feature in processing.js.

This is the hack. They call it a hack, as it was not intended for use with processing. It just so happens that any Java code written in processing works, I believe. So I think all I need to do here is the same thing, add a hack. It’s already possible to use the mouse wheel in processing.js, as I show here Note, this only works in Firefox that I know of, it does not work in Chrome or Opera. This is without adding anything to the processing code. Because processing.js uses javascript, any javascript is valid code, so I wrote a simple mouse wheel event in javascript using DOMMouseScroll.

I want to clean up the code in the example, though. That’s my next task.

processing.js 0.1 release

Posted in open source on February 19, 2010 by scottdowne

I have finished my work for 0.1 as detailed in my project plans here and here

The project wiki: here.

my 0.1 release was in time to make it into the 0.5 release of processing.js

I did bug #226 for my 0.1 as well as some automated test cases for the new code I implemented.

What I had to do was protect string content from the procesing.js parser, then test it.

my initial patch: here

second patch: here

Final result: This code was modified to increase speed every so slightly, but every bit counts.

var strings = aCode.match(/(["'])(\\\1|.)*?(\1)/g);
for ( var i = 0; /(["'])(\\\1|.)*?(\1)/.test(aCode); i++){
aCode = aCode.replace(/(["'])(\\\1|.)*?(\1)/, "");

into this.

var strings = [];
aCode = aCode.replace(/(["'])(\\\1|.)*?(\1)/g, function(all) {
return "";

I have to thank Corban Brook for helping me fix the code, and get it out as soon as I did.

Automated tests: here

What I learned

  • Object orientation in javascript. By seeing Java object oriented code being transformed to JavaScript, I got a good understanding of how JavaScript objects work.
  • Managing and working with processing.js source code; large code, that was not created by me.
  • Basic uses of irc. I used ChatZilla and later irssi. I switched so I could use irssi with screen.
  • Revision control: git and mercurial. I used git to work with processing,js, and mercurial to work with Firefox (to setup js.exe, which I mentioned in this post)
  • I learned how to build Firefox, and setup a Firefox build enviroment.
  • I learned some standards for code. Like where to and not to use whitespace.
  • One of the most important things; I learned the importance of blogs.
  • I learned there is no such thing as too much testing.

A lot of this is technical stuff that required troubleshooting. I am confident that the next release will be less of a learning process, and I can get deeper into the code.

re initial project plan

Posted in open source on February 19, 2010 by scottdowne

Ok, so I’m going to go back to my initial project plan and re assess things.

project wiki: containing basic information of the overall project. I will be updating it more frequently throughout 0.2 and 0.3.


  • 0.1: Bug #226
    While researching my first initial processing.js bug, I noticed when there was a comment // inside a character string, the parser would be happy to remove it, which is only the beginning. If there is ANYTHING inside a string that resembled code or keywords, it would break. the parser would grab the keyword, and change it to javasctipt. For example:

    text("int i = 0;", 0, 15);

    would then be parsed to:

    text("var i = 0;", 0, 15);

    After noticing this, I went right to the bug tracking system and found this. The bug I, myself just found. So, I’m going to complete that for my 0.1. I will also implement automated test cases for it.
  • 0.2: Bugs #133 and #230.
    These have been bumped to 0.2 from 0.1. I will also do automated test cases for these too.
  • 0.3: TBD.
    I hope with the experience I have gained, I can do three bugs, and implement automated test cases for them as well.

I’ve got down the process involved in doing this, and I hope to start back on 0.2 as soon as possible, Monday at the latest. It’s best to start small, and start early. This stuff is not something that, for me, can always be accomplished in one night.

Scott 1 : Firefox 0… 10

Posted in open source on February 19, 2010 by scottdowne

The Problem
Alright, I’ve been messing around with Firefox as described in two previous posts, here and here. Trying to make new tabs load your homepage.

The Solution
I got a solution that works perfectly (assuming you don’t mind alerts popping up while browsing…).

First, a HUGE thanks to Benjamin Huang and his post.

What I did was:
In tabbrowser.xml. Note, my copy is a slightly different version.

var blank = !aURI || (aURI == "about:blank");

if ( blank && confirm("would you like to load your homepage?")) {
aURI = gHomeButton.getHomePage();
blank = false;

I added a the if statement bellow the var blank statement. This made sense to me as it was an easier way to check everything, then if the page is blank (you don’t want the homepage to load when you click on a non new link) it prompts the user to open his/her homepage or not, then set blank to false.

The Conclusion
It’s sooooo easy, it just took me time to get there. And honestly, I don’t know how long it would of taken me to find gHomeButton.getHomePage() on my own, Benjamin Huang and his post are to thank for that one.

I broke Firefox!

Posted in open source on February 19, 2010 by scottdowne

In my last post I attempted to make a simple change to Firefox. Allow an option to select a new tab to open your home page, or a blank page.

I said what I’ve accomplished. I’ve found the spot in the code where a new tab is created, and change it to load anything I wanted based on code hard coded right into the code.

Today, I added a simple confirm box, that asked if you wanted to load your homepage (which at this point was just “”) The box appeared, but the page was no longer loaded. It was not working, so I removed the code I added, and reloaded it again, which broke it more. Now, when I load a new tab, it loads the tab as a blank page with the same address fromthe first page writting in the new tabs address box, and if you chage a new tabs address, and hit enter, the original tab loads that page. I highly doubt this is a desired feature :P.

It’s because when you’re stuck on a problem, you usually have to learn something new to solve it, but it isn’t always what you think it is. For example, first step is to understand the problem, second is to get an idea or some direction for what the solution could be, this is usually an abstract idea of sorts, usually has nothing to do with code, just an idea. Like “If I could do this, or bypass this, it would solve the problem”. Then, you research your solution, see if it’s already been solved by someone, if not, see how it’s done (it’s always possible), implement it (this is the coding part (notice how it’s only one step in the process (for me anyway))), then debug it. This is assuming your idea or solution is the right one, sometimes it’s not, but you still learned loads from dead ends. Anyway, this happens a lot, and can happen in a short period of time, then when you discover an answer, you notice you answered the wrong question. This can break code. You can find later, something you tried that did not work, that you forgot to remove, and it’s breaking the code. This is what I think I did. So now, instead of combing through 2000 lines of code trying to get it to a working state, I’m just going to start again with a fresh build (that’s good practice too, as I learned that when you first clone Firefox, you can specify the name of the directory it will go in, not a big deal, but it’s the little things you learn that are the most fascinating sometimes).

I was recently asked in an interview how I go about solving a problem, and well, I don’t feel like I gave a complete answer as I was not prepared and answered it best and honest as I could on the fly, well, that last paragraph was the whole answer :P

I’ve been stumped on this homepage part, and on my last blog another student has given me a useful like I’m going to poke around in, see what I turn up. Reading code seems to be the most time consuming process right now.

Firefox build 2.0

Posted in open source on February 17, 2010 by scottdowne

In a post which seems like ages ago, I attempted to build Firefox, and, I believe I got it working, and I did, I suppose, but not to my standards.

After what I’ve learned from working on processing.js and setting up js.exe to use with Javascript, by building Firefox. I needed js.exe to work with javascript right on my box, and setting up a mozilla-build was the easiest way.

I thought this time, I would attempt not only building it again, but attempt some changes. Right now I’m building it to make sure it works under the new build I created for js.exe, then, I’ll make some changes (thanks for the push David).

My planned changes are simple (apparently :P ) I plan to add a feature, so when you open a new tab, you get the option to open an about:blank page, or your homepage. I’m pretty sure I know what I need to do, to do this. The step now is to start getting into the code and breaking it, and seeing what I can do :O

I will be back with more later (success/failure) as I plan on pulling an all nighter.

This Firefox build was more of a success than last time. This time I got Minefiled, which I’m using now to write this post. Last time, I ended up with Namoroka, which was pretty cool too because, and I wouldn’t know what it is if I did not stumble upon it.

Seriously, it’s easier than I thought.

I went though this code, and found the file tabbrowser.xml, then located it on my own box, and just did a simple edit. I added a simple


Inside the area that is used to reload a tab *shrugs* it looked like an easy place to find my change.

Recompiled it, not knowing if it would work, and expecting another 40 minutes compile time. This time, it was done in a matter of minutes, maybe 5 minutes? Anyway, I loaded up the new Firefox.exe and hit reload on a tab, and this was the result!

I know, it’s a silly update. But it worked. I think this was the hardest hurdle though, as the rest of it is just editing and playing with code, something I have experience in.

Final update:
I’m editing the “addtab” method in the tabbrowser.xml file with some success. The code is beginning to make sense, just so long as I stick to “addtab”. What I’ve done, after breaking it a few times, is this. I fist editied line 1044 to instead contain (!blank) to (true). I’m just testing here. Anyway, now that I broke the “about:blank” load, I was free to tell it to load any page I wanted, so I tested with a string of “” instead of aURI on line 1054, compiled, and reloaded. It worked, no point in a screenshot though as you’ll just see a new page of google… but yes, it worked. Every time I made a new tab, I was sent to google. Now, I’m testing the “browser.startup.homepage” property? I think that’s what it is, well, that’s what I’ll call it here in my blog, for now. I must close and finish this update in order to test, and I’ll continue tomorrow as it’s late, and I must wake up at 5.

finished ticket #226, and back to private

Posted in open source on February 13, 2010 by scottdowne

Alright, I finished and submitted my solution to the processing.js ticket #226, and pushed it into my github repository, which was accepted with some advice, and modifications. I was critiqued, for the first time, on my code style. For example, putting a space before and after a conditional statement, like.

if (foo) {



I even got nabbed for a spelling mistake inside a comment :P

In other words, making sloppy code that works, might work in school, but it won’t work in a real project that consumers are not only going to be using, but developers will be maintaining. That is why this OSD class is so great. I know the concepts, I can figure out the syntax, and learn what I need from there for the problem solving. I just didn’t know the standards.

Now that that is done, I’m going back to #133. I will have to start from scratch, but I’ve looked at code in the source that I didn’t understand the first attempt, that I understand now after my work with ticket #226. My last post on ticket #133 still works, I can still make private work on variables, but I’m stuck on getting it to work on functions and nested classes. I don’t think it will be difficult to implement for inner classes, as it’s a variable, but functions are a problem. The way the parser applys functions is with the apply method, and I’m not sure how to tell that to be private. I’ve thought about bypassing the apply method for private only, or all in general, as I’m not 100% sure why the apply method is being used. For this one, I’m going to have to ponder, and read code for a day or two

knee deep now

Posted in open source on February 10, 2010 by scottdowne

Yesterday was the most frustrating day yet in my submersion of open source, but might of been the best. A lot of good things came from it.

One, I got a new direction on my bug, bug #226. I’m still going with the mask all strings approach, and then later replace them, like I decided in this post, but the difference is in the implementation. The way fill the array, and mask the string has not changed. For replacing the masks with the strings, before, I was simply going through a for loop, and replacing all matches for <STRING n> using n as the loop index, and replacing that with the string in the index of the array. Like this.

// replaces all masked strings from to the appropriate string
if (strings != null){
for( var i = 0; l = i < strings.length; i++ ){
var ex = new RegExp("\<STRING " + i + "\>");
aCode = aCode.replace(ex, strings[i]);

This worked in the most basic sense, but if someone had a string containing <STRING n>, like I mentioned in the same post I earlier mentioned, it would crash. The solution was, what I thought, regular expressions. I was doing it all in one, and it looked like this.


What it’s doing is counting all the instances of single or double quotes that do not follow a backslash, then if it was an even number of quotes, it was NOT in a string, odd number of quotes, and I was inside a string, not including escaped quotes.

It technically worked, but I over looked something. It didn’t care which kind of quotes I used, so a string this like “‘”, which is valid, would need to be escaped. It would be expecting “\'”. That last one would work, but isn’t valid code as the quote being escaped can only be the one used to start the string.

My solution was to look deeper into regular expressions. I looked into some advanced regular expressions and I learned a lot. It was productive, but no code was written. I looked at concepts like attomic grouping, which is not available in JavaScript, but this blog post explains how to emulate atomic grouping in JavaScript. It was interesting. I also found this link, on some advanced regular expression techniques. It was a great read. But, none of these had the answer I was looking for. I asked around, obviously asking my professor David Humphrey first. He gave me some advice, and direction, or redirection. A link and some encouragement.

I’m knee deep in a new solution now, that’s a lot more code, but looks very promising already. This is the idea.

aCode = aCode.replace(new RegExp("(.*)(\<STRING " + i + "\>)(.*)", "g"), function(all, quoteStart, match, quoteEnd){


Inside this function, which is pretty cool by the way, I’ll just parse the single “quoteStart” and or “quoteEnd”, without regex, and see if “match” is inside a string or not, if it’s not, I return the new string, if it is, I return “all”.

The inner functions classes are filled based on the order of matches in the regex. So, the first parameter sent is $0, or the whole matched string. Second is $1, which is the first matched pattern, inside the first brackets. etc.

I prefer it this way, it’s easier to read and understand than a complex regex, and modular, because it’s easier to edit what happens inside the inner function, without breaking the regular expression.


Get every new post delivered to your Inbox.