orca-chase

A website where an orca follows your mouse

Installation + Usage

1. Install node version found in .nvmrc
2. Install dependencies with npm install
3. Run the project with npm run dev

Other Commands

• Lint project with npm run lint
• Fix linting issues with npm run lint -- --fix
• Type check with npm run tsc

How the orca is rendered

The orca is made up of 44 images found within public/orca/. Each image is numbered like 1.png - 44.png from nose to tail and represents a "layer" of the orca that you see.

The application renders these images starting from 44.png to 1.png onto a HTML canvas and together they form the orca you see.

To make the orca move the application tracks the last 44 mouse positions, determines how far each layer should move toward the mouse, and re-renders the screen using requestAnimationFrame.

Additionally, the following variables change the orca behavior:

• A higher fps makes the orca render more smoothly i.e. each layer will move with less delay
• A larger max layer travel distance will lead to a more stretched orca
• A larger max distance limit will lead to orca speed changing at different distances
• Larger deacceleration values will make the orca move slowly

Inspiration

Special thanks to NickyNouse whose original whale game on scratch inspired this project.