Making of the Garden Lantern Electronic Pop Up Card

Garden Lantern Origamic Architecture / Kirigami with integrated electronics

The Garden Lantern Electronic Pop Up Card I made in 2017 was one of the first big projects where I shot video documenting the build. There was a lot of footage and, I wasn’t very comfortable with editing videos at that point. The raw video just sat in a folder for a few years. I have done a bunch of build videos since then and, it occurred to me that I could probably manage to pull the old video clips together into a build narrative. I have been slowly putting that together in the last few weeks and, it is finally done!

As I noted in my original post about this project, this was inspired by and based on work done by Jie Qi and Natalie Freed. The Chibitronics Circuit Stickers project made everything a lot easier.

Retroreflective Chromakey Experiment

I played with some green screen chromakey stuff for video last year.  It’s a bit fiddly to get the screen and the subject lit right for it to work well.

I was excited to learn that it was possible to get better results with a retroreflective screen and a colored light ring.  The general idea is that the fabric reflects the light back in the same direction from which it came.  By shining even a relatively dim colored light at the screen from right around the camera lens, you get an almost perfectly-even colored background.  It is much less sensitive to the subject’s distance from the screen, etc.

John Park posted a project write-up with his plan for building an appropriate light ring a few months ago.  It looked pretty straight-forward.  So, I gave it a go.  My 3D printer is not large enough to print his mount design in one piece and, I didn’t really want to mess with printing in sections for assembly.  Instead, I did a quick (and pretty sloppy) adaptation of the design in lasercut acrylic.  The LED ring sits in a channel made with a bunch of little L brackets, glued on with acrylic solvent.  Similarly, the grippers are several layers of acrylic glued together.

The electronics design and code are all straight from John Park’s project.

This works really well! Light spill on the background from lighting the subject can still be a problem.  I was able to adjust settings for the chroma and luma range in post to compensate where I had issues pretty easily, though.  In later attempts, I was more careful about where I pointed my lights.

It is not clear from the photos but, it is better to get the screen as flat as possible.  It works with a little wrinkling but, it makes the light spill issue more likely.  I tightened the screen to the frame a bit more for later attempts.

It is also worth noting that the retroreflective fabric bruises pretty easily after its protective film comes off.

Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.
Retroreflective screen with DIY colored LED light ring based on a design by John Park.

MicroView Graphics in Minutes

Microview Power Up graphic
Microview Power Up graphic
Microview Power Up graphic

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:

  1. 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:

    Two-color 8-bit power icon
    Two-color 8-bit power icon
  2. Open your image with ImageJ, a Java (multi-platform) image processing and analysis program.
  3. 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).

    Creating a bitmap coordinate list in ImageJ
    Creating a bitmap coordinate list in ImageJ.
  4. We need to turn these into lines of code that look like: 
    uView.pixel(x,y);

    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:

    s/^(.+)\t(.+)\t.+/uView.pixel($1,$2);/g

    That should give you a list of uView.pixel commands that you can paste into your code.

    RegEx replace in jEdit.
    RegEx replace in jEdit.

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!

MicroView Gears

MicroView Controller with Gears Image
Simple 3-frame gear animation on the MicroView
Simple 3-frame gear animation on the MicroView

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.