# Problem with bouncing numbers

**URL:** <https://discourse.processing.org/t/problem-with-bouncing-numbers/21098>\
**Category:** Coding Questions\
**Created:** [May 20, 2020, 2:44pm UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098 "2020-05-20T14:44:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kukukoks](https://avatars.discourse-cdn.com/v4/letter/k/9fc29f/32.png) [@kukukoks](https://discourse.processing.org/u/kukukoks)\
**Post date:** [May 20, 2020, 2:44pm UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098/1 "2020-05-20T14:44:41Z")

</div>

Hi need help with this. I have 6 png and all of them load to program and they count from 0 to 5. What to do after that count down from 5 to 0, i mean 0,1,2,3,4,5,4,3,2,1,0

```auto
PImage[] zdjecia=new PImage[6];
int i=0;

void setup()
{
  size(200, 200);
  frameRate(2);

  zdjecia[0]=loadImage("zdjecie0.jpeg");
  zdjecia[1]=loadImage("zdjecie1.jpeg");
  zdjecia[2]=loadImage("zdjecie2.jpeg");
  zdjecia[3]=loadImage("zdjecie3.jpeg");
  zdjecia[4]=loadImage("zdjecie4.jpeg");
  zdjecia[5]=loadImage("zdjecie5.jpeg");
}

void draw()
{
  image(zdjecia[i], 0, 0, 200, 200);
  if (i<=5) i++;
}

```

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [May 20, 2020, 2:51pm UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098/2 "2020-05-20T14:51:17Z")

</div>

You need to know to what direction numbers are changing to. You could use

```auto
boolean up = true;

```

and add ‘if(up) {i++;}’

when i is five you would set `up = false;` in else part of if(up) you decrease i instead of increasing it.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 20, 2020, 11:02pm UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098/3 "2020-05-20T23:02:00Z")

</div>

Have you tried using subset() to eliminate second use of 5, and then reverse() in the array functions?

---

<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:** [May 27, 2020, 4:12am UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098/4 "2020-05-27T04:12:11Z")

</div>

Another approach: a bouncing number is also called a triangle wave.

> **[Triangle wave](https://en.m.wikipedia.org/wiki/Triangle_wave)**
>
> A triangular wave or triangle wave is a non-sinusoidal waveform named for its triangular shape. It is a periodic, piecewise linear, continuous real function.
> Like a square wave, the triangle wave contains only odd harmonics. However, the higher harmonics roll off much faster than in a square wave (proportional to the inverse square of the harmonic number as opposed to just the inverse).
> It is possible to approximate a triangle wave with additive synthesis by summing odd harmonics of the funda...

Start with a sawtooth wave:

int counter = 0;  
max = 6;

counter++;  
sawtooth = counter%(max+1);

0 1 2 3 4 5 6 0 1 2 3 4 5 6 0 1 2 3 4 5 6

Now double the ramp length, then fold each in half to make down ramps.

triwave = abs((counter%(max\*2))-max);

0 1 2 3 4 5 6 5 4 3 2 1 0 1 2 3 4 5 6 5 4 3 2 1

For any counter x, this gives you the position on a triangle wave.

p5.js demo of concept

https://editor.p5js.org/jeremydouglass/embed/fE0UWUEg_

---

<div class="post-metadata">

**Author:** ![erkosone](https://avatars.discourse-cdn.com/v4/letter/e/ba9def/32.png) [@erkosone](https://discourse.processing.org/u/erkosone)\
**Post date:** [May 27, 2020, 10:41am UTC](https://discourse.processing.org/t/problem-with-bouncing-numbers/21098/5 "2020-05-27T10:41:56Z")

</div>

Hi!  
This is a solution 😉

> **[testAnimation.zip](https://www.dropbox.com/s/of29h7mblxvigv6/testAnimation.zip?dl=0)**
>
> Shared with Dropbox

The code:

```auto
// Animation example by: Luis lopez martinez. 27/05/2020.
// luislopezmartinez1979@gmail.com
// UTILS_gameLibZero is a litle part of game engine called "gameLibZero" for processing.
// Enjoy it!

int st = 0; // main state machine..
PImage[] img; // images for game..

int[] seq_00 = {0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5}; // animation sequence..
int[] seq_01 = {5,5,5,5,4,4,4,4,3,3,3,3,2,2,2,2,1,1,1,1,0,0,0,0}; // animation sequence..
int anima = 0; // animation iterator..
//------------------------------------------------------------------------------------
void setup(){
    size(640, 360);
    img = loadImages("images");
}
//------------------------------------------------------------------------------------
void draw(){
    background(0);
    switch(st){
        case 0:
            if(key(_LEFT)){
                anima = (anima+1)%seq_00.length;
                screenDrawGraphic(img[seq_00[anima]], 320, 180, 0, 100, 100, 255);
            }
            if(key(_RIGHT)){
                anima = (anima+1)%seq_01.length;
                screenDrawGraphic(img[seq_01[anima]], 320, 180, 0, 100, 100, 255);
            }
            
            if(!key(_LEFT) && !key(_RIGHT)){
                screenDrawGraphic(img[0], 320, 180, 0, 100, 100, 255);
            }
            break;
        case 10:
            
            break;
    }
}
//------------------------------------------------------------------------------------

```

This code includes a litle collection of minimal function set to draw graphics easy on screen and check multi key system 😉  
Enjoy it man!