Backpack — Hypersystem
Backpack — Hypersystem
Island Evolution — WebGL Game
Island Evolution — WebGL Game
System — Visual Programming Language
Frontpack — Javascript Library
Frontpack — Javascript Library
Anydrive — Web App
Anydrive — Web App
Molecular Portraits — Photography
Molecular Portraits — Photography
Urban Geometry — Photography
Urban Geometry — Photography
Microbial Portraits — Photography
Microbial Portraits — Photography

System

Visual programming language · design and development · 2022

SYSTEM is a multimedia modeling tool, implemented as a visual programming language. It enables the modeling of complex processes using a simple, block-based interface. The platform itself, however, is not strictly visual: the elements produce a variety of outputs, including sounds, graphics, colors, and text.

Formal systems are composed of variables, relations, rules, and other logical components, collectively known as symbols. The primary purpose of the app is to translate these abstract symbols and concepts into a tangible form. This is achieved by enabling the user to interact with the various parameters and actively perceiving the changes that take place.

While the blocks all fulfil a specific function, they can be connected to synergistically solve goals and objectives. In other words, the user can create small programs, with a variety of use cases beyond the modeling of systems. For instance, the “synth” block can be used for experimental musical instruments, and the “formula” block can be incorporated into applications that require mathematical capabilities.

The open-ended design and sandbox environment encourage experimentation and exploration. This accessible approach stands in contrast to the more abstract representations of systems, such as those found in classical programming. Through this user-friendly focus, practical applications emerge in the fields of education, research, and prototyping. In summary, the innovative interpretation of complex systems creates an engaging and enjoyable cybernetic experience.

Launch Demo

Adding

The building blocks of the model are elements that interact with each other, forming the system. These blocks have different functions and purposes. Some serve as inputs, setting the system in motion. Others can output values in various ways. Additionally, there are blocks that can transform values, enabling the calculation of new states or the automation of processes.

These elements can be arranged on the workspace using drag-and-drop. It is recommended to start the system with an input block (such as “slider” or “power”) since all other blocks will output a value of 0 without prior input. Without an initial value, the system cannot be started!

System Manual

Connecting

Each block contains four pins that simultaneously serve as inputs and outputs. When you click on a pin, it connects to the adjacent block. The arrow indicates the direction of the signal. When elements are connected in this way, their own value (state) is passed on to all linked blocks as soon as one of them gets updated. The signal can be transmitted in both directions. A further click deletes the connection. Some blocks have labeled pins that fulfill different purposes. For example “formula” takes two input values: x and y, enabling you to perform a calculation using both values in the same formula.

System Manual

In addition to direct connections, the components can also be linked using cables. This allows distant elements to be connected as well. To create a cable connection, click on a pin, hold down the mouse cursor, and drag it to another pin. Cables can be deleted in the same manner as direct connections. When using cables, the alignment of the pins is of no concern. For instance, a top-facing pin could be connect with a side-facing one. Additionally, cables can bring more organization to the workspace since fewer blocks are needed, and the signal flow becomes more apparent.

System Manual

Automating

Processes can be automated using the “LFO” block (low-frequency oscillator). Once an initial value is provided to this element, it emits a signal pulsating at the speed provided by the input signal. It can also be used to modify acoustic signals or to animate symbols. Please note that an input element is essential, as without it, no modulation of the signal occurs, resulting in an output of 0.

System Manual

Removing

When you move the cursor to the upper right corner of a block, a button appears, enabling you to remove it from the workspace. Removing the block also deletes all connections, potentially altering the state of connected elements.

System Manual

Rearranging

Moving the cursor to the upper left corner of a block will cause a handle to appear, allowing you to rearrange elements on the workspace. Rearranging the elements does not affect the system or signal transmissions. To keep the workspace organized, it automatically switches between the two types of connections: a direct connection or a cable.

System Manual