Posts
-
JavaScript Day 11: Tools Part 2: Minification!
I just like the word “minification”.
Anyway, here’s the deal. in ActionScript, and most other languages that go through some sort of compilation process, you write your code in source files and that human readable text gets distilled down into something else. In AS3, it’s byte code that runs in the Flash Player. In Java, it’s byte code that runs in the Java Virtual Machine. In .net languages it’s also similar, as things run on the CLR. Other forms of C or C++ will compile down into something closer to what the computer itself can understand.
Read more... -
JavaScript Day 10: Tools, Part 1
I wanted to cover a few tools for JavaScript coding as we go through this series. Today’s is JSLint.
JSLint takes its name from an early program used by C programmers called “lint”. This tool searched through C source code, looking for suspicious code, stuff that might not wind up in a compiler error, but would probably cause some kind of problem somewhere down the line. These days, compilers pretty much take care of that themselves, with a rich set of configurable warnings. But JavaScript isn’t compiled. You can write it and put it up on the web as-is. It works or it doesn’t. It’d good code or its not. Thus, it’s a great idea to run it through something that will catch some stuff you might not.
Read more... -
JavaScript Day 9: Wrapping up WireLibJS internals
We’ll just run through the rest of the functions.
[php lang=“JavaScript”]function rotateX(radians) {
Read more...
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; } } }[/php] 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. 😉 [php lang=“JavaScript”]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; } } }[/php] 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. [php lang=“JavaScript”]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; } } }[/php] 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: [php lang=“JavaScript”]$(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(); }); });[/php] Which will give you something like this:
Click to see in action. -
JavaScript Day 8: More WireLibJS Internals
Just going to wrap up more of what’s in the WireLibJS library today.
We’ve covered the basic architecture, but let’s look what it all does. First, the vars:
[php lang=“JavaScript”]var canvas, context, width, height, lines = [], cx, cy, cz, fl = 250, interval, running;[/php]
A few are obvious: canvas, context, width, height. lines is initialized to an empty array. In WirelibJS, a line is an object with stroke attributes and an array of 3D points. So lines will be an array of these objects. cx, cy, and cz are the center points of the 3D world – its 0, 0, 0 origin point. By default, this is at the center of the 2D canvas, and “into” the 3D space somewhat. fl is focal length, probably not an accurate term optically speaking, but a convention I’ve grown used to. This controls the sense of perspective. Higher values will give less perceived perspective; lower values will really distort things as they move in and out of the space. interval is what we described yesterday for stopping the animation if needed. Finally, running is just a boolean value that indicates whether or not the animation is running.
Read more... -
JavaScript Day 7: Animation
Today, let’s talk about animating in JavaScript. Making things move!
In Flash, there is the eternal battle of which is better, enterFrame or timer? In JavaScript, you have a timer. You don’t actually have a Timer class like you do in ActionScript, but you do have a setInterval function that is, from what I can tell, exactly what it has always been in ActionScript.
Here’s a quick example. This assumes you have a canvas in your html, named canvas, and this script is included in the same page, yadda yadda.
Read more... -
JavaScript Day 6: WireLibJS internals
Today I thought it would be interesting to take a look into the architecture of how WireLibJS is built. It may look a bit odd at first, so it’s worth going through it to understand a bit more of the JavaScript way of doing things. Again, I’m no expert in this field, just trying to put into practice the stuff that I’ve learned recently.
Here’s a direct link to the file so you can follow along: https://www.bit-101.com/jscanvas/wirelib.js
Read more... -
JavaScript Day 5: Writing Code
There’s a quote that I can’t quite remember, and that I attribute to one of the Gang of Four, but that may just be in my mind. Anyway, it goes along the lines of “buy cheap desks and expensive chairs.” The idea being that while you may have to look in the general direction of your desk much of the day, you’re in intimate contact with your chair almost every minute of your workday. Thus, it’s important that you have one you are very comfortable with.
Read more... -
JavaScript Day 4 : Canvas Basics
I really only wanted to use my wirelib library as an example of JavaScript. It’s not my intention two write all month about that alone. So today I figured I’d cover the basics of how to get set up using canvas. You’ve probably already taken a peek into wirelib.js and seen what’s going on, but let’s cover it anyway.
First of all you need a canvas to draw on. This can generally be created right in your html markup, as we have been doing.
Read more... -
JavaScript Day 3
Today I just want to cover how to change the stroke of lines, both in WireLibJS and in Canvas itself. Really the same thing, since I just pass the values on from the lib to the canvas.
The two properties you use are strokeStyle and lineWidth, where strokeStyle is a string and lineWidth is a number.
There several ways to define the strokeStyle string. The most basic is run of the mill hexadecimal:
Read more... -
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.
Read more...