# Fireworks! (and pxt-color extension)

**URL:** <https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315>\
**Category:** Arcade\
**Created:** [July 5, 2019, 4:44am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315 "2019-07-05T04:44:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [July 5, 2019, 4:44am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/1 "2019-07-05T04:44:30Z")

</div>

![48](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/76b88ae50d068a8bb6c2b3dc53c7103c2f5a5112.gif)

I wrote up a little fireworks example with some custom particle effects! I tried to give a short description of what the main aspects of particles effects are / how they work in comments throughout the code, in case anyone is interested - I’ll expand on that part later later 🙂.

> **[Fireworks! - Microsoft MakeCode](https://arcade.makecode.com/99954-69965-47250-95053)**
>
> Made with ❤️ in MakeCode Arcade.

There isn’t currently much interaction necessary from the player - if you press a button, it will fire off a firework (with a small timeout between fireworks), but if you don’t press anything it will still occasionally create fireworks for you.

This also uses a new extension I wrote up last weekend, called [pxt-color](https://github.com/jwunderl/pxt-color). This extension allows you to change the palette the game uses at runtime, so that each color looks different. The main thing I’m doing in this case is fading between random palettes, so that each firework is a unique combination of ‘pastel-ish’ colors - this is done by creating a fade, which allows you to specify the beginning and end palettes and a duration, and then changes the color palette in the background between the two smoothly until it settles at the new end palette. In this case, though, as soon as the color fade is completed, it starts on the next random fade.

For an easy modification to this example, you can change the colors that are picked for the fireworks by changing the `generatePastel` function at the end of the game; for example, you can allow it to create darker colors by changing the possible values for the `luminosity` aspect of the generated color, which will result in a wider variety of colors in the fireworks:

```auto
function generatePastel() {
    // generate a random pastel-adjacent color:
    // pastels have 100% saturation and high luminosity ('brightness')
    return new color.HSL(
        Math.randomRange(0, 359),
        1,
        Math.randomRange(40, 60) / 100
    );
}

```

Resulting in something like this:

![37](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/e90a7df29f0b319cc6772ce724dabcbde325226d.gif)

I’m still working on the color package, so the documentation is lacking and and there’s likely a number of small bugs I haven’t seen yet, but if you’re interested there are some more examples of things you can try in the [test.ts file](https://github.com/jwunderl/pxt-color/blob/master/test.ts), and I’m always happy to answer questions if you have them! I’ll try to avoid breaking backwards compatibility as much as possible for this package from now on, though ~

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [July 9, 2019, 1:09am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/2 "2019-07-09T01:09:39Z")

</div>

I love this, Joey! I totally want to steal it for a “You Win!” splash screen for a game sometime. 😃 Great comments in the code, too, to explain your reasoning. Thanks, too, for the `pxt-color` extension! While the default palette works fine for many purposes, I feel like custom palettes are a much-needed extension. This will be put to good use by many, I’m sure. Excellent work!

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [July 9, 2019, 1:15am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/3 "2019-07-09T01:15:25Z")

</div>

I see that you used VS Code to author the `pxt-color` extension. I’m going to start a separate thread to collect input, but I’d love to hear your thoughts, Joey.

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [July 9, 2019, 2:12am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/4 "2019-07-09T02:12:07Z")

</div>

We actually just package in a few vs code files configuration files when creating things with the [github extension](https://makecode.com/extensions/github-authoring) authoring now, as it’s easier to add those in with the first initial commit than to try to fix it up if someone wants to use vs code later - almost all of the commits in pxt color were just done through the github authoring within makecode 🙂

---

<div class="post-metadata">

**Author:** ![Vidget](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/vidget/32/29_2.png) [@Vidget](https://forum.makecode.com/u/Vidget)\
**Post date:** [July 10, 2019, 2:34am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/5 "2019-07-10T02:34:34Z")

</div>

I could have used this LOVE IT…this is what we ended up making for the holiday.

> **[4th of July v1.0](https://arcade.makecode.com/57013-63052-99857-23082)**
>
> Made with ❤️ in MakeCode Arcade.

We added a video just to elevate it to the next level… 🙂

[![](https://i.ytimg.com/vi/QJs30wnRdaQ/maxresdefault.jpg "Happy Fourth Of July") ](https://www.youtube.com/watch?v=QJs30wnRdaQ)

---

<div class="post-metadata">

**Author:** ![wimberlyw](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/wimberlyw/32/235_2.png) [@wimberlyw](https://forum.makecode.com/u/wimberlyw)\
**Post date:** [July 17, 2019, 12:26am UTC](https://forum.makecode.com/t/fireworks-and-pxt-color-extension/315/6 "2019-07-17T00:26:45Z")

</div>

Awesome!