Flipdigits Player: Processing Tutorial

This tutorial first appeared on Ksawery Kirklewski’s personal website. He is a graduate of the Graphic Department of the Academy of Fine Arts in Gdańsk and lives + works in Gdańsk, Poland. He creates work for public space, live visuals and music videos using new technologies, programming, advertising media and old RTV equipment. Until recently he was the coordinator of activities in the PATIO ASP space in Gdańsk. In 2019, he founded Fundacja(x), a foundation which deals with the broadly understood art of new media and its dissemination.

ksawerykomputery.pl | Instagram

FLIPDIGITS PLAYER is an algorithm sequencer and a collection of demo animations for a flipdigits display, coded in Processing. It is an interactive object that uses mechanical flipdigits text screens to visualize depth camera and to play animations. These types of screens are usually used for informational purposes, ie. at airports or train stations – because of low power consumption (energy is only required to change the state of digits) and good visibility in strong light. The project involves programming the controller, developing animations algorithms and building the construction.

Tutorial was produced in cooperation with AlfaZeta – the flipdigits displays maker.

Download Source (pde)


To recreate this project, there are a couple of things that you will need:

  1. A flipdigits display – you can get one at Alfazeta
  2. Ethernet-RS485 converter (mine is ETH-UKW485SR140)
  3. Power supplies: 24V/1A for the display and 12V/1A for the converter
  4. RJ45 and RJ11 cables
  5. USB network adapter (if you don’t have ethernet input like me)
  6. Processing with all required libraries: processing.net, processing.video, org.openkinect (for kinect), codeanticode.syphon (for Syphon)


The very first thing when you have all the parts connected is to check what the IP address of the converter is. the producer delivers this helpful application and with it you can set any IP you want. sadly it works only on Windows.

When you know the IP, the next step is to set up the display address – you can do it on the back of the display. take the easiest way (0x00):

The left 3 switches controls the speed of transmission. set it up to 011, which means the highest 57600 b/s speed. also make sure your converter is set to the same value in WIZ14xSRConfig.

Ok, now we can open Processing. download the project file and set your converter IP in SENDDATA tab. also, make sure you switched senddataOn to true in the main tab.

Run the project!


The major functionality of this project is a sequencer. with it, you can arrange your algorithms to be played in a queue and for specific time.

The main tab has all the algorithms listed and grouped for: math, games, capture, fonts and typing.

If you are interested in making your own demo, here is how i hold, process and send the data:

Sending data

Changing states of the display digit parts is based on a very exact protocol, using TCP client from processing.net library. following the instructions, you have to send 32 bytes in a right order (called a frame):

  • the first byte 0x80 starts the frame
  • the second byte (command) sets the display – we use 0x83 to tell that we are about to send 28 data bytes and refresh the display right after that
  • the third byte (address) decides which display we are changing – set it to 0x00
  • the next 28 bytes specifies the digit states (column by column!)
  • the last byte 0x83 ends the frame

Here is how you figure out a proper byte for a digit:

Knowing that, you can send this letter ”E” as byte(unbinary(“1001111”)) or simply 79 (a sum of powers of 2). however, displaying numbers and letters quickly becomes boring.

Holding data

If you want to display something more complex, you need to organise the bytes in a smarter way. i prepared few ways of holding bytes to make the animation coding process as easy as possible:

byte DISPLAY[W][H] – this two-dimensional array of bytes holds the final data that is sent to the display

char A[W][H] – an array of characters, automatically converted to bytes – helps with all ”text” animations

PImage T – a data thumb (image/movie) – helps with preparing legible representations of digit states (ie. in Photoshop)

boolean BX[W][3*H], BY[2*W][2*H] – two true/false arrays for states of vertical and horizontal lines – helps with abstract animations (ie. noise)

boolean CX[2*W][3*H], CY[2*W][3*H] – similar idea to the previous one, but these two arrays are the same size, holding information about corner points (and also the ”gaps” between digits) – helps with drawing animations

Movie D[W][H] – a movie with every frame being an array of greyscale pixels (brightness of a pixel is a byte state) – with it you can read data states recorded or transmitted (through Syphon) by another project

Movie M – a regular movie that is resized and converted to bytes using Threshold or Dithering algorithm

Of course, Movie M would look much better on a bigger scale and density:

Processing data

I developed few methods to operate on this formats. despite obvious for() loops to operate on the arrays, you can use clr() for all of the formats to clear the screen, full() to make it all white and functions that converts one format to another.

The easiest way to show something complex on the display is to use algorithm movie – it plays any video on format M.

Also, there is a very useful function drawLine(x1, y1, x2, y2) for format C – with it you can draw any shape you want.

There is also a function draw3d(), which takes 3d points and converts them to a loop of drawLine() functions:

You can also use a float progress variable to let the animation develop over time:


Finally – here are some examples of how the demo set list works in real:

[/two_columns_one] [two_columns_one_last]
[/two_columns_one_last] [divider] [two_columns_one]
[/two_columns_one] [two_columns_one_last]
[/two_columns_one_last] [divider]

Leave a Reply

Your email address will not be published. Required fields are marked *