About Brush Ninja
What is Brush Ninja
Brush Ninja is a collection of browser-based creative tools designed with the aim of making them accessible to everyone. From a young age, I had a passion for drawing, and Inspired by movies like Toy Story and with the encouragement of my parents, I wanted to work in animation. As such I focused on computer science and art during my school years.
While at university, I pursued a degree in Digital Art with Multimedia Computing with the intention of entering the video game industry as an artist, but my focus shifted slightly over time. This meant I transitioned into other realms of digital art, such as web and interface design, while maintaining my enthusiasm for computer art.
After 11 years as the Director of Web Development at Miniclip.com, an online gaming company, I set out on my own to work on things I was interested in. During my time at Miniclip, we introduced Sketch Star, an animation creation tool developed in Flash, but I felt it was overcomplicated. Following the discontinuation of Sketch Star in April 2013 and my departure from Miniclip several years later, I was determined to create a similar tool.
Drawing inspiration from applications like Sketch Star and Flipnote (from Nintendo, my favorite video game company), I decided to create a new animation tool that prioritized simplicity and accessibility for a broad audience. The outcome is Brush Ninja.
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 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 based application 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 freely available for anyone to use) for creating and editing vector drawings with JavaScript. The original version of Brush Ninja 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 all this possible, and more!
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 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.
