Evolving Fish Pond 1: Making your Fish class

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

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

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

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

Information
Step 3
We'll be starting with an html page which has the p5js library and our index.js page
Temp1545263228
Step 4
Switch to index.js to get started
Temp1545263279
Step 5
Create a setup() and draw() function
Temp1545263390
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

Temp1545263512

Call createCanvas() inside of setup

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

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

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

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

Temp1545264657
Step 12
Create a class named Fish
Temp1545264707

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.

Temp1545264835

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

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

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

Temp1545266150

Add the Fish.js script like this:

Temp1545266199

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

Temp1545266123
Step 17
Create a global variable named `fish`
Temp1545266249

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:

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

Pass the fish to a console.log and press Run

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

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

Temp1545270100
Planning
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
Temp1545267142
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:

Temp1545267205

We'll be using these for both of our functions

Step 23
Create the following class-functions
Temp1545268089
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
noStroke();

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

//transform the fish to face the right direction
push();
  translate(this.x, this.y);
  rotate(angle);
  //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

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

Add this code to the main draw() function:

Temp1545270009

You should see a fish at the center of your screen

Temp1545270363

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

Temp1545270388
Step 26
In the Fish's move() function we'll set the velocities to random values between -5 and +5
Temp1545270611
Step 27
Increase the fish's position by its velocity
Temp1545270788
Step 28
In the main draw function inside of index.js call the fish's move function
Temp1545347400
Check Your Work
Step 29
You should see the fish swim around erratically each time your press "Run"
Planning
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.

Information
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

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

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

Temp1545348604

What do you see it doing?

Here's if we do frameCount % 10:

Temp1545348635
Information
Step 33
What if we modulo by 60?

How often does this number == 0?

Temp1545348861

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

Challenge
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?

Temp1545348992
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

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

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

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

Temp1545349435

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

Temp1545349483

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"

Temp1545351685
Step 41
Now we'll check the right side of the screen
Temp1545351811
Challenge
Step 42
Now check the top and then the bottom sides of the screen
Temp1545351986
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:

Temp1545352152

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"

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