Drone Display

drone-light-showDrone displays/light shows are performed by synchronized and choreographed collections of drones that position themselves to recreate various aerial formations. Each drone is equipped with LED lights that can change colour during the display. The first drone display was presented in 2012 in Austria, where Ars Electronica Futurelab introduced SPAXELS (short for “space elements”) for the first time. More recent drone display includes the Edinburgh’s Hogmanay 2020 New Year Celebrations and the London 2020 New Year Firework and Lights display.

For this challenge, we are using Glowscript to recreate a drone display choreography.


To complete this challenge and find out about all the 3D shapes you can use in Glowscript, you will need to refer to the Glowscript/vPython online documentation.

Drone Display Preview

Here is our drone display demonstration which consists of 3 scenes. Each scene involves 20 drones.

(x,y,z) Coordinates

The drones are positioned in the night sky using (x,y,z) 3D coordinates.

Each scene is defined as a list of 20 sets of (x,y,z) coordinates, to store the position of each drone in the scene. For instance the Moon scene is stored as follows:

#Scene 1: Moon
scene = [(20,180,0),

You can easily recreate your own scene using this online plotting tool:

Linear Interpolation Formulas

Linear interpolation formulas are used on the (x,y,z) coordinates to reposition the drones from one scene to another creating a smooth animation effect.

Here is an explanation of how linear interpolation formulas can be applied to progressively move a drone from one position (from scene A) to another position (from scene Z), to simplify we are only focusing on 2D coordinates (x,y).

Using the following linear interpolation formulas we can calculate the (x,y) coordinates of each drone position for any “in-between” frame.

x(t) = xA + (xZ – xA) * t / 10
y(t) = yA + (yZ – yA) * t / 10

In 3D, the same formula would be applied to the z coordinate:

z(t) = zA + (zZ – zA) * t / 10
  • “t” represents the time: in other words the frame number (e.g. from 0 to 10 frames)
  • (xA,yA,zA) the coordinates of a drone from the starting position (e.g. scene “A”)
  • (xZ,yZ,zZ) the coordinates of a drone from the ending position (e.g. scene “Z”)

In our animation we have used 100 frames between each scene to create a smooth transition.

RGB Colour Codes and Linear Interpolation Formulas

The same linear interpolation formulas are used on the RGB codes of each drone to smoothly change the drone’s light colours using a gradient animation.

In Glowscript a colour is represented using an (r,g,b) vector where r, g and b are three decimal values between 0 and 1.

The linear interpolation formulas on an RGB colour code are as follows:

R(t) = RA + (RZ – RA) * t / 10
G(t) = GA + (GZ – GA) * t / 10
B(t) = BA + (BZ – BA) * t / 10
  • “t” represents the time: in other words the frame number (e.g. from 0 to 10 frames)
  • (RA,GA,BA) the RGB colour code of a drone on the starting scene (e.g. scene “A”)
  • (RZ,GZ,BZ) the RGB colour code of a drone on the next scene (e.g. scene “Z”)

Camera Position

To improve the preview of our demo, we are also rotating the camera (changing the camera angle) between each frame, to preview the light show using a 365 rotation.

You can also control the position of the camera by right clicking on the canvas and you can zoom-in/out using a wheel mouse.

Did you like this challenge?

Click on a star to rate it!

Average rating 4.6 / 5. Vote count: 18

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: