Evolving Fish Pond 1: Making your Fish class

Step 1
In this course we will be building a simulation of a pond full of fish which evolve over time.

You'll be designing a single type of Fish and observing how random changes can eventually lead to distinct Fish species.

Step 2
In this Lesson we will design our starting Fish by creating a class

This fish has four properties: x, y, speed, size
It can perform two functions: drawSelf(), and move()

Step 3
We'll be starting with an html page which has the p5js library and our index.js page
Step 4
Switch to index.js to get started
Step 5
Create a setup() and draw() function
Step 6
Inside of setup() we need to create a "canvas" to draw our program on

First create two variables to hold the canvas' width and height: cWidth and cHeight


Call createCanvas() inside of setup

Step 7
Also it will benefit us later to use HSB color mode, so let's switch to it now
Step 8
Add a background in draw, this will set the color to a "water-like" blue
Check Your Work
Step 9
You should now see a blue canvas which will represent our pond
Step 10
Now it's time to design our fish. I'd like to do it in a new file for organization purposes

In the next few steps will will be turning this design into a Javascript class

Step 11
Create a new file named "Fish.js"

Click on the newly create file to add code to it.

Step 12
Create a class named Fish

A class is like a "blueprint" that describes how to create a Fish and what actions a Fish can do

Step 13
Create a constructor which tells the program how to make a Fish object

This constructor takes in an x and a y coordinate for where to place this Fish.


The starting fish will have a speed of 5 and a size of 15

Step 14
Let's see this class in action by testing it out in our main index file.

We can use the constructor to construct a Fish object for us.

Step 15
First we need to add this Fish.js file to our project

Go to index.html


Add the Fish.js script like this:


Now our program includes our Fish.js code.

Step 16
Switch to index.js

We're going to try making a fish object and look at it in the console

Step 17
Create a global variable named `fish`

Notice that we use capital letters for the class Fish.
But we use lower case for the variable which holds our fish object fish.

Step 18
In setup() assign a new Fish() to the fish variable

We'll give it an x and a y position of 250 like so:

Step 19
Let's add a console.log statement to see our new Fish

Pass the fish to a console.log and press Run

Check Your Work
Step 20
Open the Console in Developer Tools and you should see the fish object

Our Fish's constructor built this object for us when we called new Fish(150, 150)

Step 21
Next we're going to add "class-functions" to our Fish class

Our Fish needs to perform two functions.

  • It needs to draw itself
  • It needs to be able to swim around
Step 22
First we'll need to add two properties to our Fish constructor: x-velocity and y-velocity

Velocity is how fast something is moving in a certain direction thus we need both x and y velocities for the two directions:


We'll be using these for both of our functions

Step 23
Create the following class-functions
Step 24
Here's a script I wrote which draws a simple fish, but also rotates the fish so that it faces the direction it is moving
//no outline

//get direction fish is facing
var angle = atan2(this.yvel, this.xvel);

//transform the fish to face the right direction
  translate(this.x, this.y);
  //draw an orange ellipse and triangle to represent the fish
  fill(10, 100, 100);
  ellipse(0, 0, this.size * 1.25, this.size);
  triangle(-this.size/2, 0, -this.size, -this.size/3, -this.size, this.size/3);
pop(); //end transformation

Add this script to the Fish's drawSelf() function

Check Your Work
Step 25
Switch to index.js and call the fish's drawSelf function

Add this code to the main draw() function:


You should see a fish at the center of your screen


Also you can see the fish object in your console still:

Step 26
In the Fish's move() function we'll set the velocities to random values between -5 and +5
Step 27
Increase the fish's position by its velocity
Step 28
In the main draw function inside of index.js call the fish's move function
Check Your Work
Step 29
You should see the fish swim around erratically each time your press "Run"
Step 30
Let's work on the move function so that the Fish swims more naturally

This fish chooses a random x and y velocity once every 2 seconds:

It also slows down over time after each time it moves.

Step 31
To make something happen once every "x" seconds we need to understand two things: frameCount and the "%" operator

First lets log frameCount to the console and you'll see this:

The p5js library counts each frame since the program began.
You should see it count 60 frames per 1 second

Step 32
Watch what happens when we add a modulo operator "%"

Say we modulo frameCount by 4 (frameCount % 4):


What do you see it doing?

Here's if we do frameCount % 10:

Step 33
What if we modulo by 60?

How often does this number == 0?


Since there are 60 frames in a second, it should be equal to zero 1 time per 1 second

Step 34
Wrap the movement code inside an if-statement so that we only pick a new velocity once every 2 seconds

Hint: there are 60 frames in 1 second. How many frames are there in 2 seconds?

Check Your Work
Step 35
Your fish will now wait 2 seconds before swimming off-screen
Step 36
This will also be vastly improved by making the Fish slow down over time

Multiply the x-velocity and the y-velocity by 0.95 each frame

Check Your Work
Step 37
You should now have some nice fish-like movement

It's annoying that the fish swims off-screen though...

Step 38
Next let's prevent the fish from moving off of the screen

We'll confine the fish to the canvas by creating a function named "placeFree"


The fish will only be able to move to a new location if the placeFree() function returns true

Step 39
Create a new function in index.js named placeFree()

This function will take an object: obj as well as a desired x and y position


If that location is on the screen the function will return true.
Otherwise the function will return false.

Step 40
First we'll check if the new position would put the object off the left side of the screen...

...and if it does, return false "the position is not free"

Step 41
Now we'll check the right side of the screen
Step 42
Now check the top and then the bottom sides of the screen
Step 43
If the placeFree function does NOT return false, we need it to instead return true

We can add return true at the end of the function here:


Note: anytime return is called, the function immediately ends.

Step 44
Head to Fish.js and go to the move function

Only add velocity to position if the new place is "free"

Check Your Work
Step 45
Ensure that your fish is now confined to the canvas
Step 46
In the next lesson we will be making multiple fish and adding random mutations to our simulation
Evolving Fish Pond 1: Making your Fish class 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