Running on OPENRNDR

Packture tool: Using bin-packing as a design strategy

This story is part of a series of case studies related to the open source framework for creative coding OPENRNDR, written in Kotlin and Java 8. OPENRNDR simplifies writing real-time audio-visual interactive software. The framework is designed and developed with two goals in mind: prototyping and the development of robust performant audio-visual applications.

Examples of output of the tool

In bin-packing you determine how to put the most objects in the least number of fixed space bins. This principle is commonly used in real-life applications, for instance for packing boxes, containers, up to the loading of a ship. In this case bin-packing is used as a means to create form with a wide range of possible applications. Using the OPENRDNR creative coding framework, the Packture tool was created in order to be able to generate patterns that use the bin-packing system in a fast and easy manner.

Common approach to bin-packing: set of objects (left) packed to their most optimal space (right)

Packture uses a space-splitting approach to place rectangles. That means that it splits unallocated space for every rectangle it places. In this approach the space and the splits are represented by a tree structure. Every node in this tree structure describes a part of the space, and the root of the tree describes the total available space.

Simplified Packture algorithm

The placing algorithm is best explained by starting from a tree that is just its root node. Let’s assume that the root node describes a square of 1000x1000 and the first item we want to place is 20x40. The root node is visited; the space is free, the item will fit, but the space is too large unless it is split to make it fit better. At this point we have some options for picking a way to split the space, however we decide to split such that we leave as much space for the future. This split creates one 20x1000 part and one 980x1000 part. The item will fit in 20x1000 part but the part is still too large unless we split into two parts sized 20x40 and 20x960. The item will be placed in the 20x40 part, which is an exact fit. Now we want to place a second item of 80x80 so we start again from the root. At the root there are now two directions to follow: right 20x1000 and left 980x1000, we follow left and continue by splitting until we have an exact fit.

Let’s go through some of the main functions of the tool and their visual outcome.

Fields

Depending on the settings applied to the Packture tool one can generate endless patterns, even from neutral inputs.

Running the tool with slightly different settings results in many variations

Masks

Packture works with a background image that the tool tries to fill with elements. You can work with masking to increase complexity of the image.

Example of masking

Shapes

Loading different shapes allows you to create very different outcomes.

Directional fields

Packture contains tools to calculate directional fields for binary images. A directional field describes an estimation of the direction at each pixel in a binary image. The estimation of the direction is based on finding the nearest white pixel for every black pixel and vice versa.

The information contained in the directional fields can be used in two ways. First the fields can be used to influence the packing process by prioritizing shapes whose orientations match the field direction. Second the fields can be used to rotate shapes after they have been placed in the composition.

Two different input backgrounds
Combination of the two backgrounds, only the white parts of the black and white input image is filled
Combination of the two backgrounds, both white and black and white part of the input image are filled
Same principle as above but using different shapes

Feather

The feather function, in order to create more fluid transitions uses a distance field.

Input backgrounds
Detail of the image above

Color images

Also color images can be loaded, translating each unit to a single color.

All images can be exported as fully editable vectors in svg-format.

Development using OPENRNDR

Packture is built using OPENRNDR and Panel (a custom UI toolkit written for and in OPENRNDR). OPENRNDR made the development of Packture quite easy through its support for reading and writing SVG files, creating and modifying hierarchically organised vector drawings.

Using the Panel toolkit we can quickly create user interfaces. The toolkit uses DOM/CSS- like layouting that can be nicely expressed using Kotlin’s typesafe builder pattern.

Simplified user interface using the Panel toolkit

USE CASE: Identity Museum of the Future 2017

Research image for Museum of the Future 2017. Design by LUST.

To design the visual identity of Museum of the Future 2017, LUST researched the concept of resilience and its key characteristics in natural systems focusing on recursiveness, scalability and efficiency.

This resulted in a bin-packing system as the core concept for the identity, in order to create a coherent visual language for elements and typography in static and dynamic forms. A series of unique grids made of modular geometric elements were developed for the three main exhibition spaces.

The bin-packing algorithm provides some key principles, as the potential reactivity among shapes and surfaces, the use of recursive shapes to create a progressive flow, and the flexibility to adapt to different scales.

Research image for Museum of the Future 2017. Design by LUST.

For each of the three spaces, a unique set of shapes was developed in order to form a diverse but consistent visual vocabulary, that was applied to design all interfaces, video and print components, but also artefacts and architecture. In the same manner, the typography comes together with the visual identity system. Both English and Arabic typefaces are composed of a variety of shapes determined by the context of use. This connection between typography and space reflects the bin-packing system and its resilient behaviours. The typographic treatment has been able to create a constant vibrant feeling of dynamism, which is also visible in the printed elements.

The complete visual identity was produced with a custom-made tool, the first version of what is now the Packture tool.

Applications

Set of pattern variations designed for each room of the exhibition.
Typographic treatment
Typographic treatment
Typographic treatment
Typographic treatment
Surface sketch
Example of the visual language: the typography is integrated with the graphic elements respecting the ‘bin-packing’ system
Countdown sequence projected before the intro video
The Food space
The City Kit space
City Kit animation

Credits Museum of the Future
The Museum of the Future at the 2017 World Government Summit is supported by the Dubai Future Foundation and the UAE telecommunications giant du. It was led by the Foundation’s team and directed by the global design firm Tellart, with the support of an international team of top partners including Marshmallow Laser Feast, SOFTlab, Spacehabs, Idee und Klang, LUST, Cropbox and Shtik. The onsite build and installation was done in collaboration with Projex, Neumann & Müller, Hypsos and PublicisLive. Foresight research and workshop facilitation was performed by Scott Smith (Changeist).

http://museumofthefuture.ae/

Running on OPENRNDR