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.

Transcript

1. Practical UI Physics
   Dave DeSandro
   @desandro
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Physics
    

    View Slide

11. Practical UI Physics
    

    View Slide

12. Why Physics?
    

    View Slide

13. View Slide

14. Mouse
    !
    Precision — pen
    Might not need physics
    

    View Slide

15. Touch
    !
    General — finger
    Physics feels right
    

    View Slide

16. Box2D JS
    

    View Slide

17. View Slide

18. Practical
    You understand it
    User interface
    For the benefit of your users
    

    View Slide

19. View Slide

20. Practical UI physics
    Change position with drag
    Keep moving after flick
    Flick movement slows
    Rubber band at ends
    

    View Slide

21. Physics basics
    

    View Slide

22. position
    velocity
    force
    friction
    

    View Slide

23. function  update()  {  
       velocity  *=  friction  
       position  +=  velocity  
    }  
    !
    function  applyForce(  force  )  {  
       velocity  +=  force  
    }
    

    View Slide

24. Basics demo
    

    View Slide

25. Drag demo
    

    View Slide

26. Forces
    

    View Slide

27. function  update()  {  
       velocity  *=  friction  
       position  +=  velocity  
    }  
    !
    function  applyForce(  force  )  {  
       velocity  +=  force  
    }
    

    View Slide

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

    View Slide

29. Wind force demo
    

    View Slide

30. View Slide

31. position target
    distance  =  target  -­‐  position
    force  =  distance  *  strength
    

    View Slide

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;  
    }
    

    View Slide

33. View Slide

34. View Slide

35. Attraction demo
    

    View Slide

36. View Slide

37. Conditional demo
    

    View Slide

38. View Slide

39. Flickity demo
    

    View Slide

40. Bonus: 

    Rubber band bounds
    

    View Slide

41. View Slide

42. Rubber band
    bounds demo
    

    View Slide

43. //  calculate  resting  position  
    rest  =  position  +  
       velocity  /  (  1  -­‐  friction  )
    

    View Slide

44. function  update()  {  
       velocity  *=  friction  
       position  +=  velocity  
    }  
    !
    function  applyForce(  force  )  {  
       velocity  +=  force  
    }
    

    View Slide

45. More resources
    Nature of Code (Ch. 1 & 2)

    natureofcode.com
    Coding Math

    youtube.com/user/codingmath
    

    View Slide

46. These demos
    codepen.io/desandro/tag/practical-ui-physics
    github.com/desandro/practical-ui-physics
    

    View Slide

47. Thank you! — @desandro
    Try Flickity
    

    View Slide