Workshop

WebGL Animation

Speaker: Carl Bateman


Tuesday, 16th January 2017
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London

Next: Thursday, 9th Feb 2017 - Into the Second Dimension

Carl Bateman

TL;DR

WebGL Workshop
Khronos London Chapter

♠ Learning ♠
♣ Networking ♣
♥ Easier than googling ♥
♦ Beer ♦

Contact

 

meetup.com/WebGL-Workshop-London
[email protected]
@CarlBateman

Participate


Ask questions


Takes photos

Tweet!!!

#WebGLWorkshop
#WebGLLondon

Thanks to...

• For the pizza & beer
• With whom I am affiliated

• Venue
• With whom I am in no way affiliated

• 45% discount "WebGL Programming Guide" eBook edition
• Check out the MeetUp page

WebGL Workshop


After workshop drinkies and

further networking

Agenda

  1. Animation vs Simulation
  2. requestAnimationFrame()
  3. DIY
  4. Tween.js
  5. Keyframe.js

Animation vs Simulation

Simulation

Action under gravity

v = u + at                   (where a = g = 9.8m/s²)

s'' = s' + (v + u) × t    (where s is displacement)
                   2

Animation

Animation

Animation

WebGL Workshop


requestAnimationFrame()

WebGL Workshop


DIY

WebGL Workshop


Tween.js

WebGL Workshop


Keyframe.js