JavaScript Day 9: Wrapping up WireLibJS internals

Send to Kindle

We’ll just run through the rest of the functions.

function rotateX(radians) {
    var i, j, p, y1, z1, line, cos = Math.cos(radians), sin = Math.sin(radians);
    for(i = 0; i < lines.length; i += 1) {
        line = lines[i];
        for(j = 0; j < line.points.length; j += 1) {
            p = line.points[j];
            y1 = p.y * cos - p.z * sin;
            z1 = p.z * cos + p.y * sin;
            p.y = y1;
            p.z = z1;
        }
    }
}

function rotateY(radians) {
    var i, j, p, x1, z1, line, cos = Math.cos(radians), sin = Math.sin(radians);
    for(i = 0; i < lines.length; i += 1) {
        line = lines[i];
        for(j = 0; j < line.points.length; j += 1) {
            p = line.points[j];
            z1 = p.z * cos - p.x * sin;
            x1 = p.x * cos + p.z * sin;
            p.x = x1;
            p.z = z1;
        }
    }
}

function rotateZ(radians) {
    var i, j, p, x1, y1, line, cos = Math.cos(radians), sin = Math.sin(radians);
    for(i = 0; i < lines.length; i += 1) {
        line = lines[i];
        for(j = 0; j < line.points.length; j += 1) {
            p = line.points[j];
            y1 = p.y * cos - p.x * sin;
            x1 = p.x * cos + p.y * sin;
            p.x = x1;
            p.y = y1;
        }
    }
}

All of these function the same way, just on different axes. For each, we loop through the lines array, getting a reference to each line object. Then we loop through each point of that line's points array, getting a ref to each of those. Now we have an x, y, z point and use a bit of trig to rotate it the required number of radians. This is covered in some book on AS3 Animation that's supposed to be really good or something.

function translate(x, y, z) {
    var i, j, p, line;
    for(i = 0; i < lines.length; i += 1) {
        line = lines[i];
        for(j = 0; j < line.points.length; j += 1) {
            p = line.points[j];
            p.x += x;
            p.y += y;
            p.z += z;
        }
    }
}

Translating does pretty much the same thing, looping through each and every point and moving the specified amount on the x, y, and/or z axis.

function jitter(amount) {
    var i, j, line;
    for(i = 0; i < lines.length; i += 1) {
        line = lines[i];
        for(j = 0; j < line.points.length; j += 1) {
            p = line.points[j];
            p.x += Math.random() * amount * 2 - amount;
            p.y += Math.random() * amount * 2 - amount;
            p.z += Math.random() * amount * 2 - amount;
        }
    }
}

Jitter is just a fun function I added. It loops through all the points like the rotate and translate functions, but just randomly moves each one on each axis. Note that it will only move existing points, and will not affect any points drawn in the future. So you can do something like this:

$(function() {
    var i;
    
    wirelib.initWithCanvas($("#canvas")[0]);
    
    for(i = -200; i <= 200; i += 20) {
        wirelib.addCircle(-200, 0, i, 100, 32);
    }
    wirelib.jitter(5);
    for(i = -200; i <= 200; i += 20) {
        wirelib.addCircle(200, 0, i, 100, 32);
    }
    
    
    wirelib.loop(24, function() {
        wirelib.rotateX(0.015);
        wirelib.rotateY(0.01);
        wirelib.draw();
    });

});

Which will give you something like this:

Click to see in action.

And last but not least...

function setCenter(x, y, z) {
    cx = x === null ? cx : x;
    cy = y === null ? cy : y;
    cz = z === null ? cz : z;
}

return {initWithCanvas:initWithCanvas,
        addLine:addLine,
        addBox:addBox,
        addRect:addRect,
        addCircle:addCircle,
        draw:draw,
        rotateX:rotateX,
        rotateY:rotateY,
        rotateZ:rotateZ,
        translate:translate,
        jitter:jitter,
        clearCanvas:true,
        strokeStyle:"#000000",
        lineWidth:1,
        loop:loop,
        stop:stop,
        showCenter:false,
        setCenter:setCenter
        };

setCenter just sets those cx, cy, cz properties that become the origin of the 3D world. And We covered the final return statement in the original post about the architecture of the library.

So that pretty much wraps up what's going on here. It's not rocket science, but hopefully a pretty decent example of one way to set up such a library.

Send to Kindle