Agent clock
A visualization of a clock using simple agents and physics.
Description
The digits of the clock are basically letters or svg paths. These paths are broken down into pieces. The pieces are positions which will get occupied with “agents”. These agents spawn at and have the goal to reach a random spot on these paths thus slowly revealing the time. The spawn location is a position outside the screen where the second hand would be – it wanders clockwise around the scene. If the minute is over the dots are cleared and the process restarts.
Beginning of the minute
Only a few dots are there
30 seconds of the minute
More and more dots floating in )
All dots there
How to build
Flutter should have been installed
git clone https://github.com/kruegerrobotics/flutter_agent_clock.git cd flutter_agent_clock cd agent_clock flutter create . flutter run
Inspirations
The coding train
This project was inspired by The Coding Train Challenge #59: Steering behaviors Thanks to Daniel Shiffman!
Flutter canvas tutorial
This is a canvas tutorial and has a way to become independed of the screen size with the “size tool”. This has been reused here.
3rd Party library use
This project uses the public availabe flutter library Text to Path Maker. For breaking the TTF into segments,
Ideas for further improvement
Multiple fonts and “text to point”
Refine the text to path maker or develop an algorithm that breaks the TTF font path and can put dots on the path in equal distance. This would allow the use of any font. At this point in time the point allocation is on certain fonts not equidistant and not visually appealing. The overall coding of the postioning should be less static
The algorithm could be improved inspired by textToPoints from the p5js project.
Other ideas
- Improve the streaming in of the agents depending on weather
Download Flutter Agent clock
https://github.com/kruegerrobotics/flutter_agent_clock
Provides the list of the opensource Flutter apps collection with GitHub repository.