JavaScript Day 2

First a quick note. My intention on this series was to investigate something new, learn some new technology, and share it with others. I assumed that others might also be interested as well. I was really surprised to see comments attacking JavaScript and defending Flash. I may have responded too strongly, but whatever. I still can’t understand how people can decide that any one technology is “good” and label all others “bad” and expect to survive long term in the technology world. But I’m not going to argue with you. It’s your career.

OK, if you’re still interested, let’s look at the code in yesterday’s example. Here’s the HTML:

[php lang=”html”]

[/php]

All this really does is link to a few scripts and create a canvas element. The canvas has an id of “canvas” and is 500×500. This is our graphic element that we’ll be drawing on. Simple enough.

As for the scripts, I’m using jQuery, but only in a very minor way, to grab the canvas element. There is NO dependency on jQuery in the WireLibJS library itself. There are ways to do the same stuff I’m doing without using jQuery, but it just makes it a bit easier. I’ll point out all the places where it’s being used in case you want to do it another way.

Of course, I’m using the wirelib.js library, and another script, in this case called mar01.js, which is where the particular experiment will be created. For most of the demos I’ll do in this series, I imagine this will be the same basic setup. The main thing that will change will be that final js file. So let’s look at mar01.js:

[php lang=”javascript”]$(function() {
var i, points = [];

wirelib.initWithCanvas($(“#canvas”)[0]);

for(i = 0; i < 20; i += 1) { points.push(Math.random() * 500 - 250, -400 + Math.random() * 500 - 250, Math.random() * 500 - 250); } wirelib.addLine(points); wirelib.addBox(0, 0, 0, 300, 300, 300); wirelib.addCircle(-200, 400, 0, 200, 32); wirelib.addRect(200, 400, 0, 400, 250); wirelib.loop(24, function() { wirelib.rotateY(0.01); wirelib.draw(); }); });[/php] Surrounding everything is an odd looking structure, if you've not seen it before: [php lang="javascript"]$(function() { ... });[/php] This is part of jQuery. Without going into a tutorial about jQuery, if you define a function inside $( ) , that function will be executed as soon as the document is loaded. You could do something similar by listening for the window's onload handler, or a few other ways. The important thing is that we need the document to be loaded so that the canvas exists. The above code looks ugly to the uninitiated, but once you see it a few times, it's very natural. First we create a variable i for the loop counter and a points array. In JavaScript, the convention is to declare all local variables up front, in one line. This totally rubbed me the wrong way at first, but when in Rome... Next, we initialize the WireLibJS library with a canvas. Simply including the wirelib.js file in the html page will create the wirelib variable in the global scope. This should be the only variable it creates. You must call initWithCanvas on it, passing in a reference to a canvas element, before doing anything with the library. Here again, we are using jQuery to get a reference to the canvas element. The line: $("#canvas") will return a list of all elements on the page with an id of "canvas". We only want the first one, so we say: wirelib.initWithCanvas($("#canvas")[0]); You could do the same thing with document.getElementById("canvas"). But using jQuery will also make things easier when we start using mouse events later. There are a few ways to add lines, shapes, and forms to the canvas. Here we see addLine, addBox, addRect, and addCircle. The addLine function takes either an array of numbers as a single argument, or an arbitrary number of arguments each of which is a number (minimum of 6). In other words, you can say: wirelib.addLine(0, 0, 0, 100, 100, 100, 200, 300, 400); or wirelib.addLine( [0, 0, 0, 100, 100, 100, 200, 300, 400] ); If you're manually coding them, the first method is easier, but if you are creating them in a loop like we are in the first example, it's easier to create an array, add the numbers to the array and pass that in. The numbers are triplets of x, y, z values, which is why there must be at least 6 - three numbers for the first point, three for the second. Next, we create a 3D box, with addBox. This takes the x, y, z position of the center of the box, and a width, height, depth to create the box with. The addCircle method takes an x, y, z position, followed by the radius of the circle and the number of segments to use in drawing the circle. Finally, addRect takes x, y, z plus width and height. At this point, we've drawn a random 3D squiggly line, a box, a circle and a rectangle. Now we can move them. The wirelib.loop method starts an animation timer. You pass it the frame rate you want the animation to run at, and a callback function to run. Here I've used an anonymous function. These are generally considered BAD in ActionScript, yet rejoiced in JavaScript. I firmly believe that beng a good programmer means not coming to a new language with preconceived notions of good and bad. So I now embrace anonymous functions with my JavaScript brethren, but will still take your head off if you try that in ActionScript. The callback calls rotateY, passing in an angle in radians. This will rotate all the points in the system around the y axis by that many radians. Then it calls draw, which... redraws the canvas. Naturally, there are rotateX and rotateZ functions as well, and a translate function that takes x, y, and z values. And there you have it, the bare bones basics of WireLibJS. You can grab the file itself here, and peruse it, play with it, offer suggestions on how to make it suck less, etc. Tomorrow we’ll do some new demos and show some other methods.