Study week project: day 0.5

This week (starting tomorrow), I'll be going through and learning as much as I can of webGl and 3D programming.

I am doing this because it interests me, and this is the sort of stuff I wanted to learn when I first applied to Seneca. Although, what I have been learning up to this point has been great, and it's all one piece of something valuable, sometimes, it doesn't matter what. A challenge is a challenge.

I will start by going through these tutorials. See how far I get and how long it takes me. I'm not in any rush, and I don't know how far I will end up. I hope to finish up these tutorials and just play around with it a bit. I would like to be able to create a house like object sitting on a flat green surface. I really don't know what I'm getting into, though, so this objective might be too small, or too large, so we'll see. Should be fun.

I skimmed through the tutorials, and they seem to move pretty quick, and it looks like it's mostly the building blocks I will be doing, so that's always good. 15 tutorials total, so obviously if I want to get through this in a week, I must do more than one a day, might be harder than expected *shrugs* The final tutorial has a spinning planet with a reflective water surface. So it's got a moving, 3D shape with a texture, lighting, camera, and reflective surface. Start at the beginning I must.

That is all.

Today's Challenge:

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

Hey.

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

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

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

The project wiki: here.


Specifications
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) {
      strings.push(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.

Conclusion
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

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

Changes

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

Conclusion
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

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!

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 "google.ca") 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

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.

Update:
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.

Update++:
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

alert("hihi");

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 "http://www.google.ca" 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

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) {

vs

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

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 http://processingjs.org/ 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.

There and back again, and regular expressions are hardcore

So, I've been thinking about my solution to bug #226, and at one point, I changed my mind on my solution, of masking all strings, and later replacing them based on <STRING n>. I thought of a few possible bugs, mostly the odd chance someone enters <STRING 7> (for example) as a string, and that would be a problem, because the parser would put <STRING 7> into it's array, and mask it with the appropriate mask, then later replace the string, but if it happens to contain a string of a string that has yet to be replaced, the parser would then find that string, replace it. Hmm, hard to explain, but I decided the only solution would be to only replace <STRING n> later, when all the code is replaced, if the <STRING n> is NOT inside a string, and that was kinda what I wanted to avoid in the first place.

So, I figured I should re consider checking all parser regexs to not parse while in a string, like I have to do while replacing <STRING n> with the appropriate strings. The advantage of doing the later, is I don't have to worry about keeping an array of all strings, which might get quite large, but only has to be done once for each time the code is parsed, I believe, which isn't too bad, but not optimal.

I thought more about it (this was while taking my 2 hour bus ride home) and decided against it, so I was back to my original solution. My reasoning: KISS. The original method might not be the fastest, but it's simple, you do it once, and it's done. The other way, might be faster (marginal) and it's situational, but it's a debugging nightmare. Each time someone adds something to the parser, they must remember to check to make sure it's not in a string. I only need to check to make sure it's not in a string once, and no one else has to ever worry about my code, also making it more modular.

The other thing I've been working on: really tweaking the regex for checking for strings. It's not apparent, there were a lot of things I was not considering, and I've been changing and testing various solutions, and right now, this is how it looks.

/(["'])([^"'\\]|\\.)*(\1)/g

Before, I was being greeeedy, things like this test, would muck it all up.

text("Hello World!" + (4 + 5) + "Hello World",50,i+=15);

Now, it was being printed off fine in this case, but any processing that was between the two strings, would NOT get parsed, so I changed it to a non greedy string, and added a few more touches, like using ['"] instead of ('|"), which are pretty much the same, but to me, the first one is simpler, and using back reference on the string type, just because I think it's cleaner that way. Anyway, all for today.

Yesterday was not the most productive day, I sort of did little bits of work, on and off all day, amongst other things.

I did get something pushed into my repository by following these instructions throughout the day yesterday.

Only two things left to do.

6. Update the LightHouse ticket with your repo information as well as the url's of the tests.
7. Send annasob a pull request using the pull request button.

I've been going through other finished tickets, and looking at the tests they have completed. For example, this test here by Andor Salga is way better than mine, which is a good thing. It's a guide, something for me to shoot for. I've actually noticed a few others using a very similar testing process. Maybe there is a guide on the processing.js lighthouse, and these are the standard tests? This seems like the last step, and there is still a week until release 0.1 is due.

processing.js bug #284 and #226

I've been doing some Processing.js debugging and testing, for tickets #226 and now #284 because of the close relation.

Originally, I did some tests for removing the comment regex, and these were the results source code. The problem is with the comments, the parser is having problems as it's not expecting a comment. I believe parsing out the comments is the easiest solution.

Here is my solution to both tickets. souce and a test.

What I am doing is first, creating an array that contains all the strings.
Then, masking all the strings, this will also grab any strings inside a comment

    // Saves all strings into an array
    // masks all strings into <STRING n>
    // to be replaced with the array strings later
    var strings = aCode.match(/("|').*("|')/g);
    for ( var i = 0; /("|').*("|')/.test(aCode); i++)
    {
      aCode = aCode.replace(/("|').*("|')/, "<STRING " + i + ">");
    }

Then, I parse away all comments.

    // Remove end-of-line comments
    aCode = aCode.replace(/\/\/.*\n/g, "\n");

Any strings inside a comment do not matter, and any // inside a string have already been converted to .
I then replace all the strings as the final step.

    // replaces all masked strings from <STRING n> 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]);
      }
    }

any strings that were removed because of being in a comment, are not replaced, and the program simply skips it.

I'm ready to upload it, and hope I have not missed anything as it's my first time! *fingers crossed*

Update! working tests

At the end my last post, I mentioned how my program was failing tests due to testing old code with my bug fix, with new code, so my tests were off, anyway, I tested my bug fix for bug #226 with up to date code, and these are the results!

as you can see, the results are the same as the original test, which is great. I learned more by not getting it right the first time! Anyway, I have to double check the quality of my code, comment it, keep it in the appropriate style, and go for pushing it to my repository. I believe I need to put together some files for that, some examples, and show some tests. I am confident though. I am also getting down the system used to do this development, so my next few attempts will go much smoother!

Testing of bug number 226

After an evening and morning of setting up an environment, my curiosity peaked when I was doing the tests on processing.js, so I decided to go back to my friend bug #226, and run that through some tests. This is the result!

Ah, I consider this interesting, compared to the tests on my blog post from this morning. I have to admit, I was disappointed... but it's all part of the process. One of the obvious errors was strings was == null, and I was trying to access it's length property. This was an easy fix, as I just needed to put the for loop into an if checking to see if strings was != null, like so.

    if (strings != null)
      {
      for( var i = 0; l = i < strings.length; i++ ){
        var ex = new RegExp("\<STRING " + i + "\>");
        aCode = aCode.replace(ex, strings[i]);
      }
    }

I then re ran the test, and there was progress. Here are the results.

As you can see this is considerable progress from last test, but still down from the original test. So I still have work to do. Now I think I should redirect the results from both tests into a file, and see which errors are new, and start working on them.

Update!!

So, I checked, and a lot of these errors I'm getting is simply because of an old build, so I'm adding all the string updates to the new Processing.js. I'll probably post the results into a new post, though, as too many updates in one post, might make it hard for people to follow my progress.

setting up Git and GitHub

Last night I went onto the Processing.js Lighthouse page, to get the instructions on how to push my code. I'm quite new to this, and am following the instructions, and learning what I'm doing while I do it, usually after making a mistake, then I get it right, then I know what it is I was trying to do :). I think that's normal... I hope it's normal... it's normal for me, and works.

Anyway, I went to these instructions on setting up Git and GitHub, and created a new fork of jeresig's repository into my ownfork. I had some difficulty with some of the instructions setting up Git to connect to GitHub, and it was a silly mistake. It ended up being because I was so tired, as after going to bed, I woke up, and everything was so clear and easy. A good thing too, because I could of easily wasted hours on it. What was happening was, when I tried to connect, I would get an error, because my SSH key was not properly set. The key was right, the file location was wrong, as I didn't let the key go into the default location. The key is used to connect my Git command line, to GitHub, which holds my fork, I believe. Ah, so many new terms :). Anyway, I simply generated a new key with the "ssh-keygen -C “youremailinquotes@com” -t rsa" command, this time leaving all requested fields blank. So I believe the first time I tried, my key was right, it was just looking for it in the wrong place. Which is an easy mistake to over look if you over think things. Some say children are better at solving logic puzzles simply because they don't over think things, or they get more sleep :).

Finally, here I am in the morning, 5:00ish, going through my newly cloned source, trying to get that setup. I figured a good place to start would be checking out the READMEs. So I've bee folloing the README instructions in the test folder, and it's been going quite well. I first had to setup a Mozilla build again, like I did on in my last post, which I wanted to do again anyway, as I made some mistakes last time, and I will understand things better the second time though. It's always good to be able to work on one thing, and get two things done. Last time I built Firefox, I used a tarball, as apposed to cloning a new one. The tarball before worked, but it was confusing, this time, it's been smooth.

I am now making a JavaScript shell, to use to for the test code for Processing.js. It is running as I started this post, and it is now done. So I'm off to do the next step.

Two more things I want to improve on.

• Start putting screen shots into my blog.


• And post at least two blogs a day, as I didn't get a chance to yesterday.


• Or one large, detailed post.

Update, with screen shots! I have a working js.exe, and adding the path to my Processing.js makefile. I know this, because I ran a test "make test" on the processing,js file, this was the result.

I am now doing "make test-parser", will come back with updates.

Ok, ran "make test-parser". I won't bother with the screen shot, as it looks a lot like the last one, cept it has 662 passed, 188 failed, and 850 total. I'm excited to run my code from a few days ago through the tests, but I still have a few more steps in the README.

Next step has to do with converting a processing file into JavaScript. It all made sense to me, cept it wants the processing file to be of type pde, not sure what that is, so I'll go check that out now. Here is an article on pde. There is a spot near the bottom of interest to us.

Processing Development Environment (PDE) (Source Code File) by ProcessingThe Processing Development Environment (PDE) consists of a simple text editor for writing code, It is an open source programming language and environment for people who want to program images, animation, and interactions. When programs are run, they open in a new window called the display window. Software written in PDE and also all Processing projects are called sketches. Each sketch is saved in its own folder. The main program file for each sketch has the same name as the folder and is found inside it. For example, if the sketch is named "Sketch123", the folder for the sketch will be called "Sketch123" and the main file will be called "Sketch123.pde". The PDE file extension stands as an acronym for the Processing Development Environment. This association is classified as Source Code.

I noticed some .pde files already in the processing.js test folder, going to play around with them.

I just ran the command "make test/parser/shiffman-test.js", with success. What happened was, it took the file shiffman-test.pde, which is a processing file, and converted it to javascript, using processing.js. It outputted the new code right in the command line, I was expecting a new file to be saved, but that's no big deal, as I just used "make test/parser/shiffman-test.js > shiffman-test.js". easy enough.

Next step is to go through the workflow link, add my code to the local processing.js file, test it, then submit it if everything is good.

It's quite a learning process getting this all setup for the first time, and I find this class to be one of the more challenging classes. Not that it's harder, just that I'm doing more learning, and challenges. I find the solution is usually quite small, it's just getting there. Ah, I should use the word "new challenges" instead of the usual jump-through-the-same-old-hoops challenges. I'm really enjoying editing and working with code, it's more professional, I'm actually starting my career now, as apposed to before, when I was just doing academic assignments. I don't know if any Seneca faculty are reading this that don't already agree with me, but this class, this OSD600 has been the best fit for me, I highly recommend it to any 4th semester students that can get over the hurdle of making a blog *gasp*, but I would not be able to do it if it wasn't for the steps before. It feels like a long process, but to think, just 5 semesters ago, not much more than a year, I knew nothing about programming! Ok, I'm rambling now.

Firefox build

Well, after a few problems, Firefox seems to be building fine now. It's been compiling for about twelve minutes, and before my problems all seemed to be early in the build, so I hope I'm out of the woods now.

The hardest part was simply downloading the files I needed to do this. I felt like there was no guide giving step by step instructions all in one place, but parts of guides. And, it seemed all of the parts vary for different machines and versions. It was up to me to learn it, understand it, and make the right choices.

Google was not much help in getting answers to my specific error messages, so what I would end up doing, when I hit a problem I didn't understand, I would go back a step or two, and try again, paying close attention to what is happening, and I may go back more than one step, or in some cases, right back to the beginning until I understand it. Each pass through I knew more and more, and by going back, I could see things with a knowledgeable eye, and stuff just sort of clicked.

Anyway, on to my specific errors and how I solved them. Once I got the commands working understood, I started using the make command, until I figured that out, and my first error was something to do with --enable-application=APP, which made no sense at the time. I was trying things like adding it to the end of the make command, and moving my .mozconfig file around. I read that it was important, and I thought I had it. But, it turned out I had a .mozconfig.mk and .mozconfig.out, which are not the same. I needed to create it myself, and then add the --enable-application-APP command there, so I tried that, still didn't work. I think found some advice on the web, with "ac_add_options --enable-application=browser" thinking I needed ac_add_options before my =APP, still didn't work. So, I tried "ac_add_options --enable-application=browser" without APP and browser instead. And voila, it seems to be going error free. In fact, it's still going, and I think it's going to finish problem free from this point on. If there are any more problems, I'll be back to edit this post, actually, I;ll be back if it works too.

So, it completed with what I think is no errors, although, It took me awhile to figure out how to install it. I found something under the name of Namoroka, which I believe to be it, so I installed it. It installed fine, or what I thought, but it would run, said it was missing Firefox.exe, so I aded that, just out of curiosity, then it wanted a .dll, and it kept going. So eventually I found all the files in one location in the firefox build files, so I just copied it all into the Namoroka folder. It now has no errors, but no program is actually started. Ah well, I think though, that's all I have time for and is a good amount for only an hour (7:38 - 8:48) little more than an hour. Anyway, I have to wake up tomorrow at 5:00 to make it to Java EE on time tomorrow.

parsing indifferent to strings

I think I have implemented a solution to #226. The problem was seemingly complex, first thing I thought is I would have to keep track of all the parsing, so that it didn't parse a string, but then I thought if I could remove all strings, then replace them later, after the parsing is completed, and that's what I've done. It seems to be working! This is what I did.

At the beginning of the parsing, I run this block of code

    var strings = aCode.match(/".*"/g);
    
    for ( var i = 0; /".*"/.test(aCode); i++)
    {
        aCode = aCode.replace(/".*"/, "<STRING " + i + ">");
    }

This, first, goes through all the code, and grabs all strings, and saves them in an array. Then, I loop through the code, applying in place of the "string". I do this until there is no more "string"'s left.

Then, at the end of the code, after all other parsing has been done, before I return aCode, I reapply all the strings like this

    for( var i = 0; l = i < strings.length; i++ ){
      var ex = new RegExp("\<STRING " + i + "\>");
      aCode = aCode.replace(ex, strings[i]);
    }

This goes through the array of strings, one at a time, until they have all been gone through, each time, applying that string to the proper with n being the index of that string in relation the the array of strings.

I believe this is pretty solid and can be demonstrated here. You should see three alert boxes, displaying messages that would normally be parsed out, then the usual black box of success. Also notice how I put a string inside the comment, to make sure it was able to handle that, as I parse the string before I parse a comment, as to avoid removing some string that happens to contain // in it. I also tested a multi line string, as I was curious, it handles it fine just so long as it's not written like this.

alert("first line
second line");

which to my knowledge, should not work anyway, plus, it's horrible code!

I think I'm done this bug, and I think the next step is to figure out how to submit my code...

good morning

Alright, so last night I was officially assigned a new ticket, notably the string parsing one I talked about last post.

I have been thinking about how I'm going to do this, and I think I found a solution. I'm going to parse through the whole page with a replace regex, like is frequently done in the process, and replace all strings with <STRING n> where n is a unique, incrementing number, like how when an object is created, its replaced with <CLASS name> temporarily. Then hold all the strings in an array. I will do this before all the parsing begins, and once everything is complete, I will replace all <STRING n>'s with the appropriate string from the array. In this way, I'm masking the strings from the parser. I know the parser can move things around, so I think keeping track of them by a number, than relying on the order in which the strings appear, is a safer way to do it.

I've also still been working on #133. Specifically, trying to get the private word to work on a method. For now I'm stuck on it. I mention the problems in this post, which still stands.

The member keyword still works, and I think is finished, I just now have a bug where if in the Processing code someone assigns a private member inside a method, using something like this

this.num = num;

It will instead make a new var, "replacing" the one I already defined as private, and making this one not private. I'm not sure if this is beyond my scope at this moment, or if it should be tagged as a new, separate ticket. I show this problem here. After clicking through all the alerts, the black screen should NOT load, as I'm trying to call a private variable directly, but it works, because the private variable is being over written by this.num, which in javascript, is how one would make a public variable inside a class.

bugs

I noticed a bug that was kinda messing with my parse fix from last post, which I was simply checking for all instances of "private this.", which is working, cept if it appears inside a string. I looked through the bug list, and found what I was looking for here. It's a tricky and nasty, but fascinating problem.

Buy anyway, here are some examples on what I have working.

private working this time, for real

Still working on Processing.js's bug number #133.

In my last post I said I had private working for private variables, but I was wrong. It worked, as it was able to handle the word private, as in not crash, but the variable still was not private. There were a few reasons why this was happening, but mostly I was doing my conversion in the wrong location. I decided to start printing off my html page's processing code, in various stages of conversion, and noticed my old method for converting private, was being converted back again by another part of the code, so I added my conversion to that block of code, this is what it looked like originally.

// Replace var foo = 0; with this.foo = 0;
// and force var foo; to become this.foo = null;
vars
.replace( /\s*,\s*/g, ";\n this." ).replace( /\b(var |final |public )+\s*/g, "this." )
.replace( /\b(var |final |public )+\s*/g, "this." )
.replace( /this.(\w+);/g, "this.$1 = null;" ) +
( extend ? "extendClass(this, " + extend + ");\n" : "" ) +
"" + ( typeof last == "string" ? last : name + "(" );

I added one line to the end of the replaces

.replace(/\b(private this.)/g, "var ") +

It now looks like this.

// Replace var foo = 0; with this.foo = 0;
// and force var foo; to become this.foo = null;
vars
.replace( /\s*,\s*/g, ";\n this." ).replace( /\b(var |final |public )+\s*/g, "this." )
.replace( /\b(var |final |public )+\s*/g, "this." )
.replace( /this.(\w+);/g, "this.$1 = null;" )
.replace(/\b(private this.)/g, "var ") +
( extend ? "extendClass(this, " + extend + ");\n" : "" ) +
"" + ( typeof last == "string" ? last : name + "(" );

What this now does, is after it's done parsing through the variables, if it's going to be private, it'll look like this

private this.i;

So I'm replacing this with.

var i;

Instead of.

this.i;

An apparent problem is if later in the constructor, I'm using something like this

this.num = num;

It will cause problems. It will be trying to use a private member, by declaring it later with this., which in JavaScript, will make it a public method, ignoring the previously set private one. Also, I don't have private methods working, but I have located the location in the code that I have to work with it. It appears it's adding the methods to the object through the use of a created method called addMethod, which I don't understand yet. Here is the implementation and calling of said code.

p.addMethod = function addMethod( object, name, fn ){
if( object[ name ] ){
var args = fn.length,
oldfn = object[ name ];

object[ name ] = function(){
if( arguments.length == args ){
return fn.apply( this, arguments );
}else{
return oldfn.apply( this, arguments );
}
};
}else{
object[ name ] = fn;
}
};

and calling

// Fix class method names
// this.collide = function() { ... }
// and add closing } for with(this) ...
rest = rest.replace( /(?:public )?Processing.\w+ = function (\w+)\((.*?)\)/g, function( all, name, args ){
return "ADDMETHOD(this, '" + name + "', function(" + args + ")";
});

I'm not sure how this is all working, but the second part of code here will change the html processing code, to call the addMethod, I'm pretty sure about this, just not sure how it's doing it.

Finally, I noticed comments are removed only if a space follows the //. This is easy to fix, I'm just trying to find a good reason as to why this is here, or if it's simply been over looked. Like this.

// Remove end-of-line comments
aCode = aCode.replace( /\/\/ .*\n/g, "\n" );

As you can see, someone has added a space after the //, is this on purpose? why?

private working

I was able to use a simple solution on #133. What I did was implement one line of code

aCode = aCode.replace(/(private)/g, "var");

I added this to line 82(about) of the source. This was just to test, but it worked. You can see the implementation here. This is the Processing.js source I am now using.

I just remembered I need to make sure it doesn't parse any character strings with the word private in it. I need to test it for use with private functions, check syntax variations, and debug.

Just noticed the "private" member is not actually private, probably because it's still creating a "this.variable". So in the end it looks like "var this.i;" which, probably is not private as I expect.

Processing.js source code

Today, Feb 1st, I've been going through the JavaScript source for Processing.js, and I think I've figured out what I have to do, and how I have to do it, I'm just tno sure where.

I'm enabling the private keyword to be usable in Processing.js, bug number #133.

Last post I mentioned how I would just need to use the basis behind the public keyword, that I could just "flip that", whatever that meant... I figured if public is working in Processing.js, the same concepts could be applied to private. Oh, how wrong I was.

What I have to do is, wherever a private variable is declared, I need to change the JavaScript to specify as a var. This link was helpful in refreshing my memory. An example.

private int i; //Java

var i; //JavaScript

I believe this is the concept. I should find where in the source a public variable is converted.

public int i;

to

this.i;

and add a regex that does this feature, but with private.

There are a few things I have not fully thought through, yet, like if a variable is created in java without the use of public, the JavaScript probably finds the int word, and creates this.i anyway, and I don't want to just look for all private and switch it with var, that would leave me with var this.i.

I don't know exactly where in the source this needs to be done, but starting on line 71 there is a var called aCode going through multiple regex's. What this is, is a string containing Java source, being parsed into JavaScript.

// Remove end-of-line comments
aCode = aCode.replace( /\/\/ .*\n/g, "\n" );

I'm going to replace instances of private with a regex in this manner.

I also must consider private functions, so a small check list, of things to consider.

• Consider private member functions


• Consider private member variables


• Consider variations in the syntax

That seems to be all for now, I don't think getting something working is going to take much longer, hopefully it'll be done by Wed night.