[p5.js] 🎄 Christmas Tree Decorator!!! 🎄
'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!!! 🎄 🎄 🎄 🎄
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!
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:
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!
Basically, I first have some variables (
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
mouseY (the location of the mouse) and the size is
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
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
- 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.
- 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 ;)
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!
Cya around!!! 👋
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
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 haha proof?
// 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
tldr: Rust > (C++ = JS = Py) > C
I was just laughing about C++'s amazing syntax, stuff like this:
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 https://repl.it/@xxpertHacker/Learn-a-Lang, 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.
@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
Also, I meant native code, as in, the code that the browser itself uses, not JS or Wasm.
@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.
totally didn't foil ur plans totally didn't foil ur plans
Far from it, I'm unfazed.
Your right, JS will be put into its rightful place: a scripting language.
Like Bash, it'll only be used to load Wasm. :)
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.
Every other proposal is adding a new feature that JS doesn't, (and probably never will) have.
Phff, you're just not on our level yet.
...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 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
- 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)
@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)
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?
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++
@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).
@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.
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?
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.
@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.
(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: https://repl.it/@xxpertHacker/SIMDts#main.ts
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.
@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 -
You can look up the reference on p5js.org 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 :)