Rendering a Christmas Tree that Never Comes Down with p5.js

The animation below is a 3D render of the actual positions of the lights from my Christmas tree in 2021 using p5.js. Unlike my actual Christmas tree, this one won’t be taken down and will run all year round (save for the few occasions Github might go down).

Calculating the LEDs coordinates is taken from an idea by mathematician Matt Parker where they are lit individually one at a time and the brightest area is logged in each of the x, y and z axes.

Although Matt has already gone through this, there’s no code of the LED position capture available publicly. I had to build software to light, capture and log each of the LED’s positions manually. I also wrote code to trigger the tree in my house to flash when I got a new follow on social media.

If you’re interested in my process, you can find a video I made about it on youtube and follow up blog post.

Rendering Coordinates with p5.js

p5.js is a JavaScript library for creative coding. It makes displaying the coordinates I have on a canvas very simple. We declare that we want a 3D canvas and load in a table of the LED coordinates to iterate over as part of a draw loop each frame.

The lights will light up in different colours if you click your mouse buttons. The total p5.js code comes in at under 40 lines, which would reduce to just 25 with events code removed. The bulk of the work is done as part of a draw function, where the rotation of the tree coordinates is changed as the frame count increases.

You can see the full source here.

I also accidentally made this happy accident - where trails of lights were left across the canvas because I didn’t repaint the background.