Help creating simple animation

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

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() !

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

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

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

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

Thank you!

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

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

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

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

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

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

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

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

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);

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

1 Like