Share your repls and programming experiences

← Back to all posts
[p5.js] 🎄 Christmas Tree Decorator!!! 🎄
Bookie0 (6250)

'Tis the season to be jolly, Fa la la la la, la la la la! 🎶 🎶

It's the jolly time of the year! Christmas holiday is here, and it's soon the actual day of Christmas! When you say 'Christmas', what words come to your mind? For me, there's presents, joy, a fire, dinner, red, green, silver, santa, reindeers, and many others! Oh, and also, one of the most important objects!

A Christmas Tree!!! 🎄 🎄 🎄 🎄

The Idea

I was learning p5.js in school for CS, and for our final project we were asked to make an artwork. I first decided to make a pizza maker/creator and show it here, but decided to show a Christmas Tree creator! Why? Well I figured during December a Chritmas Tree would be more relevant than a pizza (pizza lovers, rejoice, I'll probably finish and publish it next year!).

So here's a Christmas Tree Creator where you can design, decorate, and have fun personalizing your own christmas tree!

Make your own tree!

Add snow!

Lights and a thicker/bigger tree!


How to play? Bascially, using the numbers 1-9, you can decorate your Christmas Tree however you want with whatever you want (that's on the list!). The objects you can use to make your tree beautiful as well as their corresponding keys to press:

[1] Silver Garland

[2] Red Ornaments (round)

[3] Green Ornaments (round)

[4] Blue Ornaments (round)

[5] Purple Ornaments (square)

[6] Coral Ornaments (square)

[7] Yellow Lights

[8] White Snow

[9] Leaves (for tree)

You can use your mouse cursor to 'draw' the decorations around.

Use the shiny garland so your tree is eyecatching, utilize the different colored and different shapped ornaments to decorate your tree, make use of the bright lights to, well, make it bright/light, employ white snow to make it more natural, and finally use leaves to make your tree more thicker.

You can use also hit (but not too hard!) your space bar so that your cursor goes up and you can move your mouse around without 'drawing', useful if you want to put an ornament somewhere else than where your cursor initially was.

And press backtick (`) to clear everything on the tree and restart if you want to!


In the background, you'll see nicely wrapped presents waiting for you to open them.

They are interactive, so try to find something you can do with them!

In the upper left corner, you'll also see a box with the current item you have selected. It will tell you what ornament you're using so you can always know the item!

The Code

Basically, I first have some variables (newColor, recentColor, sizes X and Y of the decorations, boolean variables to show/hide certain parts, etc.).

Next, the function shape(color), with the color of the decoration as a parameter. In that function, it draws the outline of the tree, the star, the wood of the tree, as well as the 5 different presents (interactive!). Next, it checks what the variable newColor is; if it's a certain color such as red, it sets the frame rate to a certain number, in this case it's 1, and makes the actual shape with the corresponding emplacement and size, here the position is mouseX and mouseY (the location of the mouse) and the size is ornamentsSizeX and ornamentsSizeY (sry that was a too long sentence! xD).

After, the functions currentItemShow(currentItem) (with parameter currentItem; the decoration the item is currently using) and showCommands(), which show the current item the user has and all the commands the user can press, respectively.

In the main function that always loops over; draw(), it calls the different functions I mentionned above. Using conditionals, it also checks what key the user entered, and if they enter a specific number, the variables newColor and recentColor are updated to the corresponding color. In the function mousePressed(), there's also a little something, but don't check it or it'll kinda ruin the surprise.

You can always look at the code if you're confused, want to learn a bit, and you can ask me some questions if you need help and I'll do my best to answer! :D

Some facts about Christmas

Here are some cool facts about Christmas for ya'll to talk about during the Christmas dinner!

  • Christmas can be simpliefied by 'Xmas'. Why? Well the 'X' in 'Xmas' comes from ancient Greek; in Greek, Christ begins with the letter 'X', so that's why 'Xmas' also means 'Christmas'. It's also easier to write/type.

  • Santa's signiture red coat color wasn't actually red before, it used to be either purple, blue, green, etc. Apparently, Coca-Cola made a big advertisement some time during Christmas, and had a santa in the ad. They decided to dress santa in red and white colors, which are the same colors as the brand. The colors have stuck, and we now remember our modern santa wearing red and white!

  • Apparently, if you're bad during the year, you can get pieces of coal instead of presents... Beware!

  • The largest Christmas present was given by the Français (French) to the Americans (Américains). It was the Statue of Liberty, gifted in 1886! Oui oui, baguette baguette!!

And 'Merry Christmas!' in French is 'Joyeux Noël!' [ge • ow • yeu • no • ell]

The ‘j’ in joyeux is pronounced like the ‘g’ in orange. It’s similar to ‘dz’ in Polish or ‘Ж’ in Russian.

The ‘oy’ is pronounced just like it looks.
The ‘eux’ is pronounced kind of like the sound ‘uh’ combined with the sound of ‘oo,’ but with your lips pursed together more.
Lastly, ‘noel’ is pronounced just as the name Noelle

(From here)

  • How does Santa deliver all the gifts to the children'? (We all know he does it, not the parents ;)

Santa stretches time like a rubber band, in order to deliver all the gifts in one night. According to the United Nations Children’s Fund (UNICEF), there are 2,106 million children under age 18 in the world. If we assume that each household has in average 2.5 children, Santa would have to make 842 million stops on Christmas Eve, traveling 221 million miles. Given the different time zones, Santa has 36 hours to deliver gifts, therefore his average speed would be approximately 650 miles per second. It is less than the speed of light (therefore, it’s, theoretically, doable but still quite hard for a chubby old man). Larry Silverberg, a professor of mechanical and aerospace engineering at North Carolina State University, suggests that Santa uses relativity clouds to get the work done. Relativity clouds, based on relative physics, allow Santa to stretch time like a rubber band which gives him months to deliver gifts, while only a few minutes pass for the rest of us.

(From here)

  • A sad fact: couples are most likely to break up 2 weeks before Christmas (according to Facebook posts and data). Why? I suppose most likely to all the stress (at home and at work), food, gift buying, family reunions, lots of pressure on you, annoying parties/events, etc.

  • And finally, a funny one: Rudolf the Reindeer's nose perhaps has "nasal microcirculation", which is why the reindeer has a red nose. Read more about the interesting story here ;)

(From here)

A few sources...

That's it, folks!

Well, looks like you've reached the end!! Hope ya'll enjoy the repl, p5.js is actually pretty cool, be sure to check it out!

Everyone have a fantastic day!

And of course,

Merry, merry, merry...,

Merry Christmas!!! 🎅 🦌 🌟 ❄️️ ⛄ 🔥 🎄 🎁

Oh, and last thing!

A beautiful Christmas melody you can show to your family and friends

  • Cya around!!! 👋

Bookie0 (6250)

@Baconman321 @firefish @Stan085 @programmeruser

sorry to be harsh, but will you

shut up.

stop talking

ik it's not really nice, but I think I've gotten more than 50 pings by you. Please move this conversation to another thread.

Merry Christmas! :D

programmeruser (604)

@Bookie0 yeah I stopped 1.5 hours ago

Stan085 (23)

@Bookie0 OK, srry, I didn't even think about YOU getting pings

HahaYes (1861)

hahayes this is cool



programmeruser (604)

Nice, p5.js is a great abstraction around the HTML5 canvas.

p5.js is actually pretty cool, be sure to check it out!

Of course since JS > Python

Bookie0 (6250)

@programmeruser lol thanks! try the repl again now, it should be in public! :)

Baconman321 (1096)

@Bookie0 Nah, good ol native JavaScript best. Never have I used a framework (except once, but it was a minor library (AOS)) for JavaScript.


@programmeruser - Yeah! Team JS! p5 is awesome!

JosephSanthosh (1181)

why do u think py is better than js? @programmeruser

firefish (947)

@JosephSanthosh he said the opposite, learn your inequality symbols.

firefish (947)

@programmeruser and Rust > JS of course haha

firefish (947)

@programmeruser no that should be Rust > C++ because Rust rules over all languages, C++ stuck at the bottom of the chain below python

Stan085 (23)

@firefish but C++ is fast, so it can do more things but learning Python first makes learning C++ easier

firefish (947)

@Stan085 but rust faster and C++ has terrible syntax, do not learn it

programmeruser (604)

@firefish actually C++'s syntax > Rust and C++ outperforms Rust in the benchmarks game

firefish (947)

@programmeruser No but how do Value-Embedded Enums (what are they called pls help) and traits for everything, no garbage classes to turn your code into spaghetti (courtesy of Java, which is also very unpog), has crates that you can install that are part of the language so no painstaking // CODE STOLEN WITHOUT PERMISSION FROM INACTIVE GITHUB USER NAMED @RUST-SUCKS and where did closures go? And why is there no sane OOP system, there is only Java awful one? and also rust = speeeeeeeeeeeeeeed hang on I have to pause my rant for a minute I have about 10 more pings to answer but no worries i'm only 7% done haha proof?

firefish (947)

@programmeruser yeah read the rant I just spent 10 minutes typing

xxpertHacker (934)

tldr: Rust > (C++ = JS = Py) > C

I was just laughing about C++'s amazing syntax, stuff like this:

bool std::wstring_view const operator == (std::wstring_view const);

Knowing that Rust's syntax is way better.

Winter & I have been wondering whether we should've just used Rust from the start for the server at, because we're already talking about writing part of it in Rust, since it'll be easier, safer, and faster, especially considering Rust has std::Future<T>, allowing readable asynchronous control flow.

xxpertHacker (934)


Nah, good ol native JavaScript best...

Nah, good 'ol native assembler is the best...

Baconman321 (1096)

@xxpertHacker Combined with JavaScript, yes. Without JavaScript, webAssembly is pretty much nothing (I know that much).

Baconman321 (1096)

@xxpertHacker What exactly is std::wstring_view? From what I looked up and got, it defines a constant number of chars? Doesn't make sense (never got too far into C++, not needed most of the time)...

xxpertHacker (934)

@Baconman321 WebAssembly is going to become much, much more powerful within only a few months. I'm expecting 0% JS required to start Wasm modules by the end of next year. 0%, complete WebIDL access too. Structs, strings, objects, Maps, access to globalThis, etc.

Also, I meant native code, as in, the code that the browser itself uses, not JS or Wasm.

Baconman321 (1096)

@xxpertHacker Yes, I heard.
If only we could all code in low level languages...
browser speed intensifies

xxpertHacker (934)

@Baconman321 That was a reply to programmeruser and firefish.
It's a view of a wide-character pointer. The pointer cannot be modified from a view.

Baconman321 (1096)

@xxpertHacker ok I get what a wide character is (2 bytes instead of one, or whatever. Good for additional charsets), but what do u mean by a "view"?

I do want to learn more about statically typed languages.

xxpertHacker (934)

@programmeruser Yup, where C belongs.

C is a braindead simple language that has practically no higher-level structures or concepts and relies entirely on compiler optimization to generate performant code due to that fact.

The only good thing about C is that it doesn't have name-mangling, so one can easily interoperate with assembly using C.

But even then, C and Rust can have their name-mangling disabled.

firefish (947)

@xxpertHacker Using only std::Future<T> for async? try tokio

xxpertHacker (934)

@Baconman321 The size is actually platform-depedant, here it's 4 bytes.
Think of looking at something, like it's behind glass: you can observe it, you can observe changes to it, but, you're behind the glass, you can't modify it.

Simple example:

wchar_t ptr[13] = "Hello, world!";

wchar_t const (&view)[13] = ptr;

view[0] = 'x'; // error
ptr[0] = 'x'; // okay
firefish (947)

@programmeruser yeah C is not at the bottom C++ is
C is actually a good language, until C++ came along and made a right pig's breakfast out of it

xxpertHacker (934)

@firefish Yeah, if I move to Rust, I'll probably bring along Tokio's runtime & friends.

Baconman321 (1096)

@xxpertHacker Also
XD, JavaScript will still be something of use to the internet according to the webassembly site itself!

totally didn't foil ur plans

Baconman321 (1096)

@xxpertHacker Ah, that type of view. As in you can't change it from viewing it.

firefish (947)

@xxpertHacker Beware, it is a monstrosity, prepare to fill your hardisk cough forgot you didn't have a computer container with a hundred odd crates.

Bookie0 (6250)

bruh @baconman321 @firefish @xxpertHacker

what's with all these pings!???!!!

Baconman321 (1096)

@Bookie0 FOR C++ :D
LOL the tutorial u made came back to haunt u

firefish (947)

@Bookie0 arguing about why Rust is the best language and how c++ is a right pig's breakfast

Bookie0 (6250)

@firefish maybe a different thread..?

xxpertHacker (934)


totally didn't foil ur plans

Far from it, I'm unfazed.

XD, JavaScript will still be something of use to the internet according to the webassembly site itself!

Your right, JS will be put into its rightful place: a scripting language.

Like Bash, it'll only be used to load Wasm. :)

JavaScript has an incredible amount of momentum and will remain the single, privileged (as described above) dynamic language of the Web.

Wasm is already about to be at an equal privilege to JS, but it won't be dynamic, that's literally it.

When WebAssembly gains the ability to access garbage-collected objects, those objects will ... not live in a walled-off world of their own.

The walled-off-world is "JavaScript".

Every other proposal is adding a new feature that JS doesn't, (and probably never will) have.

xxpertHacker (934)

@firefish Lol, Repl "container."

Yeah, ik, and idc. Then again, I might not need Tokio for this, we'll see soon enough.

Baconman321 (1096)

@xxpertHacker XD that said, JavaScript will still be used... especially for people who don't have the time/ability to learn WASM.

Plus, if you don't want people to know your JavaScript code, you could just obfuscate it.

Bookie0 (6250)


xxpertHacker (934)

@Bookie0 We wanted you to join the convo

firefish (947)

aight lemme just make a chatapp real quick @Bookie0

firefish (947)

@xxpertHacker You just have to try. I've never mucked around with this stuff; the only real async stuff I've done is thenable objects in nodejs... I mean they are fun to play with, but otherwise nothing async of mine I've made lol

xxpertHacker (934)

Phff, you're just not on our level yet.

Plus, if you don't want people to know your JavaScript code, you could just obfuscate it.

...obfuscate the Wasm :)

But there's more to it than just having people not being able to understand Wasm binary, it's that Wasm is a statically, structurally sound language, unlike JS.

xxpertHacker (934)

@firefish Oh, we're quite opposite in regards to that then. I've converted just about everything in JS that used events & callbacks to use promises.

And this Rust will require some hand-made Futures and bindings.

firefish (947)

@Bookie0 oki everyone go to @programmeruser's chat thingo and we'll argue there

Baconman321 (1096)

@xxpertHacker I'm not going to try to learn WASM until I get a computer of my own (parents are in the way RN). Yes, I am very jealous that u know these things and I don't, but my learning disability makes things harder... and right now I don't have the resources to do it as easily as you can.

Totally not 100% frustrated here

xxpertHacker (934)

@Baconman321 Just learn a higher-level language like C++ or Rust, they compile to it.

Baconman321 (1096)

@firefish Yeah, but it doesn't teach me anything. I'm going to learn webassembly soon (hopefully)...

Baconman321 (1096)

@xxpertHacker Nah, I want to learn the text-format. Thx tho! I was wondering how to compile C++ to WASM (I know a very little bit of C++, it was unfortunately my first language XD).

Oh, it does C. Also, it's really complex... D:

xxpertHacker (934)


  • Repl has Clang 8
  • Clang is tied to the version of LLVM
  • LLVM 8 can compile to Wasm

You can use Repl to compile C++ to Wasm .
You could probably search it up on the web, use clang++-8 in Bash, and post a template here on Repl.

(not to flex, but C++ was my first programming language and it was a breeze)

Baconman321 (1096)

@xxpertHacker LOL, I got stuck on functions and all. Learning it was easy, yes. Going further, it started to get harder.
I stopped doing it for a good reason too, I don't need to redefine every single function to build a web server or a machine learning algorithm...
(OK not every single function, but C++ is too low-level for practical use unless you are going for performance or educational purposes)

fuzzyastrocat (1859)

Okay sorry @Bookie0 but I just have to give my sqrt(4) pieces of copper with Lincoln's face on them (and the chat thingy seems empty):

@Baconman321 If you've never used a framework, how do you know that plain JS is better?

@xxpertHacker @firefish @programmeruser In my opinion, the hierarchy is (C = Rust) > C++

I think it suffices to say that I hate C++ because it's so bloated and annoying. They tried to add too much, and ended up with a mess.

As for why I feel C = Rust, I think Rust is great but I end up with much slower development when using Rust than C. This is because of its extreme safety. While you can really screw yourself with C memory management, as long as you're diligent about your management everything will be fine. (And indeed it has been for me... it's been months since I've gotten a segfault.) But with Rust, no such issue is even possible. However, this means that there are many new restrictions imposed (the whole borrowing system) and this slows me down from doing what I would normally do in C. I can't remember the exact example, but something that I know works in C just isn't possible in Rust since the compiler can't verify that it will always work (it's not advanced enough to do super complex analysis like that). Instead you have to do it the rustian way, which just doesn't come naturally for me.

So, perhaps if Rust had been my first language (before C) I would have a different opinion. However, I feel like Rust is the bike with training wheels (no offense to rust, this is just an analogy) and C is the skinny-wheeled race bike. Rust is great because you'll never fall off; however, that same safety limits you in the way you can do things. Meanwhile, C is super easy to mess up, but if you're experienced you can avoid those pitfalls.

but actually phi > (rust = C) > C++
Baconman321 (1096)

@fuzzyastrocat LOL I used one "framework" (AOS). I have seen jQuery and all that, and I don't mind writing an extra 100 lines per 2k.
Plus, what it lacks in code simplicity, it makes up for in speed, because you don't have to load an entire library to do 100 lines of code (which some people do and I find it entirely unnecessary).

fuzzyastrocat (1859)

@Baconman321 What is AOS? (I've never heard of it)

jQuery is only good for larger projects. As with basically all frameworks (react, vue, etc). Sure, it's pointless to load a library for a tiny project, but that's true for everything. The whole purpose of a framework is to enable large, complex projects to be made easily.

Additionally, that's why many libraries/frameworks allow you to load only some of it, that way you only load what you need.

Baconman321 (1096)

@fuzzyastrocat kk. AOS is for animations. Stands for Animation On Scroll.

xxpertHacker (934)


This is because of its extreme safety. While you can really screw yourself with C memory management, as long as you're diligent about your management everything will be fine.

Also, there's more to it than memory management, there's type safety and such.

Regardless, take this scenario: you download a library and use it, do you:
a) trust the author of the lib?
b) manually review the code's practice to ensure that it doesn't do anything questionable?

Rust makes taking the former much, much easier than C or JavaScript. I can trust my own C, because I know how it works.
But, I cannot trust any random C from someone else, since it could cause all kinds of problems.

Also, I'm personally more likely to cause LLVM to segfault, that I am to compile a program that causes a segfault.

fuzzyastrocat (1859)

@xxpertHacker Yes, type safety is the one thing about C that I'm not happy with.

Right, but that's the thing about C: using libraries just, well, isn't very common. (At least, not in my experience.) You mostly do things yourself with C. While this means more work, I do like making things myself.

fuzzyastrocat (1859)

@Baconman321 That's not at all a framework... that's a library. Big difference: framework is a system, library is a plugin.

xxpertHacker (934)

@fuzzyastrocat That's just because there is no good way to share C code, Rust has a package manager and a way to share code.

It has been likened to Node.js' NPM, but still, it's better than nothing.

xxpertHacker (934)

@programmeruser Still, not at a great solution.
Also, not easy to verify random C on the web is remotely safe.

Stan085 (23)

@firefish also we are comparing python and C++, not rust and C++

firefish (947)

@Stan085 too late for what?

use quotes to reference a particular comment

Stan085 (23)

@firefish I already learned C++

firefish (947)

@Stan085 why i warned you it was a piece of excrement

Stan085 (23)

@firefish really not that bad, also, try learning C+ or C+++

Stan085 (23)

@firefish yes they do, esoteric languages:

AnvayMathur1 (32)

You think C++, Rust, and Assembler is good? Rookie move. I code best in Intel Hex.

xxpertHacker (934)

(Bookie, sorry for the ping)

@Baconman321 Oh hey, Wasm works with more than numbers, I've got a few functions that return (drum roll please) objects.
See for yourself, run the demo script:

If have any comments/questions, it'd be best to talk on the comments section of the post.

I'll probably release it as a small lib soon.

Baconman321 (1096)

@xxpertHacker How tho?

WASM has support for objects?


Since when do you see an assembly language be able to work with such high-level value types...

YuvanVighnesh (102)

CONGRATS with 5000 upvotes (I was ur 5000th upvote)

fuzzyastrocat (1859)

Tis le seezon to be johly, fol lol lol lol lol, lol lol lol cat

So uh... where are my lolcats to decorate the tree with? :D

Jokes aside, nice project!
HYPR (8)

Wow this is really cool

Bookie0 (6250)

thank you so much! :D @HYPR

GeumjuKim (19)

@Bookie0 :D
merry christmas!
(or other holiday!)

Baconman321 (1096)

We all know that Rudolph was the result of an experiment by the Russians using the radioactive Iodine-131 material of Chernobyl as their main mutation source...

Gr8est (39)

Very good @Bookie0, but there is one thing to fix, when I clear everything, it even clears the ornaments thing. Then I can't decorate my christmas tree anymore. :(

Bookie0 (6250)

@Gr8est thank you!! yea the clear thing is to clear everything

fuzzyastrocat (1859)

@Bookie0 But... why on earth would you want that functionality? (You realize they're talking about the fact that the ornaments picker disappears too, right?)

Utsa (1)

Thanks, really impressive

Bookie0 (6250)

thank you! glad you like it! :D @Utsa

Whippingdot (652)

But one thing, I didn't read anything you wrote. @Bookie0

Whippingdot (652)

Whenever someone creates a project with which you can create things, I try to replicate their face. I will do yours now. @Bookie0

Bookie0 (6250)

@Whippingdot amazing art qualities! xDDD

Whippingdot (652)

Thank you, thank you 🎀🎀I couldn't find a bowing emoji so this is the best I could find @Bookie0

Whippingdot (652)

That looked like someone begging for mercy... @Bookie0

Stan085 (23)

@Whippingdot to me it looked like someone who is bored and lying on the ground

Whippingdot (652)

lol, true @Stan085. @Bookie0 I got 75 cycles, les go.


@Bookie0 - Nice decorator-thingy dude! AS a fellow p5 user, I'd suggest using images instead of the plain ole 'rects' and 'ellipses'. You can upload your images in the repl and then use the following code to upload a image -

var image;
var x;
var y;

function preload(){
  image = loadImage('<imgName>.jpg/png/gif/whatever');

function setup/draw(){
  // Setup/draw depends on whether you want to update your images props or other stuff in the future.


You can look up the reference on for more on images. Merry Christmas!


Also, a suggestion, you could add a feature where the silver garland and leaves render only when mouse is pressed, to avoid making it messy :)

Bookie0 (6250)

@Persassy2109 ah, nice suggestion, thank you! I knew about images but since I was already a bit far into the game, decided to continue use those rects.

Thanks anyways! :D


@Bookie0 cool :)

DigiLab (115)

The worst tree award

firefish (947)

And a round of applause to...... @DigiLab!

UniGirlMagic (1)

This is rly cool! Although it took me a few times to get the hang of it :D

Pizzaz4me (63)

this is so cool!, Fa la la la la, la la la la! 🎶 🎶

zplusfour (914)

nice facts
and frick I got rick rolled
and nice game lmao
merry christmas!

Bookie0 (6250)

lol hehe

thanks! :D

merry Christmas to you as well! xD @ZDev1

zplusfour (914)

@Bookie0 URL slug hashs emojis to their title/meaning

zplusfour (914)

@Bookie0 yeah non-frontend or non-backend developers don't know what is a slug!

if you need to learn more go to: