LL Unibot77

The real motivation behind this project lay in the combination of various digital media. The main idea was that elements within the digital visual would transform through the automatic and random movement of analogue bodies without any human intervention. This was intended to create an ever-changing environment based on the following concept: inspired by snail races and animal fights, we developed a system that serves as the foundation for the visualisation of the performance.

To make the connection to the technological discourse around robotics visible, we chose design parameters accordingly: a grid-based layout, luminous RGB colours, technical circuit drawings, and the deliberate creation of depth and space.

As a visual contrast to this clear systematics and in support of our conceptual question, we selected the typeface LL Unisoft77 from Lineto, a font characterised by soft curves and generous spacing. It was precisely this contrast to the otherwise strictly geometric and confined appearance of technical processes that fascinated us and led to an image that features technical data and electrical schematics in an unconventional way.

In the first step, we analyzed our moodboard, noted what we liked about specific images, and used it as inspiration to experiment with different arrangements of the elements we wanted to implement.

The visualisation below illustrates the various layers we planned to integrate. From left to right, it begins with the grid-based layout containing all inner grids and circles. Next, the consultation typography, the schematic electric circuit, and subtle gradients are added. Finally, all interactive elements responding to the movement of the AprilTags are implemented.

We expanded our colour concept and tried out different combinations. To emphasize the technical and modern aesthetic, we chose strong, vibrant tones. In particular, the neon green stands out, adding an energetic contrast to the overall composition.

To provide an insight into the development process of our coding phase, below are a few stages. The grid layout was established early on. Building on this base, we worked on each interactive element individually – from the letters and arrows to the font sliders, data table and graph. The overall colour scheme and visual effects remained relatively consistent throughout the process, while our detailed work focused on creating visual tension and maintaining legibility.

For building the robots, our starting point was to search for existing instructions from projects similar to what we had in mind. After some research, we found suitable instructions for a Trinket-controlled rover bot by Rick Winscot, https://learn.adafruit.com/trinket-powered-rover which matched our concept and used components we already had available.

We 3D-printed the provided models for the base and wheels, then began prototyping on a breadboard. Once we needed to run movement tests, we mounted the electronics onto the base and attached the wheels. The components were then soldered and securely fixed to the baseplate to minimize the risk of failure during operation.

The initial code snippet required significant modification to accommodate our desired customizations, such as different hardware configurations, randomized movement paths, and a retract function allowing the bots to reverse and change direction. The servos were also modified for continuous 360-degree motion and carefully calibrated to determine their stopping points and match their base speeds.
Finally, after extensive testing and fine-tuning, we completed the bots with a coat of white spray paint.

The final code can be found here: https://github.com/sendhelppleasee/LL-Unibot77

When working with the graph component from the library, one of the main challenges was adjusting the predefined CSS styling. Not every glyph in the font had a centered anchor point, which caused alignment issues, especially within our square-based layout. Additional adjustments were required to precisely map the crosshairs to the correct position within the camera’s field of view.

Another issue arose when rotating the directional arrows. Rotations exceeding 360° caused unexpected behavior in the animation logic. To resolve this, we implemented a custom code snippet that allowed the total rotation value to reset (totalRotation = 0), ensuring smooth and continuous motion.

During the performance, the lighting conditions interfered with the AprilTag detection accuracy. To improve tracking stability, we reduced the robots’ movement speed and increased the printed size of the AprilTags.

Since we did not have continuous rotation servo motors available, the standard 180° servos had to be modified (“hacked”) to allow for continuous motion. Because many of the components we used came from different manufacturers than those referenced in the sample code, we had to test several libraries to ensure compatibility.
We also experimented with different microcontrollers to find one that worked reliably with all components. The modified servos required extensive fine-tuning using multiple test sketches to calibrate them to the same base speed and accurately identify their stopping points.

The mechanical limitations of the robots, particularly their ability to maneuver and turn in confined spaces, only became apparent once the arena was completed.
The 3D modeling of the chassis also presented challenges, as we had limited prior experience with designing parts that require precise measurements.

The performance and the interface are interwoven on multiple levels, influencing each other through movement and aesthetics. Although the AprilTag detection functions purely through the conversion of x- and y-values, the application itself is highly complex. Each colour is assigned to one of the robots to enhance clarity and readability. The arrows in the visual respond to the orientation of the robots, yet unlike the small machines, they remain fixed in place.

Alongside these elements, large letters and glyphs rotate through an array of characters. In alternating seconds, the contents of the two squares change form, making the passing of time even more tangible. This passage of time, along with other parameters, is displayed in the value table in the top-right quadrant. These include the x- and y-positions, as well as various distances: to the centre, to the corners, and between the two robots. The positions are also visualised through the two crosshairs, which move across the entire interface and create a constantly shifting rectangle where they intersect.

The graph in the lower-left rectangle tracks the distance to the centre, comparing the two robots in real time. At the end of the 60-second performance, the graph reveals which robot remained closest to the centre and is therefore declared the winner.

The key element, however, is the animation of the variable font. Movement along the x-axis controls the weight of the letters, while movement along the y-axis adjusts their slant. The corresponding values are visualised through sliders in the bottom-left area. Every element in this project holds its own significance, including the numerous drop shadows and background blurs. These not only emphasise the glyphs and letters but also create an additional layer within the digitised space. The walls of the arena in the performance section cast their own shadows, extending the interface into yet another dimension.

The white circle in the centre, mirroring the circle within the interface, acts as a connecting element, symbolising the final relationship that ties the performance and interface together into one cohesive system.

In addition to the two robots, we used a self-built cardboard arena that allowed the robots to detect the walls with their ultrasonic sensors and remain within the field of view of the top-view camera. The recordings of the performance were captured simultaneously from three additional camera angles, positioned at varying distances. The only lighting came from two opposing softboxes that cast a cool light onto the performance area.