You are here because
you are interested
in flipdots!
A BIT ABOUT FLIPDOTS
A flipdot display
When you give the circles a little zap of current, they flip over. If it was showing the black side, it flips to show the white side and vice versa. The flipdots use this mechanism to display pictures, words or even animations.
Further more, you could also connect a flipdot to an external device, a webcam, a custom made button, a sensor, ‘insert_our_own_device’ using a microcontroller
If you are someone who’d like to make stuff for a flipdot display, you are in the right place! You could be an animator, a graphic designer or just generally an enthusiastic person.
A BIT ABOUT ME
Hello friend, I am Abha. I am a graphic designer from Mumbai, based in Toronto. I am interested in creative coding, physical computation and just making stuff in general. I’m currently studying the Digital Futures Graduate Program
I recently got my hands on a beautiful retro-style flipdot display and I tried my hands on designing 36 days of type on this 28 x 14 px display. Since then, I have been obsessed.
I have been working on a program that allows people to easily work on the display without worrying about the code.
CITATIONS
The code setup is build off of a Processing
Note: if you don't have a Flipdot display you can still use this as a Flipdot simulator.
Do you have a crazy
flipdot idea?
1. 36 DAYS OF TYPE
DESCRIPTION
36 days of type is my first exploration with flipdots. It is still a work in progress. Everyday, I design (or atleast hope to) one alphabet on the flipdots with 4 variations of it and make it animate from normal to its extended version.
DETAILS
We use the 28x14 px Alfa Zeta panel with Owen Mcateer’s Processing setup to design custom letters for every alphabet. Every pixel of the alphabet is actually a rectangle drawn on the screen in a very specific location. (Sounds tiresome, but actually isnt.)
2. I MADE A RUNNING DOG AND THEN MADE HIM RUN FASTER
DESCRIPTION
Before I could get to even half of the letters, I got distracted and decided to connect an arduino and a pressure sensor that now controls the animation and the speed of it.
DETAILS
We use Arduino Nano 33 Iot and a custom built pressure sensor using layers of aluminium foil, velostat
Here’s how you can have your own little animation on the flipdots
GO TO THIS LINK TO DESIGN YOUR FLIPPY ANIMATION
DESCRIPTION
Here is a simple template for you to begin with. Draw, design, animate anything within the framework of 28x14 pixels and download JPEGS. Once you have something you are happy with. Mail me the image sequence and I can test it out on the flipdots.
BONUS INFORMATION
If you right-click on the page > go to inspect > console, you should be able to see the code that draws your drawing on the flipdots (basically a bunch of rectangles in really specific locations.)
Don’t prefer this? Would rather work on procreate or photoshop?
DESCRIPTION
This is a png template that you could use as a foreground to animate on procreate, photoshop or an app of your choice. Just work with either black or white color. There is no restriction on how long your animation needs to be. The longer the better.
Name your image sequences as
name of your project_n.jpg
No true designer would sleep peacefully without noticing how the dots on this template are not center aligned. Unfortunately, we have to live with this.
Do not resize the template. I would require you to send me a jpeg sequence of the same dimension as the template, which happens to be 1037x523 px (weird number, yes).
Just have fun with it.
More questions? Ask
Flipdots gallery
Couldn’t have done this alone. Thanks to
Kate Hartman · Nick Puckett · Juan Sulca
Kate Hartman · Nick Puckett · Juan Sulca