Making Things Move!

Claudio Midolo

Timato - Time Animato

timato intro

I have an old tv, a gift from a friend of mine. As I don't watch it anymore I'm using it as a second monitor. When I was working on the algo assignments I frequently used it to test the animation I was creating noticing how more powerful it was compared to my mac screen. The colors were more vivid and bright. I was thinking:"I will use it for some project, some day..." Then the final project assignment came and suddenly I remembered the old tv.

timato intro

I was wondering: "What can I do with a tv and one servo motor? The tv is good for colors and light, the servo to precisely rotate something on command." In my mind the combination of precise rotation, colors and light made emerge the idea of a clock, a strange clock, which would show you time not with numbers but with animations! It didn't need to be super precise but relaxed and beautiful, so finally I decided to build the first version of it, here's my process:

timato mask

timato mask

First of all I started building the mask that had to cover part of the sceeen, with a hole to let the animation pass through. Cardboard was my material of choice.

timato mask

timato mask

timato mask

timato mask

When the mask was ready I had to build a support the servo motor could be attached to in order to let it be the rotation pivot point of the mask. I used wood to accomplish this step.

timato support

timato support

timato support

timato support

timato support

The next step was to connect the Arduino 2009 to the servo motor and to the computer in order to test the servo control application in openFrameworks + Firmata.


Algorithmic animation - Timato firmata from Claudio Midolo on Vimeo.

As OF + Firmata + Servo was working I went on mapping the physical rotation of the mask to the non physical rotation of the graphics on screen. I used polar coordinates and many trials and errors to find out the best value for each parameter (centerX, centerY, radius...)


Algorithmic animation - Timato - Physical - Non physical rotation mapping from Claudio Midolo on Vimeo.

As I wanted to be free to draw anything I wanted without worrying too much about the actual position of the mask I decided to follow the following approach:

Draw the animation in the top left corner of the screen, over a limited area.

Grab the animation render using grabScreen() and put it into an image.

Hide the animation in the top left drawing a black opaque rectangle on top of it.

Draw the image containing the animation render below the mask hole.


Algorithmic animation - Timato - Grabscreen from Claudio Midolo on Vimeo.

Up to this point I was controlling the movement of the servo motor using the potentiometer, for testing purposes. But I was building a clock, so the rotation of the servo motor needed to be controlled by time. In order to accomplish this I created a simple graphical interface to deal with this new dimension. As the servo motor was able to rotate from 0 to 180 degrees and not to cover the whole 0 to 360 degrees range I decided to arrange time over an half circle.

timato support

timato support


Algorithmic animation - Timato - Time mapping from Claudio Midolo on Vimeo.

The time control mechanism would work this way:

I grab the current hours using ofGetHours(), convert it in seconds

Grab current minutes using ofGetMinutes(), convert them in seconds

Grab current seconds using ofGetSeconds(), sum hours(sec)+minutes(sec)+seconds

This value would be the variable seconds, the amount of seconds passed since 00.00.

In update() I add one to seconds if the current value of ofGetSeconds() is different from that sampled the previous frame.

Then I normalize seconds over the total number of seconds in one day 24*60*60 getting a value between 0.0 and 1.0. Finally I remap that value to 0 - 23 for the hours to be displayed and to control the animation index (which animation to play for each hour), and to 0 - 180, the angle needed to control the rotation of the servo.


Algorithmic animation - Timato - Clock test from Claudio Midolo on Vimeo.


Algorithmic animation - Timato - Clock Animato 1 from Claudio Midolo on Vimeo.


Algorithmic animation - Timato - Clock Animato 2 from Claudio Midolo on Vimeo.

Due to time constrains I wasn't able to create 24 simple algorithmic animations, which was my initial aim. I decided for now to have two animations, one for day time (from 6am to 6pm) and one for night time (from 6pm to 6 am). The first is inspired by dawn when light is of the color of gold. The second is inspired by NYC nightlife, full of movements and synthetic colors in the dark. As paradoxical as it may sound I hope to have time to go on building this clock, as I'm loving it as I see it as a good interface to show time in a less mechanical, producative and more magical, playful way.

------------------------------------------------------------------------------------------------

The robocontroller I built some weeks ago was very useful to quickly prototype the Timato clock, I include the Robocontroller sources as well.

Ciao!!! Buon Natale e buon Anno!!!

SOURCE ->

Assignment 8

a) Lego simple machine: the pulley

motion schema


openFrameworks + Firmata - First test Pulley from Claudio Midolo on Vimeo.


b) Lego simple machine animation: linear motion light animation

motion schema


openFrameworks + Firmata - Linear motion ,Light animation from Claudio Midolo on Vimeo.

Assignment 7

a) Control Panel - ROBOCONTROLLER

motion schema

motion schema


openFrameworks + Firmata + Arduino - ROBOCONTROLLER from Claudio Midolo on Vimeo.

Assignment 5

a,b,c,d) Boom!


Boom! from Claudio Midolo on Vimeo.

SOURCE ->

Assignment 3

a,b,d,f) AddiCtive Bolero


AddiCtive Bolero from Claudio Midolo on Vimeo, turn the speakers to MAX! ;)

 

A tribute to John Whitney and Maurice Ravel

 

This is the shema of the logic behind the motion of each object. All the objects rotate around a global pivot point around which rotates a local pivot point around which rotate the pigments pivot point around which, finally, rotate the actual colored circles in red, green and blue, the pigments.

 

motion schema

 

When they are overlapped they produce white, thanks to the additive blending mode enabled in OPENGL. During the initial phase of the composition they are all overlapped, with the various radii of rotations (global, local and pigment) set to 0. While the piece goes on modulations are applied to many different parameters in order to create all the animations.

SOURCE ->

c) Light and Water


Algorithmic animation - Light and Water from Claudio Midolo on Vimeo.

SOURCE ->

e) Confused xeno invaders


Algorithmic animation - Confused xeno invaders from Claudio Midolo on Vimeo.

SOURCE ->

Assignment 2

a) Fastest non moving speed

Algorithmic Animation - Making things move

SOURCE ->

b) Fastest still perceptible speed

Algorithmic Animation - Making things move

SOURCE ->

c) Click to change pta and ptb

Algorithmic Animation - Making things move

 

Thinking about this specific kind of animation, I came up with another piece of code to accomplish the same result.

1st version SOURCE ->

2nd version SOURCE ->

 

d) Shaper controlls something else besides position

Algorithmic Animation - Making things move

SOURCE ->

e) Multiple xenos

Algorithmic Animation - Making things move

SOURCE ->

f) Multiple xenos trail

Algorithmic Animation - Making things move

SOURCE ->

Assignment 1

a) Videos of linear and nonlinear motion

temp here

b) Flip book


PIRO Flipbook from Claudio Midolo on Vimeo.

 

Flipbook - Piro