DC Display (Tech Post) — September 4, 2015

DC Display (Tech Post)

So. I said I would post about the technical side of this display… Here we go!


The general idea behind this display came from Paul Jacksons book “Folding Techniques for Designers.” There is a section on V-pleats which look like this. v-pleats

When I saw these V-pleats I immediately thought about the possibility of looking at them from the side. With this you could see one side of the pleats at one angle and the other side from another angle.


I realized however that this effect could not be achieved with just any pleat angle. The pleats would have to be at right angles to each other. After a lot of trigonometry (finally a good use for it!!), I found that the fold would have to be at 60-degree angles to each other. This would make almost ever angle in the final form either 45 or 90 degrees. Just what I needed.

Instagram:Screenshot 2015-09-04 12.05.55

I needed to figure out how to take photos from Instagram and save them into a folder that my code could access. I decided to use If This Then That.com, a free web-based automation tool. This also proved useful because with the correct login information, the owners of the display could easily change what the display showed. I set up two “recipes” on If This Then That that pull any images from certain hashtags and save them into a dropbox account.

Dropbox Management:

Screenshot 2015-09-04 12.14.37The next step would be to move these slowly into a queue so that they could be processed for displaying. For this part of the process I wrote a Python script (program) that pulled them from the constant feed of Instagram images into a folder of images that would be cut up and distorted so that they could be properly displayed. I used the Dropbox API (application programming interface). This is a system that Dropbox has set up so that people can write code that interacts with Dropbox files and folders.

This program had another section that automatically checked to make sure that all of the images in the queue were in the right place and in the right format. If they weren’t, the program would add in extra images to account for these mistakes. In this manner, this program figured out when it had made mistakes and fixed them so that the next part of the process would have everything it needed.

Image Processing:image (9)

The next step of this process was to cut up and distort the images from Instagram so that they fit the origami display surface correctly. I did this using a Java-based programming language conveniently-named Processing. This is a language that was created to help make different visualizations of data and interactive applications.

This program was what probably took the most time to put together. It takes two images, and cuts them up into a bunch of very precise triangles defined by a lot of math. These triangles are then laid out on screen and distorted so that they look like the image at right.

This resulting image is then saved once again to Dropbox.

Raspberry Pi Display Software:

Front_of_Raspberry_PiTo project this image onto the origami form, I used a small (credit-card sized!!) computer called a Raspberry Pi (at left). I wrote another Python script on this computer that once again uses the Dropbox API. It connects via wifi to the Dropbox site and pulls the images off my account that it needs. It takes the images that were saved by the image processing program (images that look like the one directly above), and displays those images through the projector. It cycles through the images in such a way that if any previous steps fail, it can keep running.


Since the physical set up of the display and projector will always be a little bit different, I set up a way to calibrate the images for the current set up. In the image processing program, you can run it in “Edit Mode.” This allows you to choose any of the points where images intersect, and move them around so that they meet up with the points on the origami form. You can then save these points so that the program will always cut and distort the images to fit the current set up.

Screenshot 2015-09-04 12.43.12
The Calibration lets you go from this….
Screenshot 2015-09-04 12.43.24
to this!

Overall Process:

If This Then That.com pulls images from Instagram based on certain hashtags. These images are checked and saved into a queue by a Python script using the Dropbox API. A Processing program cuts and distorts the images, using a lot of trig, to match up with calibrated points on the origami form. Another Python Script on the Raspberry Pi takes these distorted images and projects them onto an origami form inspired by “Folding Techniques for Designers” and created with the help of lots of trigonometry.

Every step in this process is designed to keep running independent of the others and should work even if all other steps fail.

Moral of the project: Trig is always useful (as long as you are working with computers and triangles which you probably won’t unless that’s your job)

Thanks for reading this crazy post about this crazy project! Thank you to Design Commission for helping me find reason to try all of this and learn all that I did!

Contact me at mccannemmett@gmail.com if you have specific questions and/or would like to see any of the source code.

Or just comment below!

DC Display (Art Post) —

DC Display (Art Post)

As I posted earlier, this summer I have been interning downtown at Design Commission, a Seattle design firm. For one of my bigger projects I was tasked with creating a different type of display for use in the gallery that makes up the front part of the office. I created this origami surface using some designs I learned from “Folding Techniques for Designers.”

I then created a system for taking Instagram feeds and mapping the pictures to this structure. Using a Raspberry Pi, I projected the resulting images onto the surface. (More on the technical side in a later post)

The unique thing about this surface and this display is that you can look at it from different angles to see different pictures.

It also seems to glow at night!

At night
Mid-day front view
Night side view
Day side view
Display for DC — July 28, 2015

Display for DC

Through the past couple of weeks, I have been working on a display for the front gallery area of Design Commission. I was asked to make a creative display that can show design related news and images. I have been playing around with projection onto 3D surfaces for this project and think I have settled on a surface. I am going to use a series of v-pleats in a piece of paper.

The projection surface will look similar to this

I will be projecting two different images onto either side of each pleat so that the viewer can see the images interwoven, or by moving to either side of the surface, can see each image separately.

In order to make the images appear without distortion, I have to use projection mapping. This is a process where a computer takes a source image and distorts it to fit a 3D model. However, there are not readily available projection mapping software systems that are cheap enough for my use. So, I am designing my own.

Using 3D array and texture mapping techniques that I have learned through my work with Processing.js, I am creating a simple projection mapping system to create and distort images for display.

I will post again about progress soon.