About Brush Ninja
What is Brush Ninja
Brush Ninja is a collection of browser based creative tools. I wanted to make something that everyone could use.
When I was little I was always drawing. Non-stop. I loved it, and I still do. My parents always said I should get a job at Disney and it’s something I aspired to. Toy Story came out when I was 13 and watching the trailer I realised that was what I wanted to make. So at school I focused on computers and art.
At university I studied Digitial Art with Multimedia computing with a view to getting into the video games industry as an artist (my focus changed slightly but it was still art and animation oriented); but it turns out that’s not an easy career to get in to (more likely I am just not good enough). So I slowly moved into other areas of digital art such as web design & interface design; but the passion for computer art continued.
After 11 years as the Director of Web Development at Miniclip.com (an online games company) I set out on my own with a view to working on the projects I had always been passionate about.
Whilst at Miniclip we published an animation creator called Sketch Star. It was an awesome tool, built in Flash, but I always felt it was a bit too complex. Sketch Star was taken offline in April 2013, and when I left Miniclip a few years later I decided I wanted to make something similar.
Taking inspiration from apps like Sketch Star and Flipnote (by Nintendo, my favorite video games company), I set out to make a new animation tool that was simple to use and accessible to as many people as possible. Brush Ninja is the result.
Who am I?
Brush Ninja is built by one person, Ben Gillbanks. By day I am a web designer, and father, with a love of video games. I have a passion for creating things and can’t resist experimenting with new projects. Brush Ninja is one of them. You can find out more about Ben me on my personal site; Binary Moon.
How did I make Brush Ninja?
At least 3 or 4 times a week someone will ask how Brush Ninja is built, and that is a really hard thing to answer especially for non-programmers. But I will try my best.
Brush Ninja is a web app that uses JavaScript for functionality. JavaScript is a programming language that runs in a web browser. You download the code from my website, and the browser runs it. This means that the app is running on your computer, but you don’t need to install anything.
For drawing Brush Ninja uses the fantastic FabricJS library. This is an open source library (the code is given away) for creating and editing vector drawings with JavaScript. Brush Ninja Classic used my own pixel based drawing code however this had a lot of downsides such as not being able to move, scale, and rotate individual shapes. FabricJS makes this a lot easier.
Building an app as complex as Brush Ninja creates a lot of code. To simplify how all of the different elements link together I use a framework called ReefJS. Reef allows me to manage the state of the app very easily, when a property changes Reef updates the app to reflect the change. This makes coding, and managing the code, much easier since I can separate all of the different elements.
Creating an animated gif in a browser is an interesting thing. When I started building Brush Ninja in 2013 I wasn’t sure how I would output the animations, but when I found gif.js I knew I could do everything in the browser.
Likewise, generating mp4 videos in the browser uses an open source JavaScript library called FFmpeg.wasm - this uses a technology called Web Assembly to convert a command line app (called FFMpeg) to JavaScript so that it can run in the browser.
The website itself uses Jekyll as for managing the content (pages, blog posts, galleries, store content etc). I also use Gulp 4 for preparing the JavaScript (combining and compressing files), preparing styles, and resizing images.
Press
If you want to write about Brush Ninja you can download screenshots and hi-res logos here.
Thanks
Big thanks to Juan, the creator of the original Sketch Star app for inspiring me. Thanks also to my friend Niclas for his feedback and positive thoughts - check out his games, they’re awesome.
