$30 off During Our Annual Pro Sale. View Details »

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.

David DeSandro

August 06, 2015
Tweet

More Decks by David DeSandro

Other Decks in Programming

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