# Help creating simple animation

**URL:** <https://discourse.processing.org/t/help-creating-simple-animation/14089>\
**Category:** Beginners\
**Created:** [September 21, 2019, 12:31am UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089 "2019-09-21T00:31:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 21, 2019, 12:31am UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/1 "2019-09-21T00:31:39Z")

</div>

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.

```auto
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
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 21, 2019, 1:49am UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/2 "2019-09-21T01:49:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 21, 2019, 2:24am UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/3 "2019-09-21T02:24:48Z")

</div>

```auto
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
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 21, 2019, 8:10am UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/4 "2019-09-21T08:10:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 24, 2019, 7:39pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/5 "2019-09-24T19:39:13Z")

</div>

I guess I’ll try millis().

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 7:45pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/6 "2019-09-24T19:45:33Z")

</div>

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… 😉

Warm regards, Chrisir

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 24, 2019, 7:48pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/7 "2019-09-24T19:48:37Z")

</div>

Thank you!

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

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 24, 2019, 7:52pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/8 "2019-09-24T19:52:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 7:53pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/9 "2019-09-24T19:53:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 24, 2019, 7:53pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/10 "2019-09-24T19:53:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 7:54pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/11 "2019-09-24T19:54:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 24, 2019, 7:58pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/12 "2019-09-24T19:58:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 8:38pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/13 "2019-09-24T20:38:55Z")

</div>

> [@clpeng](#):
>
> I understand the millis() function but am not familiar with the structure used (…%6000 \< 3000).

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 8:48pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/14 "2019-09-24T20:48:34Z")

</div>

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

```auto

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
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2019, 9:05pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/15 "2019-09-24T21:05:12Z")

</div>

> [@clpeng](#):
>
> to understand where the 6000 came from & the relation to 60 FPS

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

---

<div class="post-metadata">

**Author:** ![clpeng](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@clpeng](https://discourse.processing.org/u/clpeng)\
**Post date:** [September 25, 2019, 7:58pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/16 "2019-09-25T19:58:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![unique\_username](https://avatars.discourse-cdn.com/v4/letter/u/a88e57/32.png) [@unique\_username](https://discourse.processing.org/u/unique_username)\
**Post date:** [November 24, 2019, 7:46pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/17 "2019-11-24T19:46:23Z")

</div>

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.

```auto
float s=0;
float w=0.0152;

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

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 24, 2019, 8:22pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/18 "2019-11-24T20:22:26Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![unique\_username](https://avatars.discourse-cdn.com/v4/letter/u/a88e57/32.png) [@unique\_username](https://discourse.processing.org/u/unique_username)\
**Post date:** [November 24, 2019, 8:26pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/19 "2019-11-24T20:26:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 24, 2019, 8:30pm UTC](https://discourse.processing.org/t/help-creating-simple-animation/14089/20 "2019-11-24T20:30:10Z")

</div>

> [@unique\_username](#):
>
> I made my timer with the intent of using it at different times

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.

> [@unique\_username](#):
>
> as far as I’m aware, you cannot change the value of frameCount at will

This is incorrect. Try it.

[Next page](https://discourse.processing.org/t/help-creating-simple-animation/14089.md?page=2)