Fireworks — A visual particles editor for Swift

Besher Al Maleh
Sep 16, 2019 · 4 min read
Fireworks!

I’m incredibly excited to share a new developer tool I’ve been working on called Fireworks, available to download here 😃

Fireworks generates Swift code on the fly for macOS and iOS as you build particle effects, allowing you to interactively design and iterate without having to constantly rebuild your app.

Once you’re satisfied with your particles design, implementing it in your project only takes 2 steps:

  1. Add the texture to your assets catalog
  2. Paste the code generated by Fireworks

No third-party libraries or dependencies needed!

I put together this video to show what it looks like:

Fireworks uses the CAEmitterLayer and CAEmitterCell APIs that are part of Core Animation. If you have used Apple’s SpriteKit framework in the past, you may have seen the SpriteKit particle editor that is built-in to Xcode. It’s a really cool editor, but unfortunately it only works for SKEmitterNodes.

With Fireworks, I wanted to create something similar, but for CAEmitterCells instead, so that people can use it in any iOS or macOS project, without having to import SpriteKit.

Fireworks offers several ways to adjust values:

  • Click and drag the controls on the right to quickly scrub through values
  • Left click on the preview window to move the particles around
  • Hold down CTRL or right mouse button and drag on the preview to resize the emitter
  • Enter values directly into the code editor on the left

The app comes with several built-in templates for the usual suspects (snow, rain, confetti, fire, etc). You can export the built-in textures to use freely in your own projects, and you can also import your own textures.

Creating particles visually using Fireworks is a very different experience from building them using code. As you scrub various values back and forth and see immediate results in the preview, you will run into interesting ways to mix and match values, and you will inevitably produce effects that you normally wouldn’t think to program when building particles in code.

After building Fireworks, I spent hours just playing around with the tool, sometimes creating some really strange effects 😅

I can’t wait to see what other people will create!

Upcoming Features

I have several features planned for future updates including:

  • Adding more controls to change birthrate and other values at the CAEmitterLayer level (which acts as a multiplier for cells)
  • More controls for tweaking cells (such as color speed)
  • Add ability to save multiple templates
  • A new animations section that lets you animate values over time
  • [implemented as of v1.1] Add support for Core Animation Archives for a simpler import process (thanks Guilherme Rambo for the tip!)

If there’s a feature you would like to see, I’d love to hear from you on Twitter!

Open Source and other help

If you’d like to contribute to the code, or just want to look at it, then please let me know. I am thinking of open-sourcing the project if there’s enough interest 😀

If you like Fireworks and want to support its development, there are many ways you can help!

  • Download it from the Mac App Store
  • Review it on your site or blog
  • Share it with friends and colleagues or on social media

Thank you so much for reading, I hope you enjoy using Fireworks and I look forward to hearing your feedback!

Download Fireworks here

https://www.fireworksapp.xyz

🎉🎉🎉

p.s: special thanks to John Sundell for his Splash library. All syntax highlighting in the app is powered by Splash 😊

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store