Limitations inspire Creativity
Brush Ninja is a Hand-drawn Animated Gif Creator. I created it as something that everyone can 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.
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.
If you want to write about Brush Ninja you can download screenshots and hi-res logos here.
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.