Processing 1.0 - Processing Discourse - Begginer help on animation

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 › Begginer help on animation

‹ Previous Topic | Next Topic ›

Pages: 1

Begginer help on animation (Read 573 times)

M1KES

Begginer help on animation
Sep 28^th, 2008, 5:43am

Hi.. I need help animating a stickman without resorting to gifs.

For example.. i want the first frame to show:

void setup() {
size(100,500);
background(255);
frameRate(30);
}

void draw() {
background(255);
ellipse(50, 25, 30, 30);
line(50, 80, 70, 100);
line(50, 80, 30, 100);
line(50, 80, 50, 40);
line(50, 50, 30, 30);
line(50, 50, 70, 30);
line(0, 490, 100, 490);
}

then to:

void setup() {
size(100,500);
background(255);
}

void draw() {
background(255);
ellipse(50, 55, 30, 30);
line(50, 110, 70, 130);
line(50, 110, 30, 130);
line(50, 110, 50, 70);
line(50, 80, 30, 70);
line(50, 80, 70, 70);
line(0, 490, 100, 490);
}

then to:

void setup() {
size(100,500);
background(255);
}

void draw() {
background(255);
ellipse(50, 85, 30, 30);
line(50, 140, 70, 160);
line(50, 140, 30, 160);
line(50, 140, 50, 100);
line(50, 110, 30, 110);
line(50, 110, 70, 110);
line(0, 490, 100, 490);
}

and so on...
I want it to go frame by frame..
Can someone help me please!

Stephen

Re: Begginer help on animation
Reply #1 - Sep 28^th, 2008, 12:29pm

Hi, as far as I know, setup() is only called once, then draw is called 60 times (or whatever you told it to in frameRate) a second. Now, I'm not sure what effect having multiple setup and draw methods would have, but I suspect it will either not work at all or ignore all bar the first setup and draw methods.

You need to make the draw method contain logic code which knows what frame of the animation you are on and draws the appropriate lines:

int frame;
int totalFrames = 3;

void setup()
{
size(100,500);
frameRate(3);
}

void draw()
{
background(255);
switch(frame)
{
case 0: ellipse(50, 25, 30, 30);
line(50, 80, 70, 100);
line(50, 80, 30, 100);
line(50, 80, 50, 40);
line(50, 50, 30, 30);
line(50, 50, 70, 30);
line(0, 490, 100, 490);
break;

case 1: ellipse(50, 55, 30, 30);
line(50, 110, 70, 130);
line(50, 110, 30, 130);
line(50, 110, 50, 70);
line(50, 80, 30, 70);
line(50, 80, 70, 70);
line(0, 490, 100, 490);
break;

case 2: ellipse(50, 85, 30, 30);
line(50, 140, 70, 160);
line(50, 140, 30, 160);
line(50, 140, 50, 100);
line(50, 110, 30, 110);
line(50, 110, 70, 110);
line(0, 490, 100, 490);
break;
}
frame++;
if(frame == totalFrames)
frame = 0;
}

OR

One method you could try if you know about classes and OO programming is to create a animation class which encapsulates an abstract method draw(int frame). Then subclass that with a stick insect man who has a (long and probably ugly) series of if(frame == 1) etc. lines each showing the appropriate lines. Note there will be no nice tweening when you do this, and you would need extra code to make the animation look seemless.

The only reason I would go the abstract route is so that you could have other animations later on with less work, if this is the only animation you intend doing, avoid the abstract class stuff.

Regards,

Stephen

OO Version:
Quote:

StickMan sticky = new StickMan();

void setup()
{
  size(100,500);
  frameRate(3);
}

void draw()
{
  background(255);
  sticky.draw();
}

class StickMan
{
  int frame;
  int totalFrames = 3;

  void draw()
  {
    switch(frame)
    {
      case 0: ellipse(50, 25, 30, 30);
               line(50, 80, 70, 100);
               line(50, 80, 30, 100);
               line(50, 80, 50, 40);
               line(50, 50, 30, 30);
               line(50, 50, 70, 30);
               line(0, 490, 100, 490);
               break;

      case 1: ellipse(50, 55, 30, 30);
               line(50, 110, 70, 130);
               line(50, 110, 30, 130);
               line(50, 110, 50, 70);
               line(50, 80, 30, 70);
               line(50, 80, 70, 70);
               line(0, 490, 100, 490);
               break;

      case 2: ellipse(50, 85, 30, 30);
               line(50, 140, 70, 160);
               line(50, 140, 30, 160);
               line(50, 140, 50, 100);
               line(50, 110, 30, 110);
               line(50, 110, 70, 110);
               line(0, 490, 100, 490);
               break;
    }
    frame++;
    if(frame == totalFrames)
      frame = 0;
  }
}

M1KES YaBB Newbies Offline Posts: 19	Re: Begginer help on animation Reply #2 - Sep 28^th, 2008, 6:19pm Thank you so much Stephen. That 1st bit of code is just what i needed. The 2nd version is a little too advanced for me. Thanx again.

Stephen YaBB Newbies Offline Posts: 31	Re: Begginer help on animation Reply #3 - Sep 28^th, 2008, 6:21pm No problem. Stephen

M1KES

Re: Begginer help on animation
Reply #4 - Sep 29^th, 2008, 8:03am

Hey Stephen.. if its not too much to ask..

why doesnt this method work:

int x = 0;
int y = 10;

void setup()
{
size(100,500);
frameRate(9);
}

void draw()
{
if( x == 0) {
background(255);
ellipse(50, 25, 30, 30);
line(50, 80, 70, 100);
line(50, 80, 30, 100);
line(50, 80, 50, 40);
line(50, 50, 30, 30);
line(50, 50, 70, 30);
line(0, 490, 100, 490);
x++; }

if( x == 1) {
background(255);
ellipse(50, 55, 30, 30);
line(50, 110, 75, 130);
line(50, 110, 25, 130);
line(50, 110, 50, 70);
line(50, 80, 30, 70);
line(50, 80, 70, 70);
line(0, 490, 100, 490);
x++; }

if( x == 2) {
background(255);
ellipse(50, 85, 30, 30);
line(50, 140, 80, 150);
line(50, 140, 20, 150);
line(50, 140, 50, 100);
line(50, 110, 30, 110);
line(50, 110, 70, 110);
line(0, 490, 100, 490);
x++; }

if( x == 3) {
background(255);
ellipse(50, 115, 30, 30);
line(50, 170, 75, 190);
line(50, 170, 25, 190);
line(50, 170, 50, 130);
line(50, 140, 30, 150);
line(50, 140, 70, 150);
line(0, 490, 100, 490);
x++; }

if( x == 4) {
background(255);
ellipse(50, 145, 30, 30);
line(50, 200, 70, 220);
line(50, 200, 30, 220);
line(50, 200, 50, 160);
line(50, 170, 30, 190);
line(50, 170, 70, 190);
line(0, 490, 100, 490);
x++; }

if( x == 5) {
background(255);
ellipse(50, 175, 30, 30);
line(50, 230, 65, 250);
line(50, 230, 35, 250);
line(50, 230, 50, 190);
line(50, 200, 30, 210);
line(50, 200, 70, 210);
line(0, 490, 100, 490);
x++; }

if( x == 6) {
background(255);
ellipse(50, 205, 30, 30);
line(50, 260, 60, 280);
line(50, 260, 40, 280);
line(50, 260, 50, 220);
line(50, 230, 30, 230);
line(50, 230, 70, 230);
line(0, 490, 100, 490);
x++; }

if( x == 7) {
background(255);
ellipse(50, 235, 30, 30);
line(50, 290, 55, 330);
line(50, 290, 45, 330);
line(50, 290, 50, 250);
line(50, 260, 30, 250);
line(50, 260, 70, 250);
line(0, 490, 100, 490);
x++; }

if( x == 8) {
background(255);
ellipse(50, 265, 30, 30);
line(50, 320, 60, 340);
line(50, 320, 40, 340);
line(50, 320, 50, 280);
line(50, 290, 30, 270);
line(50, 290, 70, 270);
line(0, 490, 100, 490);
x++; }

if( x == 9) {
background(255);
ellipse(50, 295, 30, 30);
line(50, 350, 65, 370);
line(50, 350, 35, 370);
line(50, 350, 50, 310);
line(50, 320, 30, 310);
line(50, 320, 70, 310);
line(0, 490, 100, 490);
x++; }
}

if(x == y) {
x = 0;}
}

fjen

Re: Begginer help on animation
Reply #5 - Sep 29^th, 2008, 9:20am

either put the x++ after the last if-statement or use if () {} else if () {} ..

the reason for that is for example if x == 0 then it will enter the first if-clause and at the end of it increments x by 1. now processing checks with the next one and there the statement x == 1 is true as well. it will enter the clause increment x and so on ...

F

Pages: 1

‹ Previous Topic | Next Topic ›