Dynamic golf shot tracer

The Challenge

Can we take live feeds of golf shot location data and use it to create parabolic shot traces over a visual of the course?

Can it move between individual holes giving the viewer a better sense of what’s happening at each hole?

Can it prioritise the order in which to display the individual shots?

Can it be left to run during a round of golf with no human input?

Our Approach

We separated this proof-of-concept into two key problems to solve:

1. Displaying the shot traces

2. Directing the action

Displaying the shot traces

Exploring various options, we settled on using Three.js and SVG for handling the visual aspects. We created a React app that could take the latitude and longitude coordinates of the start and end points of each shot - along with an apex height - and draw the curves accurately on the visual of the golf course. For the POC we used fairly low resolution Google satellite imagery, but the solution can work with high resolution imagery or drone footage.

The app contains utilities for an admin user to locate and define preset camera positions for each hole, as part of the configuration for an event. This is used by the system that directs the action.

Directing the action

We wanted a system that could ingest all of the shot location data in real-time, and organise it in a way that wouldn’t see the camera shooting off all around the course in the exact order as each shot happened - this would make for quite uncomfortable viewing. We also wanted the experience to be consistent for people viewing - if two different people access the URL independently they should see the same shots, in the same order, at the same time.

For this we developed a back-end Dynamic Director service, broadcasting the next camera positions to move to and shots to display via websockets to any connected instances of the React app.

Click the button below to view a demo of the front-end running, with 12 tee-shots over 4 holes.