Graphics related diagrams!
Let’s kick things off with an interactive diagram explaining floating point numbers! There are many ways to explain this, but I’ve always found that diagrams help. The Wikipedia page on single-precision floats has all the details on how they work, including links to external tools allowing you to convert decimal to binary and vice versa.
…to see if I have two embedded diagrams on the front page and check they work properly!
This is a test of the embedded diagram functionality. You should be able to zoom & pan but not edit.
Another great page with links some really cool tools : http://explorabl.es/.
And of course Amit Patel’s blog with some awesome interactive diagrams : http://www.redblobgames.com/!
Just came across Apparatus (http://aprt.us/). It’s very nice, lots of similar concepts to what I’m trying to do here. Check it out!
I’ve been adding lots of new functionality to the drawing app. We have lines, rectangles, circles, cameras, lights! Lots of snapping options as well!
Woo! After a lot of testing, head-scratching and swearing, I found the problem! I wasn’t clearing the line dash mode correctly!
I had code like this:
if (typeof(dash) === "undefined")
dash = [1,0];
context.setLineDash(dash);
Visually, it does the right thing, draws a solid line. However I think it actually draws the line 1 pixel at a time instead!
The correct code is this:
if (typeof(dash) === "undefined")
dash = [];
context.setLineDash(dash);
Massive win!
HTM5 Canvas performance can be abysmal some times! Not all the times, not all all browsers, but often.
I’ve generally been finding Chrome to be a lot faster than Firefox, but I’m also finding some very strange performance pitfalls on both.
Check out the new light types added to the generic diagram tool! They cast shadows too!
I’ve been working on a general purpose drawing canvas. It’s useful as a stand-alone diagram editor but I’ll be using its component parts for other diagrams.
Check it out here!