Task 112: Animation via Clock Faces

The goal is to create an animation that is displayed via a raster of clock faces.



The template application 112dials from the repository grcis serves as the basis of this project. It is a simple application which uses the Simulation class to run the application logic. Within this class, a number of methods (further described below) are provided: Simulate(), Visualize(), Update(), Reset() and the mouse interaction methods Mouse*().

Character transition animations

Let yourself be inspired by the animations linked below, and try to implement some interesting transition animations between characters. For example, you could simulate a digital alarm - HH:MM, possibly even HH:MM:SS. Real-time animation! (apologies for the pun, which is probably even worse in the original Czech ;)

An alternative would be a general display that is capable of displaying any text given to it. When entering a new text (via string param), the display should re-draw via some transition animation that gradually spells out the desired text.


Multiple examples of such "clock face displays":
ARCFLY animation,
Installation in the studio "Humans Since 1982",
Pinterest: time.

Graphical Display

In the template app you get from grcis, the method Visualize() only draws a single clock face across the entire drawing area. You will need to draw a larger number of such facets (e.g. 6x4, or how many you want - this is up to you). The animation will need to make use of the large and small hands on all clock faces simultaneously, as seen in the inspiration examples above.


The application provides a basis for interactive user interactions in the simulation via the left mouse button. For example, you could interfere with the simulated field via clicking, you can start or manipulate the transition animation, etc. There are three events your app can react to: left-clicking, releasing the left button, and moving of the mouse pointer. Note that you can keep track the state of the mouse: for instance, that movement events are only used once a left click has occurred, and that you stop using them once the button has been released.

What to implement

Within the given framework, you will need to implement the following methods:

  • Simulation.Simulate() - performs one simulation step, but only in memory, and without drawing anything. It is up to you if you redraw after every step, or if you adapt the number of simulation steps per re-draw to the speed of your computer.
  • Simulation.Visualize() - visualisation of the simulation state to the raster image Bitmap. We recommend that you use vector graphics via Graphics, or direct drawing to bitmaps via "unsafe" direct access (see Bitmap.LockBits()). Attention: the visualisation procedure must NOT change the simulation state in any way, it must only read this data, and use it for drawing purposes. The reason for this constraint is that it may be called asynchronously from another thread, while the simulation is running.
  • Simulation.Reset() - an optional (but recommended) method to re-initialising the entire simulated system.
  • Simulation.Update() - update the simulation parameters based on the current string param.
Interaction with the event handler:
  • Simulation.MouseDown() - a response to the left mouse button being pressed. Returns true, if you need to re-draw the bitmap after this event (viz Simulation.Visualize()).
  • Simulation.MouseUp() - a response to the left mouse button being released. Returns true, if you need to re-draw the bitmap after this event (viz Simulation.Visualize()).
  • Simulation.MouseMove() - a response to mouse movement. Returns true, if you need to re-draw the bitmap after this event (viz Simulation.Visualize()).


Hand in the assignment until: 21. 12. 2017


Basic functionality: 8 points, for being able to draw at least a limited number of characters, e.g. the numerical digits,
up to 3 points for transition animations,
up to 3 points for an extended set of characters, and
additiona bonus points for exceptional solutions


Visual Studio project: 112dials

Source file

Modify and hand in the source file: Simulation.cs
As a comment in the first line, please include your name!
Do not forget to send a link to your video!

Copyright (C) 2015-2016 J. Pelikán & A. Wilkie, last change: 2019-05-09 17:52:59 +0200 (Thu, 09 May 2019)