Drawing Machine—Software and Interface

Having designed the physical components of the drawing machine, I began to consider how to create a meaningful interface for it. Overall, I want the machine to passively record and print information, specifically recognizable depictions of those moving past the camera threshold.

There are a number of abstractions occurring here that can impede on a user’s ability to decipher the resulting depiction:

  1. The image being captured is not a conventional photograph; it is a slit-scan recording of a particular line of space.
  2. That recording is not being shown using pixels of varying levels of brightness and darkness; it is shown using scribbles of varying arc lengths.

Therefore, I decided to use the interface as a way of guiding the user from state to state in order to give them the best shot at understanding the output of the machine.


The interface shows the various transformations that the image information undergoes.

The image being recorded undergoes a couple of transitions as it is displayed back towards the user. These transitions reflect the kinds of abstraction, described above, that will occur as it makes its way towards the drawing machine. The image below describes how this happens.

Shown above are the various transitions the data undergoes on its way to being drawn by the machine.

State 1: This state shows a standard camera feed with images easily understood by users. The transition from State 1 to State 2 will help clarify what a slit-scan image is.

State 2: This state introduces the visual language of slit-scan photography without losing the fidelity of grayscale pixels.

State 3: This state depicts a graphic representation of what is being printed on the paper. The clear correlation of information being passed from one state to the next.

Data Structures

In order to clearly present the relationships between each of the different states without simply drawing the same information on top of each other over and over again, I realized I needed to create a buffer of information with information from different moments in time available to be retrieved.

My buffer array has a series of grayscale values stored for each frame.

Shown above is a rough diagram showing how I’ve organized the information begin recorded from the camera. It takes a single column of pixels, collects the grayscale values and stores it in an array for each frame, essentially turning it into a two-dimensional array. The buffer can be fairly long. In the latest version of the sketch, I’m recording 240 frames worth of information or about 5 seconds of information.

This allows the information to be dispersed at controlled intervals. In the gif above, my thumb is shown passing the solid line first. The sketch then waits the time it takes for my thumb to move through State 2 to reach the dashed line before it sends the information from that moment to State 3, which in the current sketch is about 45 frames. This is also useful for sending information over to the machine via serial communication. Shown in the sketch interface, State 3 has odd lines offset to replicate the way that the odd pens are offset on the actual drawing machine. This allows for a greater density of pens.

Sketch Components

The sketch can be broken into 3 main components:

  • The draw function which displays the information from the camera and the various object
  • The column class which constructs the vertical segments of pixels that make up State 2
  • The scribble class which constructs the horizontal scribble lines that make up State 3

Draw Function

Within the draw function, I have written the code that collects the camera information in slivers. This is stored in the buffer array described above. The buffer array is the referenced when creating new instances of the column class and adding new points to the existing instances of the scribble class. This sketch makes heavy use of the array shift function which removes the 0th index of an array. I’ve structured my object arrays so that the newest instance is added at the last index and is the shifted over with the rest of the indices one the 0th index is no longer useful.

Column Class

The column class is an example of this process. Across State 2, there are 44 instances of the column class on display. Once an instance has moved from the right side of State 2 to the left side it could be deleted, freeing that memory for a new instance with fresh data. When a new instance is created of the column class, it is given an x-value for its horizontal location, and it is filled with every 5th grayscale value. This is because it has a lower resolution. Its x-value is then updated with an incremental value that effectively moves it from right to left.

Scribble Class

The scribble class works differently because the relationship between values is horizontal, not vertical. The number of lines is established in the sketch setup function. Each line is fed point values that represent the brightness and darkness of the grayscale values in the sketch. A brighter pixel results in an arclength of zero which produces a straight line. A darker pixel results in an arclength of half the distance between pens resulting in a wider swing in the linework. Those values are then pushed further and further toward the right until they too are dropped from the array.

Source Code


Prototype Video

Drawing Machine Test from Lucas on Vimeo.

This video shows a prototype of the machine in action. There are still a few things that need to be fixed before the images on the page will be legible. The motors are still a bit loose, and right now it uses somewhat unreliable plastic gear micro-servos. I intend to switch to metal gear servos.

Functioning Version of Sketch

Click here!

Click here to edit source code




Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.