Happy New Year!
I have managed to get a little time in the stud.io to play with my origamic architecture projects over the holidays. In keeping with the time-honored tradition of striving to foster a bit of wonder for the recipients, I won’t post an image of the newest holiday card just yet.
I though, however, you might enjoy seeing the 2014 new year’s card, previously unseen online.
If you have been playing with the new MicroView arduino microcontroller, you likely know that it has a built-in 64 by 48 pixel OLED display and, that you can use the support library for it to control those pixels in your code. The library also supports some gauges and text output, which will likely cover most useful things people will actually want to do with the MicroView.
I, of course, immediately wanted to put various arbitrary graphics on it moments after un-boxing.
After dismissing the obvious approach of plotting individual pixels as way too much effort for play time, I came up with a way to convert bitmap images into MicroView code. I promptly splattered my company’s logo and, did a simple three-frame gear animation.
It’s easy and, you can do it, too. Here’s how:
- Create a 1-bit (“black and white”) 64 pixel by 48 pixel image using your favorite bitmap editing program (e..g., the gimp). I’ll omit the details of that here as it is a fairly extensive topic on its own. I used PNG format to save my images (PNG-8 is technically 8-bit but, we are only using black pixels on a white background). Note that the image ends up rotated 180 degrees. We’ll use this image for the demo:
- Open your image with ImageJ, a Java (multi-platform) image processing and analysis program.
- In ImageJ, choose Analyze > Tools > Save XY Coordinates … Click Ok in the options dialog and, save the coordinate list to a file. This will produce a text file with each line containing the coordinates of a pixel from the image as three numbers (x, y and 1 or 0, since we are not using the color value).
- We need to turn these into lines of code that look like:
A good way to do that is to run a regular expression against the file. You can do this in most decent code editors (I used jEdit). Basically, we want:
That should give you a list of uView.pixel commands that you can paste into your code.
For reference, the code for the Power Up image is here.
The bitmaps take up a lot of memory. The gear animation uses up about half the available memory, for instance.
It should be pretty simple to write a script to optimize the images better by looking for consecutive pixels and turning them into uView.line() commands.
Old hat? Have a better way to do it? Wrote my optimization script? Let me know in the comments!
A very simple animated gear on the new MicroView Arduino. The code is here, although it is not particularly exciting. It’s just a simple three-frame animation. I’m sure there is a better way to do it, possibly using a single sprite and rotating it.
What’s possibly more interesting is that I did the whole thing in about 20 minutes, most of which was spent figuring out an easy way to draw a gear in a vector graphics program (a star, three circles and a few uses of trim and weld). I will write up the conversion of bitmaps into MicroView-specific code in my next post.
Want to tell me how to use the power of math to rotate my gear? Let me know in the comments.
After letting it sit in the studio for an embarrassingly long time, I got the new BlackTooth laser up and running this past Spring. Here is the first successful test run.