16BPP.net
 
 
 
 
 
Trying Out Dart

Finals are over and I'm back at home now.  I haven't really had a nice long break in the past 2-3 years, so I'm really looking forward to these next five weeks.  I'm currently waiting for from stuff from Amazon to work on my project for the break (I'll make a separate post later).

In the mean time, I decided to take a look into Google's JavaScript replacement; Dart.  So far, I've really liked it.  I did the Pirate Badge tutorial, but to really get into it, I went ahead and ported my 3D Canvas Cube to the language.  There were also some improvements.  Addition of a perspective view, better scaling, and fixing a bug where I was drawing an Impossible Cube.

Impossible Edge

Projection Type Switching

When the line width of the cube was at the size of "1," it's pretty hard to see, but when you scale up the size, it's clearly visible.  To fix this, I employed a simple algorithm:

sortedLines = List of "Line," objects
zLineMap = Key-Value map of floating points and a List of "Line," objects
For each line:
  Look at the z coordinates of each endpoint of the line
  zMin = Take the lesser of the two z's
  
  If zMin is a key already in zLineMap:
    Append it to the List at zLineMap[zMin]
  Else:
    Create a new list containing only the line
    Add it to zLineMap at key zMin (i.e. zLineMap[zMin])

zKeys = sorted List of the keys in zLineMap (ascending)
i = 0
For each key in zKeys:
  For each line in zLineMap[key]:
    Put the line into sortedLines at i (i.e. sortedLines[i] = line)
    increment i by 1

This algorithm might not be the most efficient (mostly likely because I haven't formally studied any computer graphics), but it avoids the issue of accidentally drawing an impossible cube.  This bug was happening because I had an array of lines, would apply a rotation "matrix," to them, then sent them off to be drawn.  The drawing function would process them in the order that they were indexed.  Sometimes it would look right, but most of the time it would not.

The rotating cube that you see in this post had been compiled to JavaScript with the dart2js tool.  If you want to see the source, it's in my toybox repo here.  Don't forget the accompying HTML page.