notebook

Doodle.js — A Sprite Library for Canvas

billy — Wed, 08 Apr 2009 18:51:36 +0000

I’ve been having a lot of fun with the HTML Canvas element and really look forward to utilizing the next-gen Javascript engines the browsers are starting to roll out.
However the drawing commands for it are a bit… basic. It can be difficult to work creatively when you have to constantly handle the “low level” details — that’s why I wanted to create a library that did it for me.

Doodle.js attempts to create a fun and easy way to interact with the Canvas that is lightweight, flexible, and functional. While it contains a few shape primitives it is not meant to be a full-fledged drawing api, rather a framework that allows you to build sprites and interact with them in an expressive way.

This is a 0.1 development release so please treat it accordingly. Bugs are sure to crop up so it’s best to test things out with your browser’s debug console open. I’ve been trying it on Chrome, Firefox 3.0.8, and IE 8 (using excanvas). Doodle.js is open source software and has been released under the MIT license, please feel free to poke around and submit code fixes :)

Here are a few demos I put together that you might want to take a look at before reading on.

Spiral Pattern (drawing multiple times to canvas)
Some Bouncy Balls (a little physics)
Girl Comin’ to Get Ya (using images — no IE, sorry)
Hearts a Flutter (custom shapes)
Marbles in Space (simulating 3D)

This is the setup for a basic HTML file that we’ll use for the rest of the examples. You’ll see that it includes a link to excanvas.js (for IE) and the Doodle library. In the body of the document we have a canvas element with an id of “my_canvas”. If your browser doesn’t support canvas then some fall back content will appear instead.

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    function init() {
      //we'll be putting the rest of our javascript here!
 
    };
  </script>
  </head>
  
  <body onload="javascript:init();">
    ="my_canvas" width="600" height="400">
      <p>Fallback: Canvas element is not supported in this browser!</p>
    </canvas>
  </body>
</html>

With the basics in place we can add some Javascript to draw a square.

(function(oo) {
  oo.canvas('#my_canvas');
  oo.rect({x:25, y:25, width:50, height:50}).draw();
 
})($doodle);

To avoid cluttering up the namespace, when you import the Doodle library it will create a single global object named $doodle . Everything in the library can be accessed through this variable, but to save some keystrokes we’re going wrap it up in anonymous function call using a popular Javascript idiom.. The “oo” variable was picked because it’s easy to type, easy to remember (d-oo-dle), and easy for our eyes to parse when we look over the code (it only takes a very cursory knowledge of male psychology to understand that).
Now that we can access the library, we’ll first feed it the id of our html canvas. We then create a rectangle with oo.rect() by passing it a Javascript object that contains our named parameters. We want a square 50 pixels wide that is situated at the coordinates (25, 25), which starts from the top-left point of our canvas element. Finally we render the rectangle to the canvas element by making a call to .draw().
Pretty easy eh? Well let’s say we want to draw our little box again, this time starting exactly in the middle of our first box. Let’s take a look:

(function(oo) {
  oo.canvas('#my_canvas');
  oo.rect({x:25, y:25, width:50, height:50}).draw()
      .modify({x:'+= 25',
               y:function(o,p){ return p*2; },
               fill:"blue"}).draw();
 
})($doodle);

So what did we do here? You’ll notice that we made a call to .draw() twice, but unlike our first example where .draw() ends with a semicolon; we omit that and instead make a call to the objects .modify() method. We can do this because the methods of a doodle object return the same object that called it. This allows us to chain functions together creating complex behavior in relatively few lines of code.
Now how do you reference a value from an object that hasn’t been created yet? (Well the object has been created, it just hasn’t been assigned to a variable yet.) Once inside the .modify() method we demonstrated two ways of referencing our previously declared values. With the x property we pass it a string (surrounded by quotes) and start it with the relative assignment operator “+=”. This adds 25 to what was previously stored in x (25), so now x holds the value of 50. It’s important to know that Doodle knows quite a few of these relative assignment operators, but you can’t simply pass any code here. This code is not being evaluated in a Javascript sense (that’d be dangerous), instead it’s just looking for the operator. Also note that it does not support passing variables here.
When we modify the y property we are passing it an anonymous function that is called with itself as the arguments and the return value is assigned back to y. This is a very flexible and powerful way to in-line functions and return the results of any equation. The function is called from within the object, passing itself as the first argument, in this case assigned to “o”. The second argument is the property you are modifying, in this example “p”. You don’t have to use these but they are there for convenience.
Finally we change the fill color to blue and then make a call to .draw() a second time. So we’ve created a box, drawn it, moved it, then drawn it again. Keep in mind that this is the same box, not a separate object, so we can’t change the order they appear on screen after they have been drawn. For that you’d need to create 2 separate objects and assign them to a new group: oo.group().add(box1, box2).draw(). The order they are drawn depends on the value of each object’s “z” property.

Transforms

All transformations to an object are represented as a 2d matrix and stored in it’s obj.matrix property. If your interested about how they work I will point you to a nice tutorial on the subject. Doodle objects support a number of methods for transforming it’s matrix: translate, rotate, scale, transform — or you may operate on the matrix itself.

(function(oo) {
 oo.canvas('#my_canvas');
 var box = oo.rect({x:25, y:25,
                    width:50, height:50, fill:"#ff0000"});
 box.draw(); //draw a red box with initial parameters
 
 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
 box.modify({fill:'purple'}).rotate(-45).draw();
 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
 
})($doodle);

In this example we have created a box and drawn it 5 times, changing it’s color each time to better illustrate the effects of the applied transforms. Our box is first drawn at an initial position of (25, 25) and given the color red (in hexadecimal notation).
We then change it’s color to green (this time in rgb notation), move it right 50 pixels on the x axis and draw it again. Next, we change to purple and rotate 45 degrees before drawing again. Notice it rotates around the default axis point which is it’s top-left point, or in local space at (0,0). [This would correspond to it’s position in global space on the canvas which is now (75, 25).]
Next we perform 2 transformations by chaining them together. First we move the box 50 pixels along it’s now rotated x axis. We then multiply it’s scale by 1.5 along it’s x and y (the single parameter we passed here is short for .scale(1.5, 1.5) ) and draw the now yellow box.
Finally, we change it’s color to blue, and do the same thing as we did in the previous line — translating 50 pixels on x and increasing it’s scale by 1.5, the difference being that we are now applying the transform at the same time by using matrix notation.

Loops

To loop over an object you must give it some parameters to change — otherwise it will continue to write the same thing over and over again, looking like a static image. In this example we will draw a circle at the center of our canvas, then draw it 24 more times rotating around this point — each time adjusting it’s position and assigning it a random color. We’ll do this with a traditional “for-loop” to start and then look at some built-in methods for accomplishing the same task.

(function(oo) {
 oo.canvas('#my_canvas');
 var cx = oo.canvas().width/2;  //horizontal center of canvas
 var cy = oo.canvas().height/2; //vertical center of canvas
 
 var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});
 dot.draw(); //initial red circle in the center
 
 var r = 100; //radius of our outside circle
 var a = 0;   //angle of rotation in degrees
 
 //function to convert degrees to radians
 var radians = function (deg) { return deg * Math.PI/180; };
 
 //function to generate a random color
 var random_color = function () {
    var color = (0xffffff * Math.random()).toString(16);
    return color.replace(/\./i,"").slice(0,6);
 };
 
 //a traditional for-loop, called 24 times
 for(var i=0; i < 24; i++) {
   //give dot some new coordinates and a random color
   dot.modify({x: cx + Math.cos(radians(a)) * r,
               y: cy + Math.sin(radians(a)) * r,
               fill: random_color() });
   dot.draw(); //draw to canvas
   a += 15; //increment angle by 15 degrees
 }
 
})($doodle);

Now we’re going to draw the exact same thing except we’ll utilize the object’s built-in .loop() method. It’s up to you which way you feel comfortable with, but this is a more functional way of doing things if you’re into that sort of thing. It also demonstrates some of the flexibility you have when assigning values to object properties in Doodle. You’ll notice that the first dot.draw() call has been omitted in this example. The reason is a .loop() takes a modification parameter that will be assigned on subsequent iterations. Meaning the first call to loop will always draw the object in it’s current state, additional loops will apply the modifications. There is also a special property in the loop parameter object, .on_update. This is a function that will be run after each iteration of the loop allowing you to increment variables or alter properties. You could modify everything from within this function if you really wanted to, but that might be a bit confusing.

(function(oo) {
 //change background color
 oo.canvas('#my_canvas').bgcolor('#FFCC33');
 
 var cx = oo.canvas().width/2;  //horizontal center of canvas
 var cy = oo.canvas().height/2; //vertical center of canvas
 
 var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});
 
 var r = 100; //radius of our outside circle
 var a = 0;   //angle of rotation in degrees
 
 //for converting degrees to radians
 var radians = function (deg) { return deg * Math.PI / 180; };
 
 //our equations for circle positions
 var circle_x = function(a){return cx+Math.cos(radians(a))*r;};
 var circle_y = function(a){return cy+Math.sin(radians(a))*r;};
 
 //generate a random color
 var random_color = function () {
    var color = (0xffffff * Math.random()).toString(16);
    return color.replace(/\./i,"").slice(0,6);
 };
 
 //these are evaluated on updates
 dot.loop({x: function(){ return circle_x(a); },
           y: function(){ return circle_y(a); },
           fill: function(){ return random_color(); },
           on_update: function(){ a += 15 }
          }, 25); //initial center draw + 24 increments around
 
})($doodle);

Another option for the .loop() method is to pass it a function instead of an object and to use .modify() within it.

 dot.loop(function(obj){
              obj.modify({x:circle_x(a),
                          y:circle_y(a),
                          fill:random_color() });
              a += 15;
          }, 25);

Now let’s take a look at this loop:

 var r = 5;
 var a = 0;
 var frame = 0;
 
 dot.loop(function(obj) {
              obj.modify({x:circle_x(a),
                          y:circle_y(a),
                          fill:random_color() });
 
              frame += 1; //update frame count
              a += 10; //update angle rotation
              r += 0.3; //update radius
 
              if(a % 15 == 0){ dot.fill = '#000000'; }
              else{ dot.fill = random_color(); }
 
              //clear canvas every 800th frame, reset radius
              if(frame % 800==0){oo.canvas().clear(); r = 5;}
 
          }, 0, '48fps'); //loop indefinitely at 48 frames/sec

This loop runs indefinitely and will completely clear the canvas every 800th frame. We’ve added a framerate parameter to the loop which dictates how fast it’s run; this can take a numeric value in the measure of milliseconds or as we can see here as a string with “fps” appended.

 var frame = 0;
 dot.loop(function(obj) {
              obj.modify({x:circle_x(a),
                          y:circle_y(a) });
              a += 15;
              frame += 1;
          //run indefinitely, clearing after every frame
          }, 0, '24fps', true);

In this loop we are starting to get an idea of the animation capabilities inherent. By changing the count to zero and setting the clear every frame parameter to true we can put our little circle in motion.
In fact all sprites have an .animate(params, framerate) method that is just a .loop() that runs forever and clears every frame.
Animation is very experimental at this point, especially when working with multiple objects since clearing the canvas will have conflicts. A safer way is to use the global animate function in Doodle:

 oo.animate(function() {
     //check wall collision
     for(var i = 0; i < numballs; i++) {
         var ball = balls[i];
         ball.modify({x:ball.x + ball.vx,
                      y:ball.y + ball.vy});
         Bouncy.check_walls(ball);
     }
     //check other ball collision
     for(i = 0; i < numballs - 1; i++) {
         var ball_a = balls[i];
         for(var j = i + 1; j < numballs; j++) {
             var ball_b = balls[j];
             Bouncy.check_collision(ball_a, ball_b);
         }
         balls[i].draw(); //and render
     }
 
 }, '24fps', true/*optional*/); //clears every frame by default

Images

You can import images and draw them as normal shapes. Though since they take time to load it can be a little tricky sometimes having them interact with the rest of your program. You can pass a function to it’s on_load parameter that will be called when it’s ready to use. The below example worked fine for me in Chrome and Firefox, but unfortunately I’ve had difficulties in IE applying matrix transforms to images.

 var cx = oo.canvas().width/2;
 var cy = oo.canvas().height/2;
 var img_w = 271;
 var img_h = 365;
 var img = oo.image({src:'./img/face_271x365.png',
                     x:cx - img_w/2,
                     y:cy - img_h/2,
                     axis:{x:img_w/2,
                           y:img_h/2,
                           coord:'local',
                           visible:true }
 
                     }).loop({rotate:2}, 0, '24fps');

This example also illustrates a problematic bug I haven’t figured out yet — after extended animation the matrix will inexplicably scale. I’m still hunting around for that one, probably due to rounding errors.

Custom Shapes

Doodle is not meant to be a full-fledged drawing library, rather a way to better group and organize your own shapes. To that end it’s easy to create custom objects and assign them shapes using the canvas drawing api. We’ll use the $doodle.gfx object to access these commands and assign them to the shape function of an extended sprite object.

 //shape is a function called at draw time
 var heart_shape = function() {
     oo.gfx.fillStyle = random_color();
     oo.gfx.beginPath();
     oo.gfx.moveTo(75,40);
     oo.gfx.bezierCurveTo(75,37,70,25,50,25);
     oo.gfx.bezierCurveTo(20,25,20,62.5,20,62.5);
     oo.gfx.bezierCurveTo(20,80,40,102,75,120);
     oo.gfx.bezierCurveTo(110,102,130,80,130,62.5);
     oo.gfx.bezierCurveTo(130,62.5,130,25,100,25);
     oo.gfx.bezierCurveTo(85,25,75,37,75,40);
     oo.gfx.fill();
 };
 var heart = oo.sprite({x:i*75,
                        y:j*65,
                        shape:heart_shape,
                        scale:0.5});

Groups

Objects can be grouped together and transformed around a common axis. The order an object is drawn in a group is determined by it’s z property. A higher number means it will appear “on top” of another object. You can change the way a group composes it’s objects by assigning a composite operation to the group.composite property. A list of these can be found here. Groups haven’t been fully implemented yet, so your mileage will vary.

Interaction

To get the mouse coordinates I find it easiest to use jQuery, but you could use any of the great Javascript libraries out there.

var mouse_x, mouse_y;
 
 $('#my_canvas').mousemove(function(e) {
     //store mouse positions from jquery event
     mouse_x = e.pageX - this.offsetLeft;
     mouse_y = e.pageY - this.offsetTop;
 });
 
oo.animate(function() {
     //and use
     angle_x = (mouse_y - vp_y) * .001;
     angle_y = (mouse_x - vp_x) * .001;
     //...
     for(i = 0; i < length; ++i){ balls[i].draw(); }
 
 }, '24fps');

Conclusion

Like I said before, this is the first development release so I’m still hunting bugs. If you find something and can help out, please shoot me a message. I’ll get some more extensive docs once the API settles down, until then just punch around the source code.

Emacs todo-list-mode

billy — Sat, 17 Jan 2009 07:40:59 +0000

Although it wasn’t on my todo-list, I really had a hankering to add some auto-color highlighting to mine. So I created a pretty basic major-mode for Emacs which I call todo-list-mode. My list is just a plain text file that I can sort the lines based on the assigned number in the first column. I created a few regexp’s to pick out these and change the formatting based on priority. It’s pretty simple and easy to extend, so if you want to add more numbers or change the colors — go nuts. It also supports hash style comments to tack on the end of a line.

Grab it: todo-list-mode.el

To include this mode automatically, add to your .emacs :

(add-to-list 'load-path "~/emacs/lisp/") ;my lisp dir
(autoload 'todo-list-mode "todo-list-mode") ;load when needed
 
;a simple function that opens the file,
;and switches to todo-list-mode.
(defun open-todo-list ()
  (interactive)
  (find-file "~/notes/TODO")
  (todo-list-mode))
 
;then bind to control-f12 so i can call it with one keystroke
;this works well for me because i also bind calendar to f12
(global-set-key [C-f12] 'open-todo-list)

The format for a given line is:
number (0-4), [optional lower case letter], [TAB], task text.

If you want to add more numbers, change the colors, or change the delimiter, it’s fairly easy to open up the elisp file and do a little copying and pasting.

To sort I just use some standard Emacs commands;
Select a region (C-x h for entire buffer), then M-x sort-lines .
To note, the regular expression that does the coloring looks for a tab delineator between the priority number and the task text. If you’d rather not use tabs you’ll have to change it to a couple of spaces or something.

This style works for me because I really need something minimal and easy to access if I’m going to use it. Sure there’s org-mode and other more complicated variants but I need simplicity. There’s too many other things to worry about that I can’t justify spending extra brain activity trying to operate a todo list. This ordering system is something I got from Randy Pausch, which is based on Stephen Covey’s quadrant system.

It’s a little weird to post my current todo-list (well maybe guide is more accurate), but I haven’t posted in a while and maybe some of you are wondering where the heck I’ve been. Busy, busy, but it’s winter so I’m spending the time in the lab and concocting all sorts of new experiments. Hopefully by spring I’ll be ready to start putting some of this stuff together.

Joy is an Insufferable Strain of Control

billy — Wed, 22 Oct 2008 00:47:09 +0000

Typographic demo combining physics and 3D. A creative variation on the Papervision3D/Box2D method I demonstrated here.

Papervision3D + Box2D

billy — Wed, 22 Oct 2008 00:24:52 +0000

In a recent project I wanted to incorporate some physics with a 3D environment. I decided on Box2DFlash (a port of Box2D), which is a great engine even if the syntax is a little awkward for an Actionscript 3 library.

See the PaperBox2D demo, and the source is available (or right-click on the demo). Hit the ‘d’ button during the simulation to toggle the debug regions for the 2d calculations and see how they are mapped to the objects in 3d space.

Updated 11.20.08, recent api changes in Box2DFlash.

Larry Lague has done a port of this demo using Away3D. Very nice!

Type Around the Neighborhood

admin — Wed, 24 Sep 2008 00:47:13 +0000

I brought my camera along for my daily constitutional and decided to take in some of the local signage. Gill Sans (aka “England’s Helvetica”) seems to be a popular typeface around Buffalo, which is fine but can be a bit tiresome. Kinda like a girl you had a fling with once and for some reason keeps popping up — you don’t really regret anything, but you’d rather try something else.

Better Bend Than Break

billy — Fri, 19 Sep 2008 20:58:57 +0000

Another Papervision3D demo, this time using VectorVision and the AS3Dmod libraries to manipulate a vector image. Source code is available.

Arrive

billy — Mon, 15 Sep 2008 18:19:19 +0000

Hmm, I need to update this blog more.

Well I just finished a little interactive demo using Actionscript 3, Papervision3D, and some models I created in Maya. I used a song by Ehma who in his infinite wisdom released the music on Jamendo. I suggest you to check it out, it’s nice!

One PaperKing to Rule Them All

billy — Tue, 19 Aug 2008 03:08:52 +0000

The Papervision3D guys are running a nice little contest for the title of “PaperKing3D”. I thought this would be good chance to show an example of some of the recent stuff I’ve been working on. Here’s the demo, and here’s the source code.

Read on for more detail about the code and some of the inspiration.

First a word on the inspiration. I come from a photography background so it shouldn’t come as much surprise that in my design work I tend to think of things like a photographer — using space, composition, and cameras. This is why engines such as Papervision3D are exciting to me; they give me a chance to combine all of my interests in photography, graphic design, and programming into one medium. There are also a lot of parallels between programming and photography, namely that they are both fairly technical and require a bit of pre-visualization. The majority of your effort is spent constructing an implementation towards that imaginary goal — manipulating code very much like manipulating light to achieve a photograph. So with those similarities in mind I wanted to highlight the use of light in this demo. I also began thinking of the physical design of cameras themselves and some of the old classics. It almost seems silly that the machine designed to create art becomes a work of art itself, but this happens with code as well. Things of such complexity can be studied and studied creating their own following. So looking around flickr for old cameras I came across a picture of this little gem…

One of Walter Dorwin Teague’s modernist designs for the “Gift No. 1A” during his time at Kodak (a Western New York icon btw). Quite the sporty little accessory to have around your neck in the early 1930’s. This became a good place to start laying out the scene’s look and structure.

The Code

More than likely you’re visiting this page and could probably care less about any background inspiration and want to see how the example works. As I mentioned before, the source code is available so I won’t go through everything, but just highlight some of the more trickier issues.

In a nutshell this scene is just a collada model that I exported from Maya and baked textures onto. Papervision is a fantastic 3D engine but since we are working in a browser with Flash we are very limited by what a software renderer can do. With that in mind we have to create a very low-poly mesh and reduce our triangles count as much as we can. (Pop quiz, what do 3D modeling and type design have in common? Both require that you achieve the maximum expression of a shape with a minimum amount of points.) But, and this is a big but, when modeling the ground and wall planes you’ll be tempted to get rid of all the extra polygons — this is a mistake. We need those extra polys to hold the texture position correctly. [If we didn’t we could turn on precision for the material, but that would slow everything up.] So you may want to do some experimenting with count versus performance, I found a 10 x 10 plane to be a satisfactory compromise.

Another concern in the modeling stage is how the objects are grouped. Before you export your model be sure to combine the meshes you want as one texture and give it an easy name to remember (simply grouping the objects is not enough). This will make it more convenient when assigning your model parts to separate viewport layers later on. Apply a simple lambert shader to the objects and change the shaders name, it’ll be quicker to locate when you’re searching through the collada xml later.

Model, light, render, bake, and export your textures as you normally would. Make sure your models have been UV mapped and keep in mind your textures should be 512 x 512 (1024 if you really need it) for performance reasons.

When loading the images as materials you’ll need to replace the shader name that it’s given within the collada xml. Doing a search for “instance_material” will give you something that looks like:

You’ll be looking for the symbol name that we’ll add to the material list so we can swap in our texture:

//create material list
var matList:MaterialsList = new MaterialsList();
//convert to a bitmap
var textureBitmap:Bitmap = new myTexture() as Bitmap;
//now swap our bitmap material into the shader name that we found in the collada
matList.addMaterial(new BitmapMaterial(textureBitmap.bitmapData), "lambert1SG");
//once you have your collada loaded then apply the material list
model.materials = matList;

Now we still may get flickering polys with the model and the ground plane. This is a z-sorting issue that we can fix by using Papervision’s ViewportLayers. Andy Zupko has a much better explanation of using them with effects so I won’t repeat that, I’ll just show the relevant parts in my code:

viewport.getChildLayer(model.getChildByName("floor", true));
var wordLayer:ViewportLayer = viewport.getChildLayer(model.getChildByName("words", true));
wordLayer.alpha = 0.8;

The names “floor” and “words” are the names I gave the objects when I combined their meshes earlier. Since in my demo I wanted to simulate caustics I needed to make the model a little transparent. Since you can’t adjust the alpha of a BitmapMaterial I added the model to a separate viewport layer and adjusted it’s transparency there. And since both the floor and the words are being rendered on separate layers we can eliminate the “z-fighting”.

Well I hope that helps someone. The Papervision team are doing a fantastic job but you’ll need to help yourself as well. It’s up to careful modeling and texture optimization that will give you the biggest performance gains.

A Few Post-Panel Thoughts on Web Fonts

billy — Sat, 26 Jul 2008 14:55:32 +0000

There was a lively panel discussion at TypeCon 2008 on the issue of embedded fonts on the web [an overview can be found here]. A pretty controversial subject because there are 2 problems that need to be solved — the web designer’s desire to use typography, and the type designer’s desire to be paid for their work. However these are not technical problems, like every other content provider coming to grips with modern computing the questions are not “how can we do it”, but have rather become “how do we prevent the piracy of our work.”

A number of solutions were discussed, notable was the announcement of Ascender Corp.’s FontEmbedding.com and Ted Harrison’s (of FontLab) EEULAA. Unfortunately the current wave of discussion seems to be following the music industries failed attempts at Digital Rights Management (DRM). I say failed, as previous attempts have been, but what I mean is fundamentally flawed. The premise being that you can control what someone’s remote machine reads and stores, but the technical reality is that only someone with physical access (with applicable knowledge) has the capacity for absolute dominion over the machine. Or to try and apply it more succinctly to the world of fonts — if my eyes can see the typeface on the screen, the computer can also see the typeface. If the computer can see it, it can scrape it, produce outlines, look up a kerning table and write it out to a different name. All of which may even be legal because you cannot currently copyright a letter form, only the “software package” it comes bundled in. There is no format that can overcome this, just like in the “real world” where you cannot stop someone from cutting out letters in a magazine and creating new words.

But to me it seems there is a difference between music, which is format based, and with something like fonts, which is more application based. Let’s say we look a little more upstream to where designers are actually making choices and making typeface decisions. The vast majority are using applications like InDesign, Illustrator, Flash, Photoshop, etc, in short Adobe. So my question is, if Adobe, or any large application developer is effectively acting as a host system for interaction with copyrighted material, don’t they have a certain obligation to restrict offending material? If YouTube gets a complaint about a video infringing on copyright they take it down. MySpace has certain systems in place that will prevent you from uploading a song that matches the metrics of a known song, can’t such a measure be implemented by Adobe? What if there was a look-up system where they could evaluate the metrics of a particular font being used against those listed in a licensed based registry? Even if they did not want to go that route with enforcement, would they not also be in a better position to gauge usage statistics? They could effectively become the primary means of distribution, payment, and royalties — effectively becoming what iTunes is to music.

Of course this is not a perfect system, there will continue to be technical paths around this. But if you are looking at ways to stop the “casual” pirate then I think looking upstream at the choke points is a better philosophy then trying to use your finger to plug all the leaks that sprout up. You’re going to have offenders, but the question should be how do I make the best out of the current situation by making the most money off regular customers without restricting and alienating them?

Website Update

billy — Fri, 25 Jul 2008 21:00:48 +0000

The main page has been updated — click around, break things, and please send me any errors you find.

There has been a “temporary” page up for the past week in a mad rush to have something done by TypeCon2008. It was functional and highlighted some of the skills I’m trying to showcase. But now that I’ve had another week I’ve reworked the design and interactive code which I think makes it a bit more interesting. It’s definitely a bit hard on the ole’ cpu but I’ve tried to optimize where possible, and really it’s not a site that’s designed to be accessible to everyone on every browser.

I’m going to be adding new stuff to the “portfolio” as I get I can. It’s mostly photography and motion videos at this point but more Flash stuff is in the works. Questions, comments, work? Holla.