# Help with simple game (moving fish)

**URL:** <https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679>\
**Category:** Coding Questions\
**Created:** [January 22, 2023, 7:19pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679 "2023-01-22T19:19:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sara](https://discourse.processing.org/u/sara)\
**Post date:** [January 22, 2023, 7:19pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/1 "2023-01-22T19:19:20Z")

</div>

Can somebody help me?  
I created a simple game where you have to catch fish. at the moment these fish just move from the left side to the right side of the screen.  
What I need to do is make them change the direction in which they are swimming into another random direction after a random amount of seconds,  
Im really lost so I would be happy if somebody could help me.  
Thank u in advance:)

PS: This is the code that I used in a class to move them from left to right:  
void move() {  
yPos = yPos+1\*sin(radians(xPos));  
}

---

<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:** [January 22, 2023, 7:28pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/2 "2023-01-22T19:28:51Z")

</div>

Normally, ypos is from top to bottom; and xpos is left/right.

So your solution should be

`xpos = xpos + xadd;`

With `int xadd = 3;` (speed)

Now when the fish gets close to right side / left side or after a random time say `xadd = xadd * -1;` to change its 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:** [January 22, 2023, 7:31pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/3 "2023-01-22T19:31:49Z")

</div>

> [@sara](#):
>
> is the code that I used in a class to move them from left to right:  
> void move() {  
> yPos = yPos+1\*sin(radians(xPos));  
> }

As I said: normally

- ypos is from top to bottom,
- xpos left/right

Maybe you named them wrong?

For example in `ellipse(x, y);` or in nearly all the commands the first parameter is x, the second one is y.

So your statement is a bit confusing; I don’t think that this line moves the fish to the right

Maybe you can post the fish code and how you use `xpos` there

---

<div class="post-metadata">

**Author:** ![sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sara](https://discourse.processing.org/u/sara)\
**Post date:** [January 22, 2023, 7:45pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/4 "2023-01-22T19:45:22Z")

</div>

thank you for the answer.  
There is more to the code and it does work that the fish move from left to right.  
I also get how I can move them to the other side. my problem only is that I do not understand how to make them move in a different direction after a rondom amount of seconds. How do I use time in processing? And how do I make the amount of secondes random? so sometimes they change direction after 5 seconds and sometimes after 10?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 23, 2023, 3:05am UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/5 "2023-01-23T03:05:05Z")

</div>

> [@sara](#):
>
> And how do I make the amount of seconds random?

For time we can use **millis()** or _frameCount_:

> **[millis() / Reference](https://processing.org/reference/millis_.html)**
>
> Returns the number of milliseconds (thousandths of a second) since starting the sketch. This information is often used for timing animation sequences.

> **[frameCount / Reference](https://processing.org/reference/frameCount.html)**
>
> The system variable frameCount contains the number o frames displayed since the program started. Inside setup() the value is 0 and during the first iteration of draw it is 1, etc.

If you pick _frameCount_, remember that **draw()** is called back around 60 FPS.

So, if you wish for your fish to turn around between 5 to 10 seconds you could use this:  
`nextFrameChange = frameCount + (int) random(5 * 60, 10 * 60);`

Then keep polling the value of _frameCount_ until it reaches _nextFrameChange_:  
`if (frameCount >= nextFrameChange) swapDirection();`

---

<div class="post-metadata">

**Author:** ![sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sara](https://discourse.processing.org/u/sara)\
**Post date:** [January 23, 2023, 10:50am UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/6 "2023-01-23T10:50:53Z")

</div>

Thank you very much 🙂

I´m sorry I have to ask again because im just a beginner and I don´t get it yet.  
I tried doing this (just a part of my code) but it doesnt work yet:

float speed = 5;  
float xPos;  
float yPos;  
int nextFrameChange;

void draw(){  
image(loadImage(“fish3.png”), xPos, yPos, 100, 80);  
xPos = xPos + speed;

```
  nextFrameChange = frameCount + (int) random(1 * 60, 5 * 60);

```

if (frameCount \>= nextFrameChange) {  
speed = random(-7,7);  
}

}

Did I do something worng or did I miss something?

---

<div class="post-metadata">

**Author:** ![sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sara](https://discourse.processing.org/u/sara)\
**Post date:** [January 23, 2023, 12:13pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/7 "2023-01-23T12:13:44Z")

</div>

I think the problem is, that it does  
nextFrameChange = frameCount + (int) random(1 \* 60, 5 \* 60);  
60 times per second so the nextFrameChange will alway be bigger then the frameCount so it never does chose a random speed.  
How do I get the nextFrameChange to only do it after a a certain amount of time and not 60 times per second. and also the speed change shoul only happen after an amount of time and not always because it it changes 60 times per second the object is just shaking around.

---

<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:** [January 23, 2023, 2:11pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/8 "2023-01-23T14:11:22Z")

</div>

> [@sara](#):
>
> `nextFrameChange = frameCount + (int) random(1 * 60, 5 * 60);`

Consider placing this line in setup () and inside the if-clause where you set the speed

```auto
if (frameCount >= nextFrameChange) {
    speed = random(-7,7);
    nextFrameChange = frameCount + (int) random(1 * 60, 5 * 60);
}

```

(Remove the line where it is now)

**Remark 1**

Also, please do not load an image in draw()

Instead make a global variable PImage fish;

Load the image in setup and use it in draw()

The function setup() runs only once and is therefore for preparation purposes, whereas draw() runs on and on for animation.

To load an image is time consuming and should therefore only be done in setup() and not throughout.

**Remark 2**

Also please use image() command with 3 parameters only, since with 5 parameters we have an implicit resize which is also costly.

Instead, use image() with 3 parameters and make a resize() command once and for all in setup() after loading.

Chrisir

**Example without image**

```auto
float xSpeed = 5;
float xPos=31;
float yPos=33;
int nextFrameChange;

void setup() {
  size(1800, 800);
  background(222);

  nextFrameChange = frameCount + (int) random(1 * 60, 5 * 60);
}

void draw() {
  background(222); 

  // display 
  fill(0); 
  text("fish", xPos, yPos);

  // move 
  xPos = xPos + xSpeed;

  // bounce
  if (frameCount >= nextFrameChange || xPos<0 || xPos>width) {
    if (xSpeed < 0) 
      xSpeed = random(2, 7);
    else xSpeed = random(-7, -2);

    if (xPos>width+1)
      xSpeed = random(-7, -2);
    else if (xPos<-10) 
      xSpeed = random(2, 7);

    nextFrameChange = frameCount + (int) random(1 * 60, 5 * 60);
  }
}

```

Note that I changed the bouncing a bit. We make sure that

- the speed can’t become 0 and
- we make sure that the direction must change and
- we make sure that the fish turns when reaching a border

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 23, 2023, 9:26pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/9 "2023-01-23T21:26:55Z")

</div>

> [@sara](#):
>
> How do I get the _nextFrameChange_ to only do it after a a certain amount of time and not 60 times per second.

You pick another value for _nextFrameChange_ only after _frameCount_ reached current _nextFrameChange_:  
`if (frameCount >= nextFrameChange) swapDirection();`

It’s inside funtion **swapDirection()** that you change _nextFrameChange_:

```auto
void swapDirection() {
  speed *= -1;
  nextFrameChange = frameCount + 60 * (int) random(5, 11); // 5s to 10s range
}

```

Anyways, I did a demo sketch that has a class Fish w/ methods such as **display()**, **update()**, **bounce()**, **touchedBoundary()**, etc.:  
[OpenProcessing.org/sketch/1805772](http://OpenProcessing.org/sketch/1805772)

* * *

## Swimming\_Fish.pde

```auto
/**
 * Swimming Fish (v1.0.3)
 * GoToLoop (2023/Jan/23)
 *
 * Discourse.Processing.org/t/help-with-simple-game-moving-fish/40679/9
 *
 * OpenProcessing.org/sketch/1805772
 */

static final boolean REMOTE = true;

static final String
  FISH_SITE = "http://" + "www.Clker.com" + "/cliparts/" + "1/f/a/i/g/d/", 
  FISH_FILE = "rainbow-fish-th.png", 
  FISH_PATH = REMOTE? FISH_SITE + FISH_FILE : FISH_FILE;

static final color BG = #0080FF; // azure
static final int FISHES = 4, FPS = 60;

final Fish[] fishes = new Fish[FISHES];

PImage fishLeft, fishRight;
boolean paused;

void setup() {
  size(1000, 500);
  frameRate(FPS);

  populateLake();

  println("File: \"" + FISH_PATH + "\"\n");
  for (final Fish fish : fishes) println(fish);

  fishLeft = loadImage(FISH_PATH);
  fishLeft.resize(Fish.W, Fish.H);

  fishRight = createMirrorImage(fishLeft);
}

void draw() {
  background(BG);
  for (final Fish fish : fishes) fish.display().update();
}

void mousePressed() {
  if (paused ^= true) noLoop();
  else loop();
}

```

* * *

## Fish.pde

```auto
class Fish {
  static final int W = 100, H = 80, VEL = 3, MIN_SEC = 3, MAX_SEC = 6;
  int x, y, v, nextFrameBounce;

  Fish(final int depth) {
    this((int) random(W, width - W * 2), height / FISHES * depth + H / 4 | 0);
  }

  Fish(final int posX, final int posY) {
    x = posX;
    y = posY;
    v = random(1) < .5? -VEL : VEL;
    nextFrameBounce = getNextFrameBounce();
  }

  Fish display() {
    image(v < 0? fishLeft : fishRight, x, y);
    return this;
  }

  Fish update() {
    if (frameCount >= nextFrameBounce || touchedBoundary()) bounce();
    x += v;
    return this;
  }

  Fish bounce() {
    v *= -1;
    nextFrameBounce = getNextFrameBounce();
    return this;
  }

  int getNextFrameBounce() {
    return frameCount + FPS * (int) random(MIN_SEC, MAX_SEC + 1);
  }

  boolean touchedBoundary() {
    final int nextX = x + v;
    return nextX < 0 || nextX > width - W;
  }

  String toString() {
    return "Fish: { x: " + x + ", y: " + y + ", v: " + v + " }";
  }
}

```

* * *

## Functions.pde

```auto
void populateLake() {
  for (int i = 0; i < FISHES; fishes[i] = new Fish(i++));
}

PImage createMirrorImage(final PImage img) {
  final PGraphics pg = createGraphics(img.width, img.height);

  pg.beginDraw();
  pg.scale(-1, 1);
  pg.image(img, -img.width, 0);
  pg.endDraw();

  return pg.get();
}

```

* * *

## Preload.pde

```auto
/* @pjs preload = "
     rainbow-fish-th.png,
     https://OpenProcessing-UserContent.s3.AmazonAWS.com/files/user22279/visual1805772/h836d69cccc2d9f0e47fad8e146c132d0/rainbow-fish-th.png
   "
*/

```

* * *

## index.html

```auto
<link rel=icon href=rainbow-fish-th.png>

<script defer src=https://Unpkg.com/processing-js></script>

<canvas data-processing-sources=
  "Swimming_Fish.pde Fish.pde Functions.pde Preload.pde">
</canvas>

```

* * *

---

<div class="post-metadata">

**Author:** ![sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sara](https://discourse.processing.org/u/sara)\
**Post date:** [January 23, 2023, 9:38pm UTC](https://discourse.processing.org/t/help-with-simple-game-moving-fish/40679/10 "2023-01-23T21:38:12Z")

</div>

Thank you both very very much.  
I understood it now and it works!  
You really helped me a lot 🙂