A Randomised Droid That Never Behaves The Same Twice
(Feb 2017)
Launch demo
Summary
- Trended as most popular project on codepen.io
- Published in Codepen Spark weekly news letter
- Published on codepen.io front page twice
- +20 000 views on codepen.io
- Retweeted +100 times
Quotes
“This is such solid work from Nerdmanship! May the fourth be with you!”
Sarah Drasner – World leading writer, speaker and influencer of web animation
“Woahh, now here’s a great SVG animation!”
Tim Holman – Developer at Codepen.io
Internet opinions:
- “Phenomenal.”
- “I’m speechless.”
- “Probably the most well done pen I’ve ever seen.”
- “Wow, now this is amazing!”
- “SVG Animation on a new level!”
- “This is THE demo of the week!!”
About the project
I’m not a blockbuster kind of guy, but when it comes to Starwars I just can’t resist. It’s such a captivating saga. The divine Force that connects us all, the inner battle against evil, and of course the little companion droids. BB8 is such a well designed character. While recognising some reused features from R2D2’s lovable personality, we also so see a reinvented droid with his own quirky style and functionality.
Making a BB8 graphic (SVG) and bringing him to life (GSAP) was my way of getting some quality time and getting to know the little guy.
This project was made to explore an idea I had about generating randomised movement. Inspired by an Adobe After Effects feature called nullObjects, I wrote a script that would generate random values and animate chosen graphical elements synchronously to those values. If you’re interested, read my thoughts on it here.
Since creating the prototype this technique has matured and provided endless value in terms of creative opportunities, smart code and performance to my projects. The massive response from the creative coding community was a very pleasant bonus!
Another reason was to explore the process of creating interactive and engaging cartoon-inspired animations for websites. In the end, I want to use similar methods to communicate the user value of my clients’ innovative products.
Tech spec*
| Category | Total weight | FPS Desktop | FPS Mobile | Responsive | All Browsers |
|---|---|---|---|---|---|
| Prototype | 51 kB | 60 | - |  |
|
❤️ Let’s be friends!
Drop me a line at johan@nerdmanship.com or pick your favourite poison below:
- Get nerdy animation updates on the Facebook Page.
- I share things that impress me on Twitter.
- I’m forced to degrade my projects on Dribbble.
- All my experiments end up at Codepen.
- I keep a friends list of emails too. Sign up here.
License
The code is available under the MIT license.
*
| What does the table mean? | |
|---|---|
| Category | Distinguishing subdivision of all projects |
| Total weight | Total file size of minified and compressed project including all dependencies |
| Fps | Amount of frames rendered each second (max 60). An indicator on how well the code performs when tested on current version of the most common browsers. Most common desktop browser in North America is currently: Chrome. Most common mobile browser in North America is currently: Safari |
| Responsive | Animated/interactive content responds and adapts to the screen size of user devices |
| All Browser | Project works on all currently supported versions of Chrome, Firefox, Safari, MS Internet Explorer and MS Edge |