Practical UI physics

Practical UI physics

Presented at Develop Denver 2015.

Watch the video on YouTube: https://www.youtube.com/watch?v=90oMnMFozEE
Demos on CodePen: http://codepen.io/collection/XgYvmv/
Demos on GitHub: https://github.com/desandro/practical-ui-physics

Adding physics-based motion to UI can make digital interactions feel natural, comfortable, and delightful. So why is it so hard to get right, especially on the web? While mobile device SDK's have physics-based libraries built-in, web developers are missing a straight-forward way to add physics to their sites. This talk aims to solve that. Physics is a huge subject, and physics programming is often intimidating. But for UI developers, we need only to take advantage of its core principles in a practical model. This talk will cover the fundamentals of physics programming, how to develop your own physics model in JavaScript, and how to use that model to make UI feel natural.

2ce95c1d4f7e79263c7fa261f12c47c9?s=128

David DeSandro

August 06, 2015
Tweet

Transcript

  1. Practical UI Physics Dave DeSandro @desandro

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Physics

  11. Practical UI Physics

  12. Why Physics?

  13. None
  14. Mouse ! Precision — pen Might not need physics

  15. Touch ! General — finger Physics feels right

  16. Box2D JS

  17. None
  18. Practical You understand it User interface For the benefit of

    your users
  19. None
  20. Practical UI physics Change position with drag Keep moving after

    flick Flick movement slows Rubber band at ends
  21. Physics basics

  22. position velocity force friction

  23. function  update()  {      velocity  *=  friction    

     position  +=  velocity   }   ! function  applyForce(  force  )  {      velocity  +=  force   }
  24. Basics demo

  25. Drag demo

  26. Forces

  27. function  update()  {      velocity  *=  friction    

     position  +=  velocity   }   ! function  applyForce(  force  )  {      velocity  +=  force   }
  28. var  wind  //  particle  force   ! function  update()  {

         applyForce(  wind  )      velocity  *=  friction      position  +=  velocity   }   ! function  applyForce(  force  )  {      velocity  +=  force   }
  29. Wind force demo

  30. None
  31. position target distance  =  target  -­‐  position force  =  distance

     *  strength
  32. var  attractionStrength  =  0.02;   ! function  update()  {  

       //  attract  particle  to  target      var  distance  =  target  -­‐  positionX;      var  attraction  =  distance  *
        attractionStrength;      applyForce(  attraction  );   !    //  integrate  physics      velocity  *=  friction;      position  +=  velocity;   }
  33. None
  34. None
  35. Attraction demo

  36. None
  37. Conditional demo

  38. None
  39. Flickity demo

  40. Bonus: 
 Rubber band bounds

  41. None
  42. Rubber band bounds demo

  43. //  calculate  resting  position   rest  =  position  +  

       velocity  /  (  1  -­‐  friction  )
  44. function  update()  {      velocity  *=  friction    

     position  +=  velocity   }   ! function  applyForce(  force  )  {      velocity  +=  force   }
  45. More resources Nature of Code (Ch. 1 & 2)
 natureofcode.com

    Coding Math
 youtube.com/user/codingmath
  46. These demos codepen.io/desandro/tag/practical-ui-physics github.com/desandro/practical-ui-physics

  47. Thank you! — @desandro Try Flickity