TWEENER

Have you ever described an animation by moving your hand? The speed of an element with an onomatopeia?
Tweener transforms human motion and sound to digital transitions, and allows you to use them in your code and designs.
It is an opensource tool (we are still working on it) and will be soon in github!

Hover on the following squares, to see how they react!

Click on the following squares, to see how they react!


Avatar
Hello World
Avatar
Hello World
Avatar
Hello World
Avatar
Hello World
Avatar
Hello World
Avatar
Avatar
Hello World
Avatar
Hello World

INTRODUCTION

Look at these interactions, do they seem familiar? They are based on transitions! Digital transitions are everywhere. They constantly appear in our devices, websites or applications. The speed of an animation, the color of a button when hovering on it or how a sound disappears are determined by transitions.

Transitions are generally used in different aspects of design, music production or web development. These transitions are constantly around us when we use or interact with our devices.

These transitions are generally generated by keyframe based environments or by the use of mathematical functions that determine the desired attribute.

Look at these interactions, do they seem familiar? They are based on transitions! Digital transitions are everywhere. They constantly appear in our devices, websites or applications. The speed of an animation, the color of a button when hovering on it or how a sound disappears are determined by transitions.

Transitions are generally used in different aspects of design, music production or web development. These transitions are constantly around us when we use or interact with our devices.

These transitions are generally generated by keyframe based environments or by the use of mathematical functions that determine the desired attribute.

PROBLEM

Ease-in, Ease-out, linear... We all know those words, which define our transitions in our designs. These tweens often lead to ordinary aesthetics, because of their redundancy.

However, the quality of such a transition can be improved by introducing imperfections, irregularities and unexpected details.

SOLUTION: TWEENER

In order to achieve this variety, we propose the Tweener to create transitions with organic inconsistencies, generated by the human body.

The project tweener discusses the contribution of natural physical expression in different aspects of digital design. Our interactive tool invites the user to generate data by movement or sound to define unique tweens based upon the recorded behaviour.

Incoming motion from the mouse, sounds or moves captured by a camera system are potential sources of data. This data is fitted into a smooth function, which can be exported to a majority of programming languages for generative design. Hence, the tweener invites to share natural, organic and adjustable transformations across different platforms and environments.

Our interaction model provokes rapid prototyping and offers different preview scenes to encourage the user to create, iterate and refine.

HOW TO?
1. CREATE

Record your mouse, your 3d motion or sound and visualize the curves you created.

2. PREVIEW

Edit and preview your tweens in gradients, particles or loading icons.

Gradients will show how black changes to white according to how fast you moved or increased your voice. It also allows to pippet colours from your screen, and visualize how the transition between them would become according to your tween.

3. EXPORT

Select your preferred programming language and right click to export your function. Paste it in your code and see how your transitions became unique.

USE CASES

At the studio, we tried to imagine movement using sounds with our voice and onomatopeias. Interprete these sounds, as well as turning them into transitions or animations in a screen is a hard task. With the tweener, we could easily interact and perform these transition, by directly using those sounds, or any other movement.

Personalized welcome graphics according to the speed of you finger when unblocking your phone, or the way one screen swipes to another and turns off. Tweener allows to record movement and sound, and then translates them to transitions. These transitions can be used as synesthesias, of how sound can became motion in an animation. How our unique way of moving could condition the behaviour of our devices, making them adjust to recreate and perform the way we tought them to.

ENGINEERING

Tweener is fully developed in Processing, together with GLSL and Java libaries. It gets the transitions upon the recorded data using a polynom fitter that provides a 8th grade polynom, offering high accuracy over every performance. Given a set of data, these methods, try to find a mathematical function that fits the given values, as a polynom. The higher the grade of the polynom is, the higher level of detail the function provides. This means, the function adjusts more accurately to the values of the recorded values.

.

To find the library that gave us a better performance, we tested several polynom fitters, where we could easily test and debug every fitter. We developed a little tool that allows to easily change the grade of the algorithm, the amount of provided values, and the different solutions from the fitter algorithms.

As we can see, in low grade polynoms, we can't get good accuracy, and once we go over a threshold, the polynom gets shaky and loses quality. Therefore, we set the grade of the polynom on 8, choosing a libary based on the the Least squares method.

Function in HLSL:
float getFunction(float x){
x = abs(x);
float y = 1.415371*x-55.847927 *x*x+600.5674 *x*x*x-2548.2625*x*x*x*x+5369.1143*x*x*x*x*x-5978.4795 *x*x*x*x*x*x+3371.68*x*x*x*x*x*x*x-759.1871*x*x*x*x*x*x*x*x;
return y; }

LINKS

Soon on github!

DETAILS

YEAR
2017

CATEGORY
Generative design, design tools

COMPANY
Waltz Binaire

Back to projects