Members Members
Juggling with Dimensions
Mit Dimensionen jonglieren
Jongler avec les dimensions
A programmer from Brooklyn with the ordinary name of Patrick Smith, published an interactive ABC book called Metamorphabet.
Ein Programmierer aus Brooklyn, der den durchschnittlichen Namen Patrick Smith trägt, hat ein interaktives ABC-Buch publiziert.
Un programmeur basé à Brooklyn du nom ordinaire de Patrick Smith a créé un abécédaire interactif baptisé Metamorphabet.
The app itself is far less ordinary, from all point of views. Everything comes together perfectly, something that rarely happens. And then arrives the moment when the player reaches the letter J and long bendy arms begin to juggle with three colourful balls — this is when code becomes poetry.
Dieses virtuelle Buch ist jedoch alles andere als durchschnittlich. Alles verschmilzt auf eine perfekte Art und Weise, wie es nur ganz selten passiert. Und dann kommt dieser Moment, wo der Leser zum Buchstaben J gelangt und lange gebogene Arme mit drei farbigen Kugeln jonglieren — in diesem Moment wird Maschinensprache zur Poesie.
L'application elle-même est bien moins ordinaire, de tous points de vue. Dès la scène d'ouverture, le tout s’emboîte et s’ajuste parfaitement, donnant lieu à une sensation que l’on n’expérimente pas tous les jours. Arrive ensuite le moment où l’on atteint la lettre J et de longs bras articulés se mettent à jongler avec trois balles colorées — et le code devient poésie.
The characters you create are touching and yet their design is minimal, almost bare.

I don't use a lot of textured surfaces or shading because to me it's more interesting to communicate three-dimensional forms with flat shapes. I believe the brain takes a certain pleasure from decoding and extrapolating a 3D reality from a 2D image, so by minimizing superfluous detail you're inviting the viewer to help create the scene.

That means designing characters and objects that are readable as pure shapes. Motion helps a lot with that: for example, the way an object's silhouette changes as it rotates can fill a lot of information, so the viewer knows more about an object than they are seeing at any particular moment.

Deine Figuren sind visuell aufs Minimalste reduziert und trotzdem kann man sich stark identifizieren.

Ich benutze kaum Texturen oder Schattierungen, da es für mich interessanter ist, dreidimensionale Körper mit flachen Formen zu kommunizieren. Ich glaube daran, dass das Hirn eine gewisse Freude hat, ein 3D-Körper aus einem 2D-Bild zu extrapolieren, somit kann man durch das Weglassen von überflüssigen Details den Betrachter einbeziehen, um die Szene im eigenen Kopf zu generieren.

Das bedeutet auch Charakteren und Objekte zu gestalten, die als abstrakte Formen lesbar sind. Bewegung hilft dabei stark: wie beispielsweise die Kontour eines Objektes sich verändert während es sich rotiert kann viel Information enthalten, somit weiss der Betrachter im ganzen eigentlich mehr über ein Objekt, als es zu einem fixen Zeitpunkt preisgibt.

Ton travail est vraiment touchant alors que ton design est très minimal. Comment est-ce possible?

Je n’utilise pas de textures ni d’ombres parce que je pense qu’il est plus intéressant de communiquer des formes en 3D au travers de formes planes — le cerveau prend un certain plaisir à décoder et à extrapoler une réalité à partir d’une image 2D. En quelque sorte, tu invites l’observateur à participer à la création d’une scène. Mon défi est donc de concevoir des personnages qui sont lisibles en tant que formes en soi — le mouvement y aide beaucoup. En fin de compte, je pense que cela permet de plus facilement s’y identifier parce qu’il y a moins d’informations visuelles superflues et que le spectateur doit s’investir plus dans le processus visuel.
Talking about the importance of motion, the movements of your characters feel wonderfully organic despite that they have to follow a predefined set of rules.

I don't think the clarity of the rules is a barrier to an organic feeling — many everyday behaviors by supposedly-complex humans are fairly deterministic. It’s more about how you convey them. I try to find a simple and relatable motivation for a virtual being (for example, watching something), and then make its behavior feel seamless (no abrupt transitions between states) and with just enough detail (usually through how it moves) to make it feel real.

And I often like to include some kind of feedback loop to make it more interesting. The ostrich is a good example because it combines two fairly simple systems — the ostrich's behavior, and the ball's physics — into a single, unpredictable and (hopefully) playful system.

Du erwähnst die Wichtigkeit der Bewegung. Deine Figuren bewegen sich wunderbar organisch, obwohl sie einem vordefinierten Verhaltensmuster folgen müssen.

Ich denke nicht, dass die Klarheit der Verhaltensregeln ein Hindernis für natürlich wirkende Bewegungsabläufe sind. Viele Verhaltensmuster von Menschen im Alltag sind ja genau genommen auch ziemlich klar vorbestimmt. Es geht vielmehr darum, wie man diese übermittelt.

Ich versuche jeweils eine einfache und nachvollziehbare Handlung zu finden (zum Beispiel eine Figur verfolgt einen bewegenden Gegenstand mit den Augen), dann dieses Verhalten zu kopieren ohne dass man die Übergänge zwischen den verschiedenen Zuständen merkt (keine abrupte Wechsel) und schlussendlich kleine Details hinzufüge (üblicherweise in der Bewegung) um dieses organische und vertraute Gefühl zu kreieren.

Und oft mag ich es auch, einen Feedback-Loop zu integrieren, um das ganze noch interessanter zu machen. Die Szene mit dem Strauss ist ein gutes Beispiel, da es zwei sehr simple Mechanismen kombiniert – das Verhalten des Strausses und die Physik des Balls – die im Zusammenspiel ein komplexes und überraschendes System ergeben.

Les mouvements de vos personnages doivent suivre un ensemble très clair de règles prédéfinies, mais ils semblent néanmoins merveilleusement organiques.

Je ne pense pas que des règles claires soient une barrière — un grand nombre de comportements humains soi-disant complexes dans le monde réel sont en fait très simples à comprendre et à prédire. Il s’agit plutôt de définir une motivation claire et identifiable à un être virtuel (chasser ou regarder quelque chose, etc), faire en sorte que son comportement soit perçu comme fluide (en évitant les transitions abruptes entre les états), puis de l’étoffer avec juste assez de détails pour que l’on ait l’impression qu’il est réel.
We have no idea of how you managed to make this juggling interaction work. Can you explain how you did it?

Like most things I make, it's a number of simple systems layered on top each other. Fundamentally, juggling is about timing — the force a juggler gives each toss depends on nothing more than how long they need to keep that ball in the air. So, I started by simply working out the system (two hands, three balls) in terms of timing, without regard to mechanics or visuals.

Next I constructed a simple 2D physics system in which the velocity of each toss is dictated by that timing engine. And then, because I wanted the user to be able to interrupt the process by catching balls and tossing them, I added feedback from the physics model back into the timing model — a ball tossed by the user has to be either ignored (it's too hard to catch) or integrated into the timing routine. So, that's where a lot of the complexity happens.

And finally, on top of the 2D engine, I built the three-dimensional structure of the arms, the balls, etc. This layer is primarily visual — all the physics is still occuring two-dimensionally — so while the end result may look like a 3D physics simulation, it actually begins from the opposite direction, with each layer of visual complexity built upon a simpler model.

Wir haben keine Ahnung wie du diese Jonglier-Szene hingebracht hast. Kannst du uns erklären wie sie funktioniert?

Wie bei den meisten meiner Arbeiten sind es mehrere simple Systeme, die aufeinander aufbauen. Im Grunde gehts beim Jonglieren ums Timing – die Kraft, mit der der Jongleur jeden einzelnen Ball wirft, ist einzig davon bestimmt, wie lange der Ball in der Luft bleiben soll. Deshalb hatte ich zuerst ein System für das Timing (zwei Hände, drei Bälle) entwickelt, ohne dabei die Mechanik oder das Visuelle zu beachten.

Danach konstruierte ich eine einfache 2D Physik-Engine, in der die Geschwindikeit jedes Wurfes von diesem Timing-System diktiert wurde. Und dann, weil ich wollte dass der User durch das Spielen mit den Bällen den Prozess unterbrechen kann, habe ich ein Feedback von der Physik-Engine zurück ins Timing-System eingebaut. Ein Eingriff des Users soll entweder ignoriert (zu schwierig zu fangen) oder in den Timing-Ablauf integriert werden. Und da passiert dann die meiste Komplexität.

Und schlussendlich baute ich die dreidimensionale Struktur der Arme und Bälle auf der 2D Engine auf. Diese Schicht ist rein visuell, die ganze Logik passiert in 2D. Schlussendlich scheint die Szene eine dreidimensionale Physik-Engine zu sein, aber eigentlich sind es einfach verschiedene einfache Abläufe, die aufeinander aufbauen und somit diese Komplexität entfalten.

On n’a aucune idée de comment tu as réussi à faire fonctionner l’interaction de ce jonglage. Est-ce que tu pourrais nous expliquer comment tu as fait?

Comme dans la plupart de mes travaux, j’ai superposé un certain nombre de systèmes simples. Jongler relève fondamentalement du timing, et le timing dicte la physique — la vitesse qu’un jongleur donne à chaque lancer dépend du temps qu’il veut que la balle reste en l’air. Je commence donc à travailler sur la procédure (deux mains, trois balles) en termes de synchronisation, sans tenir compte de la physique ni des visuels.

Puis, il a fallu construire un système physique en 2D dans lequel la vitesse de chaque lancer est dictée par le moteur de synchronisation. Pour finir, en plus de cela, j’ai construit la structure tridimensionnelle des bras, des balles, etc — mais toute la physique se passe toujours sur un plan 2D. Donc même si le résultat final peut donner l’impression d’être une espèce de physique en 3D, ça commence en fait de la direction opposée.

Bien sûr, c’est un peu plus complexe que ça parce que je voulais que l’utilisateur puisse interrompre le processus. Il y a donc du feedback dans le modèle de synchronisation depuis le modèle physique — une balle lancée par l’utilisateur peut soit être ignorée (trop difficile à attraper) ou intégrée dans la routine de synchronisation. Et c’est là que se trouve une grande partie de la complexité.

Blue Garden (2006), oil on canvas
Blue Garden (2006), Öl auf Leinwand
Blue Garden (2006), peinture à l'huile sur canevas
You're also a painter. Does that influence how you think about three-dimensional contents on a 2D layer such as a canvas or a screen?

Certainly — I always try to consider how whatever is onscreen reads as a composition: How it guides your eyes, how it reads as an arrangement of shapes, how the colors relate, etc, and how all of those things are in tension and in harmony with the image itself. Everyone is affected but these things when they look at an image, and I think as an artist it’s useful to be conscious of how they work and to be able to analyze them when necessary, even if your approach is primarily intuitive.
Du bist auch Maler. Beeinflusst das wie du über dreidimensionale Inhalte auf einer zweidimensionalen Ebene, wie einer Leinwand oder einem Bildschirm, denkst?

Natürlich – ich versuche was auf dem Bildschirm passiert immer als Komposition zu verstehen: Wie bewegt sich das Auge darüber, wie die Formen arrangiert sind, wie sich die Farben relativieren ect. Und all diese Elemente sind in Spannung oder Harmonie mit dem Bild selbst. Der Betrachter ist immer von diesen Dingen beeinflusst, und ich denke als Künstler hilft es sich bewusst mit diesen Fragen zu beschäftigen, auch wenn der Ansatz primär intuitiv ist.
Tu es aussi artiste peintre. Est-ce que cela influence la manière dont tu penses les contenus tridimensionnels sur une surface 2D, que ce soit un canevas ou un écran?

Certainement! J'ai étudié la peinture à l'école et je garde toujours un œil ouvert sur la manière dont ce qui est à l'écran se lit à la fois comme une composition plane et un espace. Mon système 3D est vraiment né du besoin de trouver un procédé pour dessiner ce qui autrement serait bi-dimensionnel (que je puisse ensuite faire pivoter dans différentes directions, etc). La raison principale pour laquelle je reste fidèle à mon système plutôt que de migrer vers un “vrai” framework 3D comme Unity est que je trouve plus amusant d’approcher la 3D comme étant une illusion produite par des formes plates sur un écran et non comme une réalité vue à travers une caméra.
Can you tell us more about your engine and why you created it?

My 3D framework originated back when Flash was really too slow to do any kind of intensive “real" 3D. But I found I could cut a lot of corners by working out the final screen (projected) geometry of primitive solids, instead of building them out of dozens of polygons.

For example, a cone in my system is just a circle and a triangle, scaled, rotated and positioned correctly so that it looks right — exactly how you would build it out of cut paper. And that's basically the system I still use — building forms out of the simplest visual components possible.

For the iOS and Android versions of my games, I've built Flash-like vector-drawing engines in C and Java, as well as a code converter that turns my Actionscript into the either platform's native language.

Kannst du uns mehr über deine eigene Engine erzählen und warum du sie entwickelt hast?

Mein 3D-System kommt ursprünglich aus der Flash-Zeit. Da Flash aber damals zu langsam für "richtiges" 3D war, habe ich eine eigene Logik entwickelt, die viele Vereinfachungen vornimmt. Ich nehme dafür simple Grundformen und transformiere sie, anstatt mit vielen Polygonen zu arbeiten.

Ein Trichter wird in meinem System beispielsweise einfach mittels Kreis und Dreieck dargestellt, die so rotiert und verbogen werden bis es passt – genau wie wenn der Trichter aus Papier gemacht wäre. Und das ist im Grunde immer noch das System das ich heute benütze – Formen werden aus den einfachsten visuellen Komponenten zusammengebaut.

Für die iOS und Android-Versionen meiner Spiele have ich in C und Java eine Flash-artige Vektorenzeichnungs-Engine gebaut, sowie auch einen Code-Übersetzer womit mein Actionscript in die jeweilige native Computersprache übersetzt wird.

Peux-tu nous en dire plus sur ton moteur et pourquoi tu l’as créé?

J'ai commencé par écrire mon propre framework 3D pour Flash, à l’époque où Flash était tellement lent qu’il ne pouvait même pas faire de la 3D. Pour que ça fonctionne, je prends beaucoup de raccourcis en travaillant sur la géométrie visuelle des solides primaires au lieu de les construire à base de polygones.

Par exemple, dans mon sytème, un cône est simplement un cercle et un triangle qui sont mis à l’échelle, pivotés et positionnés de la bonne manière. Encore une fois, c’est un moyen de tromper le cerveau de l’observateur en lui faisant créer trois dimensions avec une quantité d’information minimale (et du traitement CPU). En essence, c’est le système que j’utilise encore, bien que j’utilise maintenant des polygones pour construire certains types de formes. Tout le monde ne travaille probablement pas comme ça, mais ça correspond à ma sensibilité visuelle.

Juggle now! (Flash required)
Jonglieren! (Flash benötigt)
Jonglez maintenant!
Artworks
Patrick Smith
2016 – 5 – 10
Hinderling Volkart Microsoft Greenliff