the one with the xmas tree

In my continuous effort to become a designer who codes, I created this Christmas tree generator. Using P5.JS, these procedurally generated trees are different every time, giving you a new opportunity to create your own unique Christmas tree.


Designer and Developer


Web Design
Web Development


Personal Project



The Goal

As a designer, I usually struggle with wanting to turn my concepts into interactive experiences. With this project, the brief I set myself was to come up with a concept and develop it myself. In order to be more specific, I gave myself the following brief:

— Given the time of the year, the experience would have to be Christmas-themed; something to share with others during that time.

— As it is a technology I feel comfortable with and wouldn't require too much learning, it would have to be developed using P5.JS.

— And because the goal was to develop an interactive experience, the end result would have to be unique and custom for each user. So it doesn't feel like it's pre-rendered. 


The Role

As this was a personal project, I took the role of designer & developer.

Based on the brief, I came up with a very simple concept: a Christmas Tree generator, where each user would be able to create and download their own Christmas card with a unique tree in it.

Given my programming skills, the design had to be very simple, with a green palette and some text. The development of it took some more time, but due to the nature of P5.JS, I was able to conclude the project and publish it in time for Christmas.