Help creating simple animation

Processing Beginners
1

Trying to replicate a simple animation I did years ago in assembler. I want to draw a rectangle, display it for a set time, erase it, then draw another slightly larger rectangle, display for a time, erase, etc.

Thanks!

Here’s the code I’ve been using but it never draws the 1st rectangle.

void setup() {
  size(640,360);
}

void draw() {
  background(0); // create black background
 
fill(102); //set color to gray
rect(81, 81, 63, 63); // draw a rectangle

delay(3000); // wait 3 seconds

background(0); //Erase rectangle

fill(102); // gray again
rect(81, 81, 150, 150); // draw slightly larger rectangle

delay(3000); // wait 3 seconds

// Do it all over again
}
1 Like
2

Don’t use delay() . It is not the function you want. It does not do what you think it does. It is not useful in this situation. Do not use delay() . Do not use delay() . Do not use delay() . Do not use delay() . Do not use delay() .

Do not use delay() .

DO NOT-

You get the point.

Use millis() !

3 
void setup() {
  size(640, 360);
}

void draw() {
  background(0); // create black background
  fill(102); //set color to gray
  if ( millis()%6000 < 3000 ) {
    rect(81, 81, 63, 63); // draw a rectangle
  } else {
    rect(81, 81, 150, 150); // draw slightly larger rectangle
  }
}
3 Likes
4

Apart from delay:

The main point is that draw only updates the screen once at its end. Not throughout. So all drawing accumulate to one frame.

That’s different from older languages imo.

draw loops 60 times per second, so your animation should use this fact.

As has been shown, the timer uses this.

1 Like
5

I guess I’ll try millis().

This is just one of many reasons I hated being a programmer! Hardware is so much more logical.

1 Like
6

Not true…

Did you look at the examples on the website and within the processing ide?

It makes sense once you are used to it… :wink:

Warm regards, Chrisir

7

Thank you!

I need to go find out what “%” does. Oh, boy! Homework…

8

I spent hours trying many variations of the resources I could find & understand. I believe millis() was in there as well but obviously misapplied!

9

The % means modulo - Should be in the reference

It’s the remainder of a division.

Eg 7 % 3 = 1

because 3*2=6, rest 1

It’s often used as an abbreviation

10

I’m going to have to think about what you said as it’s not obvious to me. Thanks for the new direction.

11

millis() should be in the reference

It’s the time that passed since the start of the sketch (not the current time) measured in milli seconds

It is very useful to make measurements like how much time has passed since the start of the sketch or to make a timer or like in this case switch between two states

12

I understand the millis() function but am not familiar with the structure used (…%6000 < 3000).

Like I said I need to cogitate on this to understand where the 6000 came from & the relation to 60 FPS.

1 Like
13

Explanation:

millis() gets bigger all the time. Endlessly.

millis() % 6000 loops between 0 and 5999:

Once it reaches 5999, it jumps back to 0 and starts all over again (because it’s the remainder)

When we check this remaining value against > 3000 the result oscillates between true and false

Chrisir

1 Like
14

here is another way of achieving this using an explicit timer and a boolean variable isSmallRect that is set by the timer.

isSmallRect gets then evaluated to decide which rectangle to draw


int timer; 
boolean isSmallRect = true; 

void setup() {
  size(640, 360);
  // start timer
  timer = millis();
}

void draw() {
  background(0); // create black background
  fill(102); //set color to gray

  // timer to control isSmallRect 
  if ( millis() - timer > 3000 ) {
    // start timer  
    timer = millis(); 
    // toggle isSmallRect 
    isSmallRect = 
      ! isSmallRect; // the ! means not, so inverses the value of isSmallRect
  }

  // evaluate isSmallRect
  if (isSmallRect) {
    rect(81, 81, 63, 63); // draw a small rectangle
  } else {
    rect(81, 81, 150, 150); // draw slightly larger rectangle
  }
}
1 Like
15

The 6000 are milliseconds and half of it are 3000 milliseconds, so 3 seconds, so we switch every 3 seconds between the small and big rect.

Actually, it doesn’t have to do with the 60 FPS.

Since we use the millis() it would work with 30, 40, 60 or 100 FPS.

In fact you can try this by setting the frame rate to 33 or so: command frameRate(33);

16

Chrisir - thanks for all this info. I need to go back & rethink & redesign my code around all this new stuff.

1 Like
17

When I was starting out processing, I wanted to make a timer without all of the millis() stuff(which I still don’t understand well enough to use) and I came up with an interesting example of a design. No idea if this would work implemented in a game or not.

float s=0;
float w=0.0152;

void draw() {
background(204);
s+=w;
fill(0);
textSize(30);
text(floor(s),200,100);}
1 Like
18

Thanks for sharing this approach. Note that Processing already has a global frame count, frameCount. If you want to increase by n each frame, then you don’t need to store it in a global variable s if you don’t want to – the value is always equal to n*frameCount. So this is equivalent:

void draw() {
  background(204);
  fill(0);
  textSize(30);

  text(frameCount * 0.152, 200, 100);
}

Over a long time, this also avoids drift from accumulating floating point errors.

1 Like
19

Yes, I understand that frameCount can be used more accurately, but, as far as I’m aware, you cannot change the value of frameCount at will. I made my timer with the intent of using it at different times, starting at possibly different values, such as a timer starting at the beginning of a level and it being reset per the next one.

20

Great! Under those circumstances, yes, it certainly does make sense to store the start time as a global variable.

You may still want to consider using that start time in a multiplication-based rather than additive calculation – if you aren’t changing rates during a single run and care about precision, of course. For variable rates, additive is the way to go – or fixing the past value every time the rate changes.

This is incorrect. Try it.