David DeSandro
August 06, 2015
1.2k

# Practical UI physics

Presented at Develop Denver 2015.

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.

August 06, 2015

## Transcript

1. Practical UI Physics
Dave DeSandro
@desandro

2. Physics

3. Practical UI Physics

4. Why Physics?

5. Mouse
!
Precision — pen
Might not need physics

6. Touch
!
General — ﬁnger
Physics feels right

7. Box2D JS

8. Practical
You understand it
User interface
For the beneﬁt of your users

9. Practical UI physics
Change position with drag
Keep moving after ﬂick
Flick movement slows
Rubber band at ends

10. Physics basics

11. position
velocity
force
friction

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

13. Basics demo

14. Drag demo

15. Forces

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

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

18. Wind force demo

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

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

21. Attraction demo

22. Conditional demo

23. Flickity demo

24. Bonus:
Rubber band bounds

25. Rubber band
bounds demo

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

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

28. More resources
Nature of Code (Ch. 1 & 2)
natureofcode.com
Coding Math