public and private in JavaScript

In order to enjoy programming in JavaScript you have to be at least a little crazy. Take this for example:

function Obj() {
  var private = {};

  this.publicVar = "inside";
  private.privateVar = "inside";
  this.getPublic = function() {with(this){with(private){
    return publicVar;
  }}};
  this.getPrivate = function() {with(this){with(private){
    return privateVar;
  }}};
}

This is, I think, the complete way to emulate Java objects with private and public usage. All other ways are close, but always lack some little oddity that makes it less than pure. Another good thing about this method is it's easily created after parsing Java-like code.

Take this usage for the above object:

var obj = new Obj();
alert(obj.getPublic());     // should alert inside
alert(obj.publicVar);       // should alert inside
obj.publicVar = "outside";
alert(obj.publicVar);       // should alert outside
alert(obj.getPublic());     // should alert outside

alert(obj.getPrivate());    // should alert inside
alert(obj.privateVar);      // should alert undefined
obj.privateVar = "outside";
alert(obj.privateVar);      // should alert outside
alert(obj.getPrivate());    // should alert inside

Now, I think I've thought of everything, and everything else, but if anyone out there can break this, or find a shortcut, or challenge it in another means, I would be very grateful. Note, if you want to try breaking it, you don't have to understand the class itself, just how to use it, like I did in the second example.

blog post patch

Ok, I wasn't 100% correct in my last post. There was something I didn't consider.

Where I said:

Considering this class:


class Obj {
  private String item;
  public void setItem(String str) {
    item = str;
  }
  public String getItem() {
    return item;
  }
}


and consider this usage:


Obj thing = new Obj();
thing.setItem("this has been set");
println(thing.getItem()); // prints "this has been set"
println(thing.item); // prints undefined, as it's not been used yet


Everything working as intended, until I try this:


thing.item = "if you see this, it's broken";
println(thing.getItem()) // prints "if you see this, it's broken" :(

I was wrong, that should work as I originally had hoped, but what was happening was processing.js would wrap it inside a with(this){...} function, which I'm still looking into, but it was doing things that I figured was just normal JavaScript, so I over looked it.

Here are some comparing classes, to illustrate what I mean:

// What should, and does work as intended.
function Obj() {
  var privateMember = "hidden";
  this.getMember = function() {
    return privateMember;
  }
}
var obj = new Obj();
alert(obj.getMember()); // alerts "hidden"
obj.privateMember = "not hidden";
alert(obj.getMember()); // alerts "hidden" :D

Now, what processing.js does:

// Does not work as intended.
function Obj() { with (this) { // This is the only change
  var privateMember = "hidden";
  this.getMember = function() {
    return privateMember;
  }
}}
var obj = new Obj();
alert(obj.getMember()); // alerts "hidden"
obj.privateMember = "not hidden";
alert(obj.getMember()); // alerts "not hidden" :(

Now, why not yank "with(this){...}" right out of there? I don't know what it's doing, yet. More on that later. But I'm hopeful to say I have a pretty solid direction.

processing.js public members public to everyone but itself

Ok, here's what I'm doing. I'm trying to implement the private/public keywords for processing.js

And here are the problems. First attempt was ages ago, and that was to, inside a class, use this.variable; for public, and var variable; for private. This sort of worked, as it allowed me to use public members freely inside and outside the object, and I could not access private members, until they were set from outside the object.

Considering this class:

class Obj {
  private String item;
  public void setItem(String str) {
    item = str;
  }
  public String getItem() {
    return item;
  }
}

and consider this usage:

Obj thing = new Obj();
thing.setItem("this has been set");
println(thing.getItem()); // prints "this has been set"
println(thing.item); // prints undefined, as it's not been used yet

Everything working as intended, until I try this:

thing.item = "if you see this, it's broken";
println(thing.getItem()) // prints "if you see this, it's broken" :(

It's not very useful if private is restrictive but not protective. I thought the whole purpose was to protect you, the person using the object, from themselves, and not just restrict them from, themselves.

Anyway, I wasn't done there. I spent this weekend rewriting the way processing.js translates a class. I was changing it so when you created an object, instead of returning an object, I would call a function that would set all the private members and functions, then return an object literal that would contain all the public variables and functions, which had access to the members in the preceding function, but those members no longer existed, and it worked! Here is an example of what I mean:

function Obj() {
  var privateVariable = "It's a secret to everybody";
  function privateFunction() {
    ...
  }
  return {
    publicVariable: "...",
    publicFunction: function() { return privateVariable; }
  };
}

Usage of this is like so:

var obj = new Obj();
alert(obj.publicVariable); // alertss "..."
alert(obj.publicFunction()); // alerts "It's a secret to everybody"

Everything as expected until I try this... Consider this modified class:

function Obj() {
  return {
    publicVariable: "...",
    publicFunction: function() { return publicVariable; }
  };
}

and this usage:

var obj = new Obj();
alert(obj.publicFunction()); // crashes

So now, a private member is private to everyone but itself, which is good, and a public member is public to everyone... but itself. Two solutions, with two completely opposite caveats.

Final though: while writing this, I was thinking, and organizing my thoughts (kinda the point of blogging, for me) and I have two options I need to explore.

• Change the public functions to use public variables with a "this." before it. Example:
  

  
    return {
      publicVariable: "...",
      publicFunction: function() { return this.publicVariable; }
    };
  

  
  This works, but isn't very practical as I'm translating Java-like class syntax into the javascript you see now, and I don't want to go through all the code, just the structure; this method would require looking for the usage of all public variables, once I have a list of public variables, and add "this.". Not ideal.


• Another option, which I'll try, is to add a list of public variables at the top of the code inside a function, like this:
  

  
    return {
      publicVariable: "...",
      publicFunction: function() { var publicVariable = this.publicVariable; return publicVariable; }
    };
  

  
  Passes the public variable inside this, into a new variable with said name, so I don't have to touch the code inside the function, just add a header of sorts. I would have to do this with functions too.

JavaScript and multiline regular expressions

Just something I would like to share, because it was causing me grief :P.

While working on parsing a Java-like class into a JavaScript class, for processing.js. I needed to grab all member variables that are marked as public, using a regular expression, and return them as an object literal. Given this as an example:

public String thingOne;
public String thingTwo;

Into this:

{
  thingOne: null,
  thingTwo: null
}

This is what I ended up doing:

      middle = middle.replace(/(?:(private|public)\s+)?(var[\s|\S]*?;)/g, function(all, access, variable) {
        if (access === "private") {
          return variable;
        } else {
          variable = variable.replace(/,\s*/g, ";\nvar ");
          publicVars += variable.replace(/(?:var\s+)?(\w+)\s*=?\s*([^;,]*)(?:;)?/g, function(all, name, value) {
            if (value) {
              return "\n" + name + ": " + value + ",";
            } else {
              return "\n" + name + ": null,";
            }
          });
          return "";
        }
      });

Now don't worry too much about that, just a short background of what I was doing to bring me to the problem. Multiline regular expressions in Javascript.

From my favourite Javascript regex resource "Multiline Input 'm' This flag makes the beginning of input (^) and end of input ($) codes also catch beginning and end of line respectively.". It does NOT do what you would expect, it simply allows code like this:

String one;
String two;

to match both lines with this /^String/gm. Without m, String two; would not match as it does not start at the beginning of the line, but after a \n. Another way to look at it is, m changes the meaning of ^ and $ to also match \n and \r (\r being carriage return). JavaScript regular expression is already multiline, in a way, as all lines are actually one long line with newline characters.

What I wanted to do was match any instance of "var (bunch of stuff) ;" spanning multiple lines. To grab examples like this:

public String thingOne,
  thingTwo;

What I was using was something like this /var.*?;/g grabbing anything between var and ;, including whitespace and newlines? right? Nope, apparently not.

There was a trick I found to solve this. /var[\s|\S]*?;/ This uses \s which is any whitespace, including newline, OR \S which is anything NOT a white space, this is the TRUE anything, and a neat little trick.

morning train ride tangent

This morning, on the train, I wanted to open up processing.js and get back to working on ticket #237. I got into it, earlier and reproduced all the problems that the ticket entails. We have empty classes with no methods or constructors not working, we have constructors following methods working, but the methods above the constructor not working, and we have the hardest problem in overloading only working in terms of number of arguments, and not types of arguments. What I mean is:

void addItem(int item){...}
void addItem(String item){...}

This is valid processing, because the two methods are different, but, in JavaScript, variable types are not important, and the above code will be translated into:

var addItem = function(var item){...};
var addItem = function(var item){...};

The methods are translated into the same method, this also does not work with constructors either, which is a different problem because the way processing.js handles consturctors. What processing.js does is, because you can send any number of arguments into a method or constructor, and access the variable by using arguments[n], in a for loop less than arguments.length. This is how constructor overloading is handled in processing.js. There is only one real constructor, it just has if statements checking how many arguments there are. Here is an example for how processing.js translates a class:

class Obj{
  Obj(String item){
    item = "in constructor one";
  }
  Obj(int item, String item2){
    item = "in constructor two";
  }
}

into this:

function Obj() {with(this){
 if ( arguments.length === 1 ) {
 var item = arguments[0];


    item = "in constructor one";

  }

  if ( arguments.length === 2 ) {
 var item = arguments[0];
 var  item2 = arguments[1];


    item = "in constructor two";

  }


}}

If you notice, it's just one method that filters out the contents of the constructor into various if statements, but it's only the length of the arguments, and not the types. What I would need to do is grab the types before the types are lost, and then add a type check for all variables at the same time I check the argument length, but methods are not like this.

Funny thing is, while researching this, I came across this blog post, and as soon as I saw the code, I recognized it. This is John Resig's blog, and he is the creator of processing.js, and his post helped me a lot with how to understand the addMethod, method, and the caveats involved.

Ah shoot, I got off on another tangent. Ok, While I was planning on doing this ticket I have been talking about up to this point on the train, I ended up seeing something in code that made me go back to my last ticke on array initialization. I noticed, later in the code, the use of ArrayList() for more than just creating an array, but initializing. I still cannot get it to initialize the array, but I've spend an unexpected morning on this. The idea of ArrayList is to send a size for the array, to create it, but all the values will be empty. Like so:

new ArrayList(2); // creates an arraylist with 2 empty items
new ArrayList(2, 2);  // creates a 2D arraylist with an array of two, with two empty items

I saw later in the code something like this

new ArrayList(["Thing 1", "Thing 2"]); // apparently, this is creating and initializing an arraylist

Like I said, I didn't (yet) get this to work, but I think it would improve the way it's already being done, with just the array like this:

var things = ["Thing 1", "Thing 2"];

I should get this wrapped up into:

var things = new ArrayList(["Thing 1", "Thing 2"]); // this would be ideal

My train ride tests did not work, but I'm going to reduce it more and see why. First I should get arraylist initialization to work. period. Then I will attempt to add it into processing.js. Anyway, that's all for today.

Processing.js array initialization

Just the other day I fixed a bug for processing.js, where creating an array and initializing it at the same time would crash the parser. What was happening was, code like this:

float[] baz;
baz = new float[] {1.0, 2.5};

when parsed, "new float[]" would be converted to "new ArrayList[]" then "{1.0, 2.5};" would get tacked onto the end, and it shouldn't. "new ArrayList[]" is only for creating an empty array, without initializing it. If you want to initialize, you want the JavaScript to look like this:

baz = [1.0, 2.5];

notice how I no longer use new ArrayList. ArrayList just isn't setup for initialization that I could see, but the above method works.

Anyway, I got all this working fine and dandy here.

When the parser came across something with the word "new\s(\w)" which translates to "new" + whitespace + any word, it would package it all up, what I did was added a check for the array contents, ie. everything inside {} it even worked for 2D arrays and beyond. I would then simply replace the whole thing with the array initialization, and later in the parser it would be changed from {} to []. So, whatever the array was, {{1.2, 2.1}, {7.6, 8.8}} for a 2D array, would just replace all {}'s with []. The problem was, and I didn't notice this until after the patch was submitted, noticed it on the train ride home, was that two arrays can be declared on one line. Sometimes things like this just slip everyone's minds, there are so many ins and outs of a language, and to translate one language to another you have to have good attention to detail. So, something like this:

baz = new float[][] {{1.0, 2.0}, {3.0, 4.0}}; baz2 = new float[][] {{1.0, 2.0}, {3.0, 4.5}};

would break my fix. It would gobble up the whooole thing into one, and the second "new" would get lost, and cause a syntax error. the fix was pretty easy, and I fixed it one the same train I thought of it on. All I had to do was eat all {}'s and everything inside of them until I hit the semi-colon, then stop! the stop is important, and the part I was lacking before. Before I would gobble it all up until I hit the last semi-colon, so, it was greedy.

Here is the fix. Also, I'll be fitting this work into my 0.2 release as it's so very close.

Something else I noticed today (hijacking my own blog post here) working in Processing.js has a pretty big advantage over working in other open source projects. We are a community of developers, so when someone finds a bug, half the time, most of the work in finding the bug is done for us, because the person that found the bug can read the code, and reduce it to a acceptable level of code. But, in a project like Firefox, when a user finds a bug, it might just be a description of what they were doing at the time, and that it crashed. Which is an interesting aspect maybe some of the other members of the processing.js team might not of considered, yet.

0.2

Intro

This release has been weird. My main, original tickets 230 and 133 for this release were not as expected.

Problems and Challenges

230 already existed, but just didn't have any life, I just needed to breathe some life into it by writing some code to show it works, it was more of a documentation issue. The ticket is still awaiting review. I felt out of place with this one, and still do. I had a lot of fun writing it, and even more fun creating this example, but the fact that my code isn't really going to be added, just, feels weird. What I think would be best, and I'll push for this when the time comes. In the original processing there is a place on their website for hacks, basically, lists features, and shows examples, of things that can be done with processing through the use of java, that was not intended. What could happen in processing.js is sort of the same thing, a place on the website, that documents all the hacks that can be used, through the use of JavaScript inside the processing.js code, and this would be a big job, but something that should probably be done much later, maybe even after 1.0 of processing.js has been released. Until then, I feel like my 230 creation is a lost soul.

My other main ticket, ticket #133 also had issues. In the past I struggled with getting the private keyword to work on member functions, but the way processing.js created member functions, through using an addMember function, caused me issues. I would have to intercept the the addMember function, and create it my way. Although, Dave, was showing a trick in JavaScript, on how to make classes, with members, and it seemed to make a lot of sense. This is the code.

  var counter = (function (){
    var c = arguments[0];
    var i = arguments[1];

    return {
      increase: function(){c+=i;},
      getValue: function(){return c;}
    };
  })(1, 2);

  counter.increase();
  alert(counter.getValue());

  counter.increase();
  alert(counter.getValue());

Also, I have mentioned before, that Corban Brook is working on ticket #237 and talked about restructuring the way classes are parsed. I've been holding off working on ticket #133 prviate keyword because of possible changes.

Specifications

What I did do for 0.2:
The main one, was the example used for 230, and the ticket itself.

I also did three little ones to to supplement this release.
Tickets:

• #382


• #411


• #351

I've done some review of other tickets, and found a ticket that was fixed from my 0.1 that I didn't see. All easy stuff, but it adds up, and still must be done right.

Conclusion

This release has been very different than my last in terms of the work done, and I spent a lot less time trouble shooting, and more time creating tests and examples. I am still finding my groove. Finally, Corban said I could take a stab at ticket #237, I will probably do that and my private keyword at the same time, for my 0.3, and still try to get my regex parser fit in somehow, it shouldn't be a problem as it's really only two tickets, and all related to parsing, stuff I've been doing since the beginning of my stay here :)

Quick little fix

Yesterday, while cruising the processing.js bug tracking website lightouse looking at the open tickets, and seeing what was happening I can across ticket #382.

It was small so I figured I might as well do it. Throw it in with my 0.2.

I've also started thinking about doing what I did here for string parsing to regular expressions. The first thing that comes to mind is the order in which I must do this. I can mask all strings first, then mask all regular expressions, or vice versa. I would have to replace them in the opposite order in which I mask them, that's a given. I also have to now modify my as I now have to check if a string contains OR , as an example. I think it would be easiest to mask regex first, as I already have the code to check that it's not in a string. So, use that code, find all regex's not in a string, mask them, and any string like code inside the regex will already be gone, so I wouldn't have to check for regex when I mask the strings, and replace again, but in reverse.

Tabs break nothing!

I mentioned in my last post that I would be taking something on to add to my 0.2, so I did processing.js ticket #351 and wrapped it up the same day. Not bad, but it was easy.

In my last post I talked about how I was able to reproduce the bug, and the next step was to find, where in the code, variables are changed to var. This is what the code in question looked like before I got to it.

    // float foo = 5;
    aCode = aCode.replace(/(?:static\s+)?(?:final\s+)?(\w+)((?:\[\])+| ) *(\w+)\[?\]?(\s*[=,;])/g, function (all, type, arr, name, sep) {
      if (type === "return") {
        return all;
      } else {
        return "var " + name + sep;
      }
    });

What is happening, is it's matching a regular expression to the code to be parsed, sending the matched groups into a function in the order of (all, type, arr, name, sep) the first parameter is always the whole matching string, and each one that follows is the next match group and so on. The function will do something with the sent values, in this case, swapping the variable type for "var " and removing any array brackets. this new string is then replaced with the original matching string.

The problem was, it was only doing this if there was a space between "int i" this is a closer look at the culprit "(\w+)((?:\[\])+| ) *(\w+)" first it matches a word, something like int, char, anything like that, then it look for any number of [] OR a space, then 0 or more spaces, then another word. I simply changed the spaces to \s, which included all whitespace, including tab, and not just a space, resulting in this.

    // float foo = 5;
    aCode = aCode.replace(/(?:static\s+)?(?:final\s+)?(\w+)((?:\[\])+|\s)\s*(\w+)\[?\]?(\s*[=,;])/g, function (all, type, arr, name, sep) {
      if (type === "return") {
        return all;
      } else {
        return "var " + name + sep;
      }
    });

Now when a tab is found between int i; it's not ignored, the parsing of int i; is not ignored.

Back!

It's been a week since I blogged, but I've been all over the place doing small stuff and getting organized, and there wasn't much to say :P

My 0.2 is due next week and I've got my mouse scroll awaiting review, and here is my post covering that, but I would like to get one more thing pushed out before next week is over.

I have the private keyword that I've been working on in the past, and kinda pushed it to the side in favour of string parsing. I figured I would go back to the private keyword but I noticed Corban Brook was working on this ticket, which may include an overhauling for the way processing.js handles the parsing of classes, which would make the way it handles the private keyword too, hopefully making it easier for me later. This excites me and I'm going to be following it, and pushing the private key word back to 0.3 along with another planned ticket to parse regex content much like I parsed string content.

Anyway, for now, I've decided to take on this one tabs break code. This is a bug that causes the code to crash if a tab is used in a certain place instead of a space. I have reproduced the bug and it seems to only work (the bug works, not the code:P) when there is a tab after a variable type, but before the variable name, like so:

int  anInt = 0;

This does not work, but oddly enough, these example DO work:

 int anInt = 0;
 println  (anInt);

The only place this causes the error (that I have found) is after the variable type and before the variable name. I printed off the translated code, after it's been turned into javascript to see what's going on, and this is the result of the above error:

int  anInt = 0;

and if I take out the tab, I get:

var anInt = 0;

Which works, so obviously, the tab is stopping the conversion of variable names in java like int, to var in javascript. The solution is probably pretty easy, just need to look through the parser, look for the regex that converts variables to vars, and add in a condition for tabs

Study week day 4: something to show

My five day mission is coming to an end, and I have something to show for it.

In order to view this experiment, you must have a capable browser. I use Minefield. Click this link for more information.

Once inside, you can use the arrow keys to rotate the cubes up and down. Not much else to tell, so here are the examples: example 1 and example 2

A screen shot of example 2 for those currently not with a capable browser.


This gives me an idea though. Have a player that can be moved with the arrow keys, and he moves along this giant cube. You can rotate the cube with the mouse, and there is a 3D randomly generated maze on the cube. As the cube moves gravity would change, so the player (and the maze) wrap around the cube. Finally, add multiplayer.

Study week day 3: Vectors Matrices and Vertices

In this post, I blindly set out on a mission, a mission that may or may not change, and has changed.

I was going through these tutorials and as helpful as they are, it's just syntax at this point. I am able to modify, through trial and error, and create and move things, the problem is I don't fully understand what's going down. In these three things: Vectors Matrices and Vertices, are giant question marks.

So I've decided to back it up, and get an understanding of how to represent, modify, and move 3D objects.

What I know and understand.

A vertices is a set of three x, y and z axis that create one point (or corner) of a 3D object. x and y axis is left right, top and down, 2D stuff, the z axis is the third dimension.

These are stored in a matrix, which is just a grid of numbers, rows and columns, that hold these vertices, kinda like an array of vertices. example:

1, 0, 0, 0
0, 1, 0, 0
0, 0, 1, 0
0, 0, 0, 1

This is called the identity matrix (correct me if I'm wrong). It's like a null matrix as anything you try to translate it into would end up being the same thing as it was before the translation. I cannot explain it much more as the technical concepts of translation still escapes me, but I know it's used to move the objects axis in a uniform manner, keeping the integrity of the shape, I get the concepts, I just don't know how it all works (yet).

Not sure what the fourth axis is for; I know it should always be a one, and "is needed to transform points this way" I read that it was also not always needed, but helpful. It's a one, so it's not going to be a problem, as one times anything is always the later.

I'm spending time just doing matrix math, and it's fun, and is giving me a better understanding of what's going on, then, I will go back to the code. Really, this matrix math concept is the only thing that's new in what I'm doing, so I'm pretty confident that I'm on the right track with this.

Study week day 2

After yesterday's post I started on lesson 2. It all made relative sense, and it was pretty small compared to the first one, which is good I think. I have to admit I just flipped through lesson 2, as the colour stuff isn't of huge interest to me yet; I wanted to make it move! Which is where lesson 3 comes in.

Lesson 3 was neat, and repeatedly drawing the scene makes perfect sense to me ;) I've done stuff like that in Java applets, although this is much cleaner implementation of the code. Java has a nasty flicker which you must compensate for. Basically, what happens in java is when you draw the screen, it's drawn as you processing the code, and not all at once. So, say you try and draw six objects on the screen; first clear the screen, then the first object will get drawn, and second, and so on. This causes a flicker for whatever reason. The solution is called a double buffering Basically, you draw each item to an offscreen image, one at a time, then draw the offscreen image to the onscreen image in one shot. With this, I did not have to worry about stuff like that, or I do, and it's been done for me and I will soon find out. Actually, it's probably happening behind the scenes because it's awesome. A quick google out of curiosity came up with this four posts down, someone gives a good simple explanation for how double buffering works in webgl.

really though, the way the lessons have it worked out, it's a lot like drawing with an x, y and z axis; the z axis is the third dimension, and all you have to do is change this axis at set intervals to make something move. Pretty simple!! or this info has been spoon fed to me, either way, I'm liking it!

The basis for what I accomplished today is reading lesson 3, and played with it a bit; changing the axis of the objects to -1, to make it spin the other way, or making it spin on a different axis. All neat stuff but now I think I'm done with lesson 3 and want to get started on lesson 4 where I get to make a true 3D object spin! Like so.

Also, giles, the author of these wonderful tutorials has been on my blog, which kinda proves the usefulness of blogging, for all those naysayers. I must thank him for his service and help in making these tutorials :)

I also feel like I've given myself very little time to do this, 5 days is not enough, so I'll get as much as I can, and pick up the pieces later. Think of it like getting my feet wet, then splashing wildly around in the water, It's chaos! but it's fun.

Thunderbird lab

I have finished the Thunderbird lab. I need to make the patch and push it still, and I will updated this post with that later tonight.

Basically, I was doing the whole processing of fixing a bug, from start to end.

A few hurdles.

I was able to find the file I needed to edit, the location in that file, and a pretty good idea of what needed to be done, quite quickly. The hard part was reproducing the bug, getting a built version that worked, and getting a result from editing the file.

The first thing was, when I tried to run my built Thunderbird, I would get this:

Two other students: Jianming and Crystal also received this. I think this was simply an error in the branch that was now fixed, as I don't *think* I did anything to fix it, but I tried. I tried using the comm-1.9.1 repo, which allowed me to build and run the program, but was ridden with error pop ups. I tried for awhile to use comm-1.9.1, but I could not seem to reproduce the bug; I thought it could be because of the version I was using. When it comes to experimenting, you need a completely perfect simulation to be sure something is not the problem, and in this case, I could not be sure until I had the same errors in the comm-central build; which wasn't running. So I continued.

I was having problems reproducing the bug. I was just trying to send myself an email, containing an email in the text, and receive it and expect the mail address to be linked, which it was not. I came across something helpful while re reading the instructions about reproducing the bug. It said "try creating a message with the text above, saving it to Drafts, then open in Drafts to see how it gets rendered." Ah, something I did not try. I did this, and I got the links I wanted.

So the bug is now reproduced, now I need to break this area of the code. I already know where and what I have to do, but I'm just going to make sure I'm in the right spot and it's working before I start coding.

I tried simply adding some letters "HAHA" to the end of the "mailto:" string, to see if I'm in the right spot. and it didn't seem to accept the change. I would reload my draft, and it would just be a boring old "mailto:". I was stumped, and was looking wondering why the code I was changing, did not change the program. Usually these simple, but seemingly impossible problems are the silly ones. I was thinking maybe I had two separate directories I was working in, one I was editing, and the other I was building, or something along those lines. I figured it out when I tried to copy and paste a previous draft into a new email, which shouldn't link the mail address, but all of a sudden it was. It hit me, if I change the code, and wanted to see the results, I would have to make a NEW draft, each time, as the draft only uses the code at the time you create it, and not when you view it. I created a new draft, and voila.

I'm in HAHA.
the next step is to code. I had to find a way to check if there were any "." after the @ but not "..". It was already checking for "." inside an if, so I just needed to add an && !string.contains(".."), or something along those lines. It's already using FincChar to find the "." which won't work for me as I need a character string, and not just a character. My answer was google. I googled "nsDependentString" and came up with Find(). Seems logical "FindChar()" for chars, and "Find()" for strings. Anyway, I implemented it, and ran it.

Looks good to me. I'm leaving out the actual code in case another student wants to read this for hints, but if you want help please ask.

Update: The bug and patch is awaiting review, and located here.

Study week day 1

What's a vertices?

Today I am starting with this tutorial.

First thing, get a browser that can support webGL. I already have one, but if you don't I recommend Minefield. I used it mostly because I had it installed anyway, and it sounds cool. If you don't know what I'm talking about, you should start at tutorial 0.

Anyway, I was going through the code example, and figuring things out along the way. It did some basic stuff like:

<body onload="webGLStart();">

which just loaded the code when it "hit" the body tag.
Inside the body it setup a canvas:

<canvas id="lesson01-canvas" style="border: none;" width="500" height="500">

Then inside the webGLStart(), which was called in the body onload, it got our canvas element:

var canvas = document.getElementById("lesson01-canvas");

I kept on cruising through the code, and got to something I could edit, and see the result!

    var vertices = [
         0.0,  1.0,  0.0,
        -1.0, -1.0,  0.0,
         1.0, -1.0,  0.0
    ];

A vertices is the plural of vertex. Basically the dots that connect the shape, or corners.

By looking at this, I figured out the triangle, and made the top point larger. I was actually looking at it upside down, and still not sure why. Either -1 means down or to the right, and 1 mean up or to the left, or it's flipped later in the code *shrugs* time will tell. See if you can spot the top most point of the triangle, and make it bigger or smaller. Hint: 0, 0, 0 is the center of the triangle.

There was more stuff to setup and a second shape, a square which is the same as the triangle cept it has an extra vertex.

First moment of weakness

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

When I first hit this, and at the time of writing this, sentence, I am lost on this one. This | operator, what's it doing. I've never seen this other than c++ bitwise operator, either that, or I'm forgetting something long buried in my head. But as with most thing in javascript, I must trust that they know what they are doing, move along, and the pieces will fall into place when they are ready to. Also, it doesn't seem like a line that I really have to worry about; I just use it, and it does it's thing, for now. This is what the tutorial said about this line "A simple first step: we clear the canvas in preparation for drawing on it." Um, ok, I know what it does, and it sounds pretty simple. It clears the canvas. This must be done once everytime the screen is to be drawn, inside the:

function drawScene() {

This was setup earlier as:

setInterval(drawScene, 15);

These setup a function to be called every 15 intervals, in this case, the function drawScene(), not sure, probably in milliseconds, but as I'm displaying a static none moving image, it could be 15 seconds, but not likely.

Next line... lost again.

perspective(45, 1.0, 0.1, 100.0);

Nvm, it's not as bad as I though. I changed the 45 to 100, and reloaded, and the shapes zoomed out. I'm sure the other three numbers do something just as cool. Weird, I changed the first parameter to 1000 and it flipped the shapes. Something it not what I thought it was. The first parameter is called the field of view. Starting to make sense of it with this "This perspective function is very useful, but is not built into WebGL, so it’s defined as a utility function further up in the code." So, I can see the inner workings of this function and why it's doing things I did not expect. Excellent.

What's a matrices?

Like vertices, matrices is the plural for matrix. It's beyond me right now, but I think it's how you track the movement of a 3D object. Actually, I think it tracks the movements, or path, of an object as it moves, maybe. Anyway, it looks like a grid of numbers, rows and columns. I think that's all I can handle on matrices at this moment, but I'll come back to them as other pieces fall into place.

Making another side of a cube

I decided, with what I've learned, to try and copy and paste bits of the square to make another side of the square. I was able to tilt the one square I had, SO i figured if I drew another square under it, and lined them up, it would look like another side of the square.

Anyway, I played around with the numbers, and settled on this.

I could of probably of documented more, but I went through a lot of iterations while playing, and noticed a lot of what I was doing is still limited because I'm not using shaders, colour, and doing it in a pretty manual way. I am sure there are better ways so I don't want to spend too much time on it. I want to get to the good stuff!

Pay no attention to that man behind the curtain

The rest of what is covered in this tutorial is the use of a few functions used to make everything work. Stuff that can be copied and pasted and used without understanding; I of course must understand it.

Conclusion

This is all the blogging I can handle. I will keep playing with this and get a better understanding of the matrix in general.