• Home
  • Boat Dashboard FUI Animation
Boat Dashboard FUI Animation
By Igor profile image Igor
2 min read

Boat Dashboard FUI Animation

Animation with the code. Project overview.

This is the project I'm really proud of. It was a real test for me as for an animator, who can't imagine the life without keyframes. Everything is animated just with the code.

Here's work in progress video

How it works:

  • Boat moves, towards the main fish (triangle)
  • Wind direction is represented as circles, deforming in relation to wind speed and direction
  • Brighter and darker areas - is the terrain, which is reflected in the lower left section. It shows when the boat is over the dark area - the terrain chart shows that it's deeper here. All changes dynamically to the random movement of the boat.
  • The boat navigation arrow, depends on boat movement and wind speed, and direction (it shows where the boat should hold the course, according to the wind force and direction)
  • Active rod selection is affected by the wind direction and speed, (circles are deformed)
  • Fuel and oil is consumed in relation to the boat movement activity
  • Diagnostics - Boat Heading is affected by the speed and force of the wind, so bars on top is showing wind force from the left side of the boat, and bottom bars show wind from the right side of the boat. Green bars showing intensity
  • Detected fish depths - showing closest fish to the boat, its size, and on which depth. Changes to the boat movement.
  • noise cancellation affected by wind speed and boat RPMs
  • Sound noise is generated for the wind dynamically, boat engine noise (Tone plugin), and rod selection (Tone plugin), all is just with AE.
  • All measurements can be switched real-time from American to Universal metrics
  • ... I don't remember already everything, but it was fun.

I've been constantly losing the track of what is needed to do, because I didn't knew how the boat navigation works, and how to fish with the spinning and how to CODE obviously!

It was insane, but after starting to write everything I want to do, magic happened and slowly the solution was discovered.

It's a final task from the course Expression Session

All other coding projects I did for this course can be seen here

By Igor profile image Igor
Updated on

Read Next

Tasty illustrations
By Igor

Illustrations SoM

My illustrations from the course Illustration for Motion All projects are educational, but created in a faced paced environment, close to real situations usually within a week. This course is significantly improved my depth of creative research, ability to start work much quicker and more confidently with a tablet. Task

works
MOMBI 30 sec spot post image
By Igor

MOMBI 30 sec spot

Educational project 30-sec animation, After Effects, Illustrator, Figma. The final project for SoM Explainer Camp course. The goal was to create a 30 sec explainer video, based on the script and branding guidelines. I've created the storyboard, graphics, animation and the voiceover.