Product:

p5.js Web Editor

https://editor.p5js.org/hershey_zhang/full/90imZizKV

This fish is foraging its food (“ · “) while constantly being drawn toward the whirlpool at the center. You can control the fish's movement using the "w, a, s, d" keys to help it attain its food.

Inspiration:

This sketch is an extension of my Week 2 Creature project, and I have incorporated new features to turn it into a game-like experience, inspired by the game Entangled Gemini .

Process:

Untitled

This is the sketch.js file. I add two new function in the Fish class, stream() and control(), to the fish (line 25 - 27), and a new class called Particle() to update the food on the canvas.

Functions & Parameters:

Untitled

This is the stream function in the Fish class. Almost the same with what I did in previous assignment - apply a gravitational force to the fish.

Untitled

I separate this applyForce (I call this function at line 157 in the stream function) as a separate function because it will also be used in the control function.

Untitled

This is the control function, which controls the movement of the fish. I use keyIsDown to adjust force vector and add them to the velocity. Although this force vector is redefined, which means it has no relation with the force vector I defined in stream function, they both add to a global variable this.acc (acceleration), so the resulting output should be the same.

I also adjust the direction (this.angle) the fish pointing at (line 188), toward the direction of the velocity using this function “p5.vector.heading()”, which have similar functionality as this few lines of code in my Week 2 Creature project,