Fish Tank Challenge

Challenge
Step 1
Make a fish tank!

This is a challenge to build your own fish tank on a website. We will be having virtual classes where you can watch an instructor breakdown the project, but you can do this challenge any way you want.

Do you want to make an ocean coral reef? What about a top-down koi pond? Maybe you have a tank for space fish. . .

The rest of this lesson will talk about one way to break down this challenge, but you should try lots of different ideas for how to make this.

Planning
Step 2
Part 1

In the first Live Stream class, we made a new project with one little ellipse fish in it.

  1. Create a new HTML repo for your project. (You can use a JavaScript repo, but we need HTML for other people to see it, and for some other tricks we will be doing later)
  2. Connect the p5.js library using the CDN and a <script> tag
  3. Connect your index.js file with another <script> tag
  4. Add a setup() function and draw() function
  5. Use createCanvas() to add a canvas and background() to make sure we can see it on the page
  6. Create an object for the fish with x, y, size, and color
  7. Draw the fish using the fish object's properties
  8. Create a move method for the fish object and a speed property
  9. Move the fish on the x-axis, and have it change direction at the edges
Information
Step 3
Resources for Part 1

The setup(), draw(), background(), and ellipse() functions all come from p5, and you can get examples of how to use them from this page

You can always use RGB values and color picker, but there actually a ton of colors that you can just use by name, and this is the complete list

This lesson is a great example of how to create an object and draw it using its object properties, as well as making it change direction at the edges of the canvas.

Check Your Work
Step 4
Create a fish object to draw and move around
Step 5
Adding an image for the fish

Download this fish image, search for your own, or try drawing your own fish.

Check Your Work
Step 6
Step 7
Step 8
Fish Tank Challenge Info

Account

MVCode

Created By

slinkous

Access Level

public

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