Trees, light, and color; some of my favorite things about Christmas. This scene consists of clusters of “lights” that fall to form a Christmas tree. I couldn’t choose between a fancy tree and a colorful tree, so there’s a button to toggle between both.
The points are rendered thanks to p5js, a Javascript graphics library. Each light consists of a Point class with attributes like position, speed, and color.
These individual lights are procedurally placed on a polar coordinate grid to keep their distribution consistent. Each point is assigned a theta and a radius, followed by a height value to generate the cone shape. Once they have a grid location they are randomly offset to break up the pattern. Here’s a bit of that code:
let pointCount = 0;
for (var i=0; i<radialSections; i++) {
for (var j=0; j<polarSections; j++) {
let pointsInRegion = 3;
if (i < 6) {
pointsInRegion = 2;
}
if (i < 2) {
pointsInRegion = 1;
}
for (var k=0; k<pointsInRegion; k++) {
let colorIndex = pointCount % shuffledColors.length;
points.push(new Point(i, j, shuffledColors[colorIndex], true));
pointCount++;
}
}
}I added the other effects with some fancy CSS background gradients. The star, tree glow, and striped background are pure CSS. Here are the stripes, for example:
#stripes {
background: repeating-linear-gradient(
90deg,
rgba(0,0,0,0),
rgba(0,0,0,0) 100px,
rgba(0,0,0,0.2) 100px,
rgba(0,0,0,0.2) 200px
);
}Quick PSA, due to the intense graphics that are being rendered your browser tab will accumulate memory if you leave it open long enough. After many hours of research I’ve concluded there aren’t many ways to combat this without completely closing the tab. Eventually (after many hours) this beautiful animation WILL crash your tab haha.
Enjoy, and Merry Christmas!