Evolving Fish Pond 2: Multiple Fish and Mutations

Step 1
In this lesson we will give each fish the ability to reproduce and mutate when born

This will cause each fish to look and act slightly differently

Step 2
We'll start by adding an array which is capable of holding multiple fish

Create a variable named fishArray

Step 3
Each time we make a new Fish, we need to push it into the fishArray
Step 4
To "push" into an array (fishArray.push()) means to add a new item to the end of the list
Step 5
Use a while loop to repeat this process 5 times so we can start the program with 5 Fish
Step 6
Lastly, we need to change this part where we tell the fish to update

This only tells 1 Fish to update, we need to update each fish

We can use a for...of loop to tell eachFish of the fishArray one by one to update

Check Your Work
Step 7
You should now have 5 Fish which all swim together like this
Step 8
Now is a good time to make each new Fish start in a random location
Step 9
We do need to add this correctional factor to prevent Fish from getting stuck on the edges of the screen

If you are interested, here is an animation showing how this changes the range. It is not essential to this lesson:

Webp.net gifmaker
Check Your Work
Step 10
Now we should see that all of the Fish start in a random location without getting stuck on the edges
Step 11
See how all of the fish swim with the same timing?


Same Timing vs Different Timing

Step 12
Add a property named "swimTiming" to the Fish

We need to set this to a random whole number between 0 and 120

Step 13
We'll use swimTiming instead of 0 to mix up when each Fish swims

In the Fish's move function:

Check Your Work
Step 14
Now watch how the Fish look when they swim

Adding individuality makes this much more interesting to watch

Step 15
Next we'll be adding random mutations so that each fish has a chance to be slightly different

Mutations will randomly changing any of the Fish's size, hue, and speed

Step 16
In the Fish class, create a mutate function
Step 17
This function will first add or subtract a random amount from speed, size, and hue
Step 18
Then we need to cap these values to minimum and maximum values

For example we wouldn't want a Fish whose size equals 0!

Step 19
Head back to where we create the Fish in index.js

Right after each fish is created, but before it is pushed into the fishArray, we need to mutate the fish

Check Your Work
Step 20
Now our Fish have random sizes and speeds!

Press 'Reload' a couple of times to see the random mutations

Step 21
Let's add a hue property to each Fish
Step 22
Change the Fish's drawSelf method so that it fills the fish's color using its hue property
Step 23
Hue is a little different, as it needs to wrap back around to 0 if it passes 100


Temp1546560278 Temp1546560353
Check Your Work
Step 24
Now press Run a couple of times and observe your fish each time
Step 25
Significant mutations like these are fairly rare in nature, so let's reflect that by only sometimes mutating

Here we have only a 25% chance to mutate because there is a 75% chance that the mutate function ends right when it begins:

Check Your Work
Step 26
Now press Run and you'll see that only some fish look different

Later in the course we'll notice that we have different "species" of Fish that all look and act very similar

Step 27
Lastly for this lesson we will add a function to the Fish class allowing them to "reproduce"

We're going to simulate this by having them randomly duplicate


Each new Fish will be a duplicate of it's parent, but will then have a chance to mutate

Step 28
In your Fish class add a new function named "reproduce"
Step 29
This function will create a new fish that is identical to the current fish (this) and then mutates, and pushes it

Create a new Fish at the current fish's location


Make the new Fish identical to the current Fish (this)


Mutate and push the new Fish to fishArray

Step 30
We'll give the fish a random chance to reproduce itself each time it moves

2% chance to reproduce each time a Fish moves

Check Your Work
Step 31
Watch now and you should see the Fish population increase

Eventually it'll grow out of control!

Check Your Work
Step 32
You can try different values such as different chances for the Fish to mutate or reproduce and see what happens then

Big Fish, small Fish, red Fish... blue Fish?

Step 33
Evolution includes two features working together: reproductive mutations and natural selection

Right now our Fish live indefinitely, regardless of mutation. No Fish is "fitter" than another

In the next lessons we will make the fish require food in order to survive, and then watch which types of fish are better suited to their environment.

Evolving Fish Pond 2: Multiple Fish and Mutations Info


MVCode Clubs

Created By

Newprofile jamie


Evolving Fish Pond

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach