Processing 1.0 - Processing Discourse

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › animation flow

‹ Previous Topic | Next Topic ›

Pages: 1

animation flow (Read 680 times)

animation flow
Dec 8^th, 2008, 8:57pm

Hi,

I'm working with algorithm to generate effects for 8x8 led panels. I've already done some simple effects that run as a loop but changing some parameters(position, rotations etc).

Now i'm interested to develop a kind of animations, i'd like to implement an algorithm that draw an animation, for example a man who walk for 5 seconds and fall down.

I think i already have understood the basic concepts behind the drawing and the space in processing but i still miss something about the flow.

Actually all my sketchs are using the draw() method in loop, changing the behavior by some counters, but how can i change the behavior of my algorithm with the time? Still i need to use counters and conditional blocks or there are other better and smart ways?

Q

WebDext

Re: animation flow
Reply #1 - Dec 9^th, 2008, 1:10am

It'd be pretty easy to do animation for 8*8 led panels, this will store the data and display the animation. You'll need some kind of slider at the bottom to itterate through the frames of the animation and allow the mouse cursor to set or unset pixels with a selected color. I leave that up to you!

Jack

Code:



class Frame
{
  public color m_pixels[][];
  public Frame()
  {
    m_pixels = new color[8][];
    for( int x=0; x<m_pixels.length; ++x )
    {
	m_pixels[x] = new color[8];
	for( int y=0; y<m_pixels[x].length; ++y )
	  m_pixels[x][y] = color(0,0,0);
    }
  }
}


Frame g_anim[];
int   g_nFrames = 0;
int   g_nFrame  = 0;

void setup()
{
  size( 128, 128 );
  
  // Keep in mind each frame is 8*8*4 bytes
  // so this 64 frame animation takes 16k of memory w/o 
  // taking into account all the internal references.
  g_anim = new Frame[64];
  for( int i=0; i<g_anim.length; ++i )
    g_anim[i] = new Frame();
  
  // Set pixels like so
  g_anim[0].m_pixels[4][4] = color(255,0,0);
  g_anim[1].m_pixels[3][3] = color(255,0,0);
  g_anim[2].m_pixels[2][2] = color(255,0,0);
  g_nFrames = 3;
  
  frameRate(g_nFrames);  
}

void draw()
{
  ++g_nFrame;
  g_nFrame %= g_nFrames;
  
  for( int x=0; x<8; ++x )
    for( int y=0; y<8; ++y )
    {
	fill( g_anim[g_nFrame].m_pixels[x][y] );
	rect( x*16, y*16, 16, 16 );
    }
}

Re: animation flow
Reply #2 - Dec 9^th, 2008, 8:06pm

no wait, i'm already at this point, the thing i don't understand is how manage the frames. for a "static" animation(mmm sounds pretty bad, i mean a stored animation) i just run all frames in sequence, but if i want to create something that changes everytime i run it the situation is completely different.

A good example could be a man who walk and when it receive a general parameter it changes its behavior(jumping? falling down? is the same).
My parameters could be everything, time(after 5 second?) sound(everytime i catch the kick drum?) or other controls(buttons, slider etc).

This example it's really simple and i could implement that we the basic knowledge i already got. Maybe try to think about an animation based on a soundtrack, i want to create something different when song play(start with a man walking alone to finish with a battle? yep, this one is pretty silly).

if you want, take a look to these videos, is that i'm actually up to, the first one is the sequencer, there i create my sequence synchronized with the soundtrack, basically are sequences of effects based on sound and some controls. The other software is the effect framework, pretty similar to the sequencer but without a lot of useless thing, this software is just to create and run effects, here i create my effects and animation to put in the sequence later. Basically everytime draw() is called i call another function getNextFrame(), all effects extend this class to define their own getNextFrame method.

http://www.vimeo.com/2342377
http://www.vimeo.com/2418993

ps: let me know if someone is interested to collaborate(better if in London but is not compulsory) or just take a look to the code. all code is on github.

Q

PhiLho

Re: animation flow
Reply #3 - Dec 9^th, 2008, 9:03pm

I think that for complex, deterministic animations (as opposed to repetitive or random ones), using a bunch of tests against time or frameCount is prone to be tedious, hard and prone to errors...
A better approach would be to define some kind of markup language (or just parameters in CSV, etc.), describing the animation. You read some file, parse it, and play the actions described there.

q Junior Member Offline Posts: 58	Re: animation flow Reply #4 - Dec 9^th, 2008, 10:14pm mmm ok sounds interesting, maybe still a little tedious, is the only one method? do you have some examples or code?

PhiLho

Re: animation flow
Reply #5 - Dec 10^th, 2008, 1:04pm

No, it is certainly not the only method...
And indeed, still tedious to do by hand.
So if you have lot of animation to do, beyond the base tests, you might want to code your own editor... at the extreme, you re-invent Flash! Wink

I was about to write I haven't examples to show, but actually I did something similar at Help for a newbi french student. For simplicity sake, I just used data hard-coded in the sketch, but reading from an external file isn't much more work.
Time is linear here, but it can be a parameter too.

Re: animation flow
Reply #6 - Dec 10^th, 2008, 2:27pm

I don't know, it still seems so far from what i need. I don't like to create frame by frame animations, is too long. But at the moment i don't have any ideas. If i want to create an animation like this http://www.vimeo.com/1871817(with lines instead bodies, something very simple), how can i do? frame by frame? can i define functions to run based on time?

ex. for the first 3 seconds move segmentA to position XY1, for the first 5 second move an ellipse into the position XY2, from the third and tenth second move segmentA to XY2 ecc...

sorry if i still ask for the same thing but is not clear at all, for now thanks for your help :]

Q

PhiLho

Re: animation flow
Reply #7 - Dec 10^th, 2008, 4:55pm

I never meant frame by frame (eg. a line of data per frame or per time unit)!
Actually, the last line of my previous message specifies that time can be a parameter.
And my wink at Flash wasn't fortuitous, you can use interpolation, tweening, easing, morphing, reverse kinematic, whatever tools that can reduce the amount of hand-generated information.
Perhaps you already know Shapetween. I haven't used it, but it is interesting.
Likewise, we can look at some existing libraries, even in other languages, like Flash ones: Singularity for 2D character skinning, or Robert Penner's Easing Equations.

PhiLho

Re: animation flow
Reply #8 - Dec 13^th, 2008, 2:50pm

Additional info: I think you want to do something like the cartoons available at la Cartoonerie (still Flash!). French site with an English version.
Example of mine (in French): Conte arabe.
The characters are like puppets, in (buggy) semi-3D, articulated and you can rotate them. If you move the trunk, for example, head and arms follow.
They designed an edit tool, still in Flash, allowing to move the elements along a timeline, with or without calculated transition.

I will add that there is (at least) a library to manage joints and constraints: JBox2D and its Processing wrapper BoxWrap2D (search this forum).

Being interested in the topic, I will make a sample proof of concept, simple and even simplistic.

Pages: 1

‹ Previous Topic | Next Topic ›