The Swiss Railway Clock is a masterpiece of twentieth-century design. Designed in 1944 by Hans Hilfiker, it features a clean, minimalist face and a distinctive red second hand shaped like a stationmaster’s signaling disc. However, its most famous characteristic is its unique movement: the second hand rotates smoothly in just 58 seconds, pauses at the 12 o’clock mark for 2 seconds to wait for a master minute pulse, and then the minute hand jumps forward by one full increment.
This article provides a complete guide to recreating this iconic timepiece using C# and GDI+ (Graphics Device Interface Plus) in a Windows Forms application. Core Mechanics of the Swiss Clock
To implement this project accurately, we must translate the physical clock’s logic into software timing:
The 58-Second Sweep: The second hand must complete a full 360-degree rotation in exactly 58 real-world seconds.
The 2-Second Pause: Upon reaching the top of the hour (second 0), the second hand stops completely for 2 seconds.
The Minute Jump: Exactly when the 2-second pause ends, the minute hand advances instantly, and the second hand resumes its sweep. Architecture and State Management
To achieve smooth rendering, we will use a high-frequency System.Windows.Forms.Timer set to an interval of 50 milliseconds (20 frames per second).
Instead of relying strictly on the system clock’s current second directly to position the hands, we map the actual current millisecond of the current minute to a custom “Clock Time” scale. A standard minute has 60,000 milliseconds. In our Swiss Clock logic:
If the real millisecond elapsed in the current minute is between 0 and 58,000, the second hand progresses linearly from 0 to 360 degrees.
If the real millisecond is between 58,000 and 60,000, the second hand remains fixed at 0 degrees (12 o’clock). Step-by-Step Implementation 1. Setting Up the Form
Create a new Windows Forms project. Enable double buffering on the Form to eliminate screen flickering during high-frequency redraws.
public partial class SwissClockForm : Form { private System.Windows.Forms.Timer animationTimer; public SwissClockForm() { InitializeComponent(); this.DoubleBuffered = true; this.Width = 400; this.Height = 400; this.Text = “GDI+ Swiss Railway Clock”; animationTimer = new System.Windows.Forms.Timer(); animationTimer.Interval = 50; // 20 FPS for smooth rendering animationTimer.Tick += (s, e) => this.Invalidate(); animationTimer.Start(); } } Use code with caution. 2. Calculating Hand Angles
In the form’s OnPaint override, we fetch the precise current time using DateTime.Now and calculate the appropriate angles based on the Swiss timing rules.
protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g = e.Graphics; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; // Establish a centered, scale-independent coordinate system int size = Math.Min(this.ClientSize.Width, this.ClientSize.Height) - 40; g.TranslateTransform(this.ClientSize.Width / 2, this.ClientSize.Height / 2); // Scale to a nominal 300x300 coordinate system for easy drafting float scale = size / 300f; g.ScaleTransform(scale, scale); // Draw components DrawClockFace(g); DrawHands(g); } Use code with caution. 3. Drawing the Face and Ticks
The Swiss clock face uses simple, bold rectangular bars for hour and minute markers instead of numbers.
private void DrawClockFace(Graphics g) { // Outer rim using (Pen rimPen = new Pen(Color.FromArgb(30, 30, 30), 8)) { g.DrawEllipse(rimPen, -140, -140, 280, 280); } // Ticks for (int i = 0; i < 60; i++) { g.RotateTransform(6); // 360 degrees / 60 ticks = 6 degrees per tick if (i % 5 == 0) // Hour mark { using (Brush hourBrush = new SolidBrush(Color.Black)) { g.FillRectangle(hourBrush, -4, -135, 8, 25); } } else // Minute mark { using (Brush minuteBrush = new SolidBrush(Color.Black)) { g.FillRectangle(minuteBrush, -1.5f, -135, 3, 8); } } } } Use code with caution. 4. Driving the Swiss Movement Logic
This is where we implement the custom timing transformation. We compute the precise angles for the hour, minute, and second hands.
private void DrawHands(Graphics g) { DateTime now = DateTime.Now; // Calculate precise millisecond positioning int millis = now.Millisecond; int seconds = now.Second; float totalRealMillis = (seconds1000) + millis; float secondAngle = 0f; if (totalRealMillis < 58000) { // Map 0-58 seconds to a full 360-degree rotation secondAngle = (totalRealMillis / 58000f) * 360f; } else { // Pause at 12 o’clock (0 degrees) for the final 2 seconds secondAngle = 0f; } // Minute hand jumps instantly at the turn of the minute float minuteAngle = now.Minute * 6f; // Hour hand moves smoothly based on the current hour and minute float hourAngle = (now.Hour % 12 * 30f) + (now.Minute * 0.5f); // Render Hour Hand g.Save(); g.RotateTransform(hourAngle); using (Brush blackBrush = new SolidBrush(Color.Black)) g.FillRectangle(blackBrush, -6, -90, 12, 100); g.Restore(); // Render Minute Hand g.Save(); g.RotateTransform(minuteAngle); using (Brush blackBrush = new SolidBrush(Color.Black)) g.FillRectangle(blackBrush, -4.5f, -125, 9, 135); g.Restore(); // Render Iconic Red Second Hand g.Save(); g.RotateTransform(secondAngle); using (Pen redPen = new Pen(Color.FromArgb(215, 35, 35), 2.5f)) using (Brush redBrush = new SolidBrush(Color.FromArgb(215, 35, 35))) { // Straight rod extending backward and forward g.DrawLine(redPen, 0, 30, 0, -95); // The famous stationmaster’s “palette” disc at the tip g.FillEllipse(redBrush, -11, -115, 22, 22); } g.Restore(); // Center Axis Cap using (Brush blackBrush = new SolidBrush(Color.Black)) { g.FillEllipse(blackBrush, -5, -5, 10, 10); } } Use code with caution. Optimizing GDI+ for Smooth Motion
To ensure the rendering engine runs efficiently without consuming excessive CPU resources:
Avoid Object Creation in Paint Loops: Notice that Pen and Brush objects are wrapped in using blocks or predefined. Instantiating graphics objects 20 times a second will trigger frequent Garbage Collection spikes, causing visible micro-stutters.
Anti-Aliasing: Enabling SmoothingMode.AntiAlias ensures that the hands look crisp and clean as they rotate through complex angles across the pixel grid.
Coordinate Transformations: Using g.TranslateTransform and g.RotateTransform removes the need for complex, manual trigonometry (Sine and Cosine calculations) when drawing the rotated hands and dial ticks. Conclusion
By decoupling the graphics rendering loop from the system clock and mapping the time to a custom timeline, we can accurately replicate the unique, hypnotic motion of the Swiss Railway Clock. GDI+ provides all the structural primitives needed to design this iconic, minimalist layout while keeping resource usage exceptionally low on desktop environments. If you’d like to expand this project further, let me know: