Rick Waldron

@rwaldron

github.com/rwaldron

Bocoup

@bocoup

bocoup.com





Animating Things

with JavaScript



DOM Elements

This Fades In and Out




Altering the appearance of an element by modifying the value of a style property at a given interval.

Canvas




Altering the position by redrawing at a given interval.

CSS3 3D Effects

!@#$%


http://codepen.io/GreenSock/pen/kingu




Altering the appearance of an element by modifying the value of a style property at a given interval.





Animating Nodebots

with JavaScript




"Moving objects in the fake world, moving objects in the real world...", Mike's words hung in the air.

"with JavaScript." Rick finished.



Remember?

Altering the appearance or position of an element by modifying the value of a style property at a given interval





Back in 2012...

Temporally Bound Task Sequencing




Complex, Coordinated Servo Animations




Frame Constrained Servo Movement

To move the servo horn incrementally from point A to point B over an arbitrary amount of time at 60fps.

last = position
for each frame:
  delta = percent * (distance / rate)
  delta = eased(delta)
  position = (last + delta)

Relative to Center Point

Center = Zero = 90°
Center +
Center -
Center 0
null



Degrees of Freedom

"DOF"




More Freedom

More Complexity

3 DOF ⋅ 2 Legs

Kick Ball

Obstacle Course

Confrontation





...

3 DOF ⋅ 4 Legs

Balance Wave

Balance Shuffle

Shuffle Tantrum

Working Out

Rampage





...

6 DOF ⋅ 2 Legs

Side to Side

Front to Back

Stretch

On The Lookout

Ballet





...





So What?





Because we can.

github.com/rwaldron/johnny-five

twitter.com/rwaldron/lists/nodebotics