# URGENT: How to repeat an image movement per second

**URL:** <https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683>\
**Category:** Coding Questions\
**Created:** [November 25, 2020, 3:59am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683 "2020-11-25T03:59:51Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 3:59am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/1 "2020-11-25T03:59:51Z")

</div>

I would like drop either 2 imageA or 1 imageB from the y = 0 border / upper border by using a coin to decide which to fall.

I am using Processing 2.2.1.

> if (millis() - startTime \>= 1000)  
> {  
> float coin = random(1, 100);  
> startTime = millis();  
> }  
> if(coin % 5 == 2)  
> {  
> image(a, aX, aY, aW, aH);  
> aY = aY + aDy;  
> aX = random(0, width - aW) ; ;  
> }else  
> {  
> for(int i = 0; i \< b.length; i = i + 1){  
> image(b[i], bX[i], bY[i], bW[i], bH[i]);  
> bY[i] = bY[i] + bDy[i];  
> image(b[i], bX[i], bY[i], bW[i], bH[i]);  
> bY[i] = bY[i] + bDy[i];  
> }  
> }  
> }

Thank you so much.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 7:03am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/2 "2020-11-25T07:03:25Z")

</div>

Hi @tank  
There are too many failures in your code to understand what you want.  
Are you using 2 arrays of images PImage[] a, b;? They are not declared.  
If you have stipulated the x, y positions, width, and length in arrays, what does the array bDy[] do?  
Below a simple code to drop ellipses randomly every second.

```auto
boolean head, tails;
int y, startTime;

void setup() {
  size(300, 300);
}

void draw() {
  background(255);
  if (millis()-startTime > 1000) { 
     int coin = int(random(0, 2));
     if(coin == 0) {
       head = true;
       tails = false;
     } else {
       head = false;
       tails = true;
     }
    startTime = millis();
    y = 0;
  }
  if(head) {
    fill(255, 0, 0);
    ellipse(100, y, 30, 30);
    y += 10;
  }
  if(tails) {
    fill(0, 0, 255);
    ellipse(200, y, 30, 30);
    y += 10;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 25, 2020, 8:21am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/3 "2020-11-25T08:21:26Z")

</div>

Original post here:  
[https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25667](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25667)

---

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 8:31am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/5 "2020-11-25T08:31:03Z")

</div>

@noel  
Thank you for your response!  
I am sorry that I did not type that properly.  
Would it be better now?

```auto
PImage a;
int aW = 50;
int aH = 50;
float aX = random(0, width - aW) ;
int aY = 0 - bombH ;
int aDx = int(random(3, 6));
int aDy = int(random(3, 6));

PImage[] b = new PImage [10];
float[] bX = new float [10];
int[] bY = new int [10];
int[] bDx = new int [10];
int[] bDy = new int [10];
int[] bW = new int [10];
int[] bH = new int [10];
boolean[] bDrop = new boolean [10];

int startTime = millis();

void setup()
{
a = loadImage("a.png");

  for(int i = 0; i < b.length; i = i + 1)
  {
    b[i] = loadImage("b" + i + ".png");
    bW[i] = 50;
    bH[i] = 50;
    bX[i] = int(random(0, width - bW[i]));
    bY[i] = 0 - bH[i];
    bDx[i] = int(random(3, 5));
    bDy[i] = int(random(3, 5));
    
    bDrop[i] = true;
    
    score = 0;
  }
}

void draw()
{
if (millis() - startTime >= 1000)
{
float coin = random(1, 100);
startTime = millis();
}
if(coin % 5 == 2)
{
image(a, aX, aY, aW, aH);
aY = aY + aDy;
aX = random(0, width - aW) ; ;
}else
{
for(int i = 0; i < b.length; i = i + 1){
image(b[i], bX[i], bY[i], bW[i], bH[i]);
bY[i] = bY[i] + bDy[i];
image(b[i], bX[i], bY[i], bW[i], bH[i]);
bY[i] = bY[i] + bDy[i];
}
}
}
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 8:38am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/6 "2020-11-25T08:38:43Z")

</div>

If you want to animate something you need to use the draw() loop.  
Try to adapt your code to the example I posted above.

> **[draw() \\ Language (API) \\ Processing 3+](https://processing.org/reference/draw_.html)**

---

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 8:42am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/7 "2020-11-25T08:42:12Z")

</div>

Oh, thank you so much.  
Can I say it is a similar concept of creating my own function and then apply it in void draw()?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 8:45am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/8 "2020-11-25T08:45:10Z")

</div>

Yes, if you want, you can also create custom functions and call them in the time driven draw() loop.

---

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 8:58am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/10 "2020-11-25T08:58:04Z")

</div>

This is not a homework.  
This is a gift that I would like to present to my grandie.  
My grandie is dying and that’s why it is urgent!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 8:58am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/11 "2020-11-25T08:58:43Z")

</div>

> [@tank](#):
>
> Could anyone tell me what’s wrong in my coding?

> [@tank](#):
>
> I would like to drop either 2 imageA or 1 imageB

Well I would start with like I said using the draw() loop.  
Without it, nothing will drop;

---

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 9:04am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/12 "2020-11-25T09:04:38Z")

</div>

> [@noel](#):
>
> Without it, nothing will drop;

The dropping action is within the draw() loop.

As what you said, I will put the dropping action inside a self-created function and call it in the draw() loop.

Thank you so much.

---

<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:** [November 25, 2020, 9:15am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/13 "2020-11-25T09:15:23Z")

</div>

> [@tank](#):
>
> if(coin % 5 == 2)

I don’t think that’s a coin…

what about

noel’s way with

```auto
     int coin = int(random(0, 2)); // gives 0 or 1, never 2, iirc 
     if(coin == 0) {
    

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 9:25am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/14 "2020-11-25T09:25:00Z")

</div>

> [@Chrisir](#):
>
> `iirc`

hehe, had to look that up

---

<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:** [November 25, 2020, 9:33am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/15 "2020-11-25T09:33:01Z")

</div>

here is a version that doesn’t really use your arrays but works with  
images a and b ONLY

```auto
PImage a;
int aW = 50;
int aH = 50;
float aX = random(0, width - aW) ;
int aY = 11; // 0 - bombH ;
int aDx = int(random(3, 6));
int aDy = int(random(3, 6));

PImage b ;//= new PImage [10];
float[] bX = new float [10];
int[] bY = new int [10];
int[] bDx = new int [10];
int[] bDy = new int [10];
int[] bW = new int [10];
int[] bH = new int [10];
boolean[] bDrop = new boolean [10];

int startTime = millis();
int score = 0;
float coin=random(1); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

void setup()
{
  size(900, 900); 
  background(0); 

  a = loadImage("a.jpg");

  // for (int i = 0; i < b.length; i = i + 1)
  int i=0; 
  {
    b = loadImage("b" + ".jpg");
    bW[i] = 50;
    bH[i] = 50;
    bX[i] = int(random(0, width - bW[i]));
    bY[i] = 0 - bH[i];
    bDx[i] = int(random(3, 5));
    bDy[i] = int(random(3, 5));

    bDrop[i] = true;

    score = 0;
  }

  startTime = millis();
}

void draw()
{

  background(0); 

  if (millis() - startTime > 1000)
  {
    coin = random(1);
    // reset ALL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    startTime = millis();
    aX = random(0, width - aW) ;
    aY = 0;
    bY[0] = 0;
  }

  if (coin > 0.5)
  {
    // show ONE image 
    image(a, aX, aY, aW, aH);
    aY = aY + aDy;
    // aX = random(0, width - aW) ;
  } else
  {
    // show TWO images 
    int i=0; 
    //for (int i = 0; i < b.length; i = i + 1) {
    image(b, bX[i], bY[i], bW[i], bH[i]);
    bY[i] = bY[i] + bDy[i];
    image(b, bX[i]+111, bY[i], bW[i], bH[i]);
    bY[i] = bY[i] + bDy[i];
    // }
  }
}

//

```

---

<div class="post-metadata">

**Author:** ![tank](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tank](https://discourse.processing.org/u/tank)\
**Post date:** [November 25, 2020, 9:53am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/16 "2020-11-25T09:53:31Z")

</div>

> [@Chrisir](#):
>
> ```auto
> float coin=random(1); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
> 
> ```

Thank you so much!  
That genuinely helps a lot!  
I found something interesting!  
I’ve learnt that within random(), there should be 2 values, i.e. the lower limit and the upper limit.  
In your program, random(1), could explain that please? This is the 1st time I have ever seen such an expression!  
Thank you so much!

---

<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:** [November 25, 2020, 9:58am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/17 "2020-11-25T09:58:09Z")

</div>

> [@tank](#):
>
> there should be 2 values

when you use only one value it is a short form for

```auto
float coin=random(0, 1);

```

first value 0 then

> **[random() / Reference](https://www.processing.org/reference/random_.html)**
>
> Generates random numbers. Each time the random() function is called, it returns an unexpected value within the specified range. If only one parameter is passed to the function, it will return a…

---

<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:** [November 25, 2020, 10:00am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/18 "2020-11-25T10:00:10Z")

</div>

Question is whether

- the 1 second should start when the image has left the screen (at lower border) or
- (like in my version) when 1 second has passed since image has started to fall.

With the first you can look longer at the images. Might be better.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 10:24am UTC](https://discourse.processing.org/t/urgent-how-to-repeat-an-image-movement-per-second/25683/19 "2020-11-25T10:24:00Z")

</div>

I just would like to add why I prefer:  
`int number = int(random(low, high+1);`  
over:  
`float number = random(high);`  
It’s because the latter actually never reaches the high number, the boundaries of the random function are not included, and when you for some reason, later on, convert it to an integer, you will miss the last one.