Presentation: Algorithms for Animation

Location:

Duration

Duration: 
2:55pm - 3:45pm

Day of week:

Level:

Persona:

Key Takeaways

  • Understand the role and design/development considerations for animation in UI. 
  • Explore animation details around functions like interpolation (and easing, particle effects, collisions, etc) and physics engine components
  • See and Learn from live examples demonstrating animation concepts, WebGL, and various toolkits.

Abstract

Animations don’t just make things look cool, they provide context and additional details. Animations give us a third dimension with which to communicate: time. The real world doesn’t move in a perfectly linear fashion and when we see things that do, it feels awkward and unnatural. With motion, the difference between dull and delightful often comes down to the math.

This talk walks you through the basic principles of animation design and the simple formulas that can be used to create robust animations. Starting with a quick introduction into interpolation functions and how they can be crafted to represent natural movement we will then see how this translates into software applications and then dive briefly into physics engines.

You can create dramatic effects with just a little code and without needing to rely on heavy frameworks. Performance and optimization tradeoffs between CSS3 and Javascript will also be discussed as well as how and when to use the various tools available.

Interview

Question: 
What is your role today?
Answer: 
Courtney Hemphill is a Partner at Carbon Five, an integrated product design and development firm known for its work with early stage and growth companies such as Square, Altschool, StitchFix, Thumbtack and many others. She has done full stack development for over 10 years for both startup and enterprise companies. Today she spends a lot of her time convincing people that building less is more.
Courtney volunteers with non-digital and digital non-profits focused on bridging divides between technology, gender, and the natural world. Feel free to ask her about free workshops with RailsBridge, resources from Women Who Code and the great programs at NatureBridge.
Several times a year she is lucky to travel to speak at conferences in the US and abroad; most recently at SXSW V2V, FullStack Barcelona, CascadiaJS, Web Directions Sydney and O'Reilly Fluent. She finds a healthy amount of time to unplug from the internets, traveling in search of the best rock climbing spots in the world, often returning to her primary stomping ground in Yosemite Valley.
Question: 
Can you explain your talk title to me?
Answer: 
The talk (and ergo title) was an attempt to try and get back to the simple math used in the huge complex front end frameworks of today. This simple math can then serve as a common language to be used by designers and developers in order to create more dynamic and interesting software interfaces.
Question: 
What’s the motivation for your talk?
Answer: 
Modern day, full stack software requires developers to get closer to the front end experience. Dynamic interfaces, augmented and virtual reality, and elements of game design all play more of a role in the software platforms being developed today. This is an introduction to the foundational skills required to create more creative, dynamic experiences for developers that work across the stack.
Question: 
There is a line in your abstract that says: This talk walks you through the basic principles of animation design and the simple formulas that can be used to create robust animations. What are some of the principles and formulas you’ll go into?
Answer: 
Interpolation Primitives Particle effects (velocity, motion, acceleration) Fixed constraints Collision constraints Physics engines Some WebGL and WebVR Mostly a very simple walk through of the interpolation function, some easing functions, and then a very basic intro of physics engines (this math is insane so it is more the concepts).
Question: 
How approachable are these algorithms? Do I need a math degree for this talk?
Answer: 
No!
Question: 
QCon targets advanced architects and sr development leads, what do you feel will be the actionable benefits that type of persona will walk away from your talk with?
Answer: 
This talk is half entertainment, half education. I want people to walk away thinking about how they can develop more usable and interesting interfaces. Perhaps also how they can work more closely with designers to really push the boundaries of the software experience. It is also a fun introduction to game programming, WebGL and WebVR.

Speaker: Courtney Hemphill

Partner & Tech Lead @CarbonFive

Courtney Hemphill is a partner at Carbon Five, an integrated product design and development firm. She has done full stack development for over 10 years with both startup and enterprise companies. Today she spends a lot of her time convincing people that building less is more and that the cloud is solid and secure. Courtney volunteers with non-digital and digital non-profits that have nothing to do with actual bridges but reference them a lot. Feel free to ask her about free workshops with RailsBridge, resources from Women Who Code and the cool programs at NatureBridge. Several times a year she is lucky to travel to speak at conferences in the US and abroad; most recently at FullStack Fest Barcelona, CascadiaJS, Web Directions Sydney and O'Reilly Fluent. She finds a healthy amount of time to unplug from the internets, traveling in search of the best rock climbing spots in the world, often returning to her primary stomping ground in Yosemite Valley.

Find Courtney Hemphill at

Tracks

Monday, 13 June

Tuesday, 14 June

Wednesday, 15 June