Evolving Fish Pond 2: Multiple Fish and Mutations

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

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
Temp1546556262

Create a variable named fishArray

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

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

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

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
Temp1546558707
Planning
Step 11
See how all of the fish swim with the same timing?

Compare:

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

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

In the Fish's move function:

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

Adding individuality makes this much more interesting to watch

Planning
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

Temp1546566049
Step 16
In the Fish class, create a mutate function
Temp1546559885
Step 17
This function will first add or subtract a random amount from speed, size, and hue
Temp1546560703
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!

Temp1546560050
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

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

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

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

Hue:

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

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

Temp1546565055
Planning
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

Temp1546565257

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"
Temp1546565305
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

Temp1546565376

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

Temp1546565408

Mutate and push the new Fish to fishArray

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

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!

Temp1546565745
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
Temp1546565801

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

Planning
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

Account

MVCode Clubs

Created By

Newprofile jamie

Course:

Evolving Fish Pond

Access Level

premium

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