You can do what with math now?

Opening Keynote at Web Directions Code 2014 in Melbourne, Australia.

Demo code at https://github.com/rockbot/wdc14 and https://github.com/rockbot/manny.

Video for slide 63 can be seen at http://youtu.be/2oNqa-cL_ZQ

1. You can do WHAT with math now?! Brought to you by @rockbot
2. Math is everywhere.
3. P art 1: Our Situation
4. Our Situation
5. Our Situation
6. Our Situation
7. Environment (canvas) Our Situation
8. Joints End Effector Our Situation
9. Links L1 L2 Our Situation
10. P art 2: Theory
11. Theory Global Coordinate System x y (0,0)
12. Theory Point in Space
13. Theory Coordinates (x, y) x y
14. Theory Coordinates (x, y) x y Location of point: x y 0 P =
15. Theory (x1 , y1 ) x1 , x2 , x3 y1 (x2 , y2 ) (x3 , y3 ) y2 y3
16. Theory Local Coordinate Systems
17. Theory L1 (L1 , 0) y x
18. Theory Local Coordinate Systems
19. Theory Rotation about a Joint
20. Theory Angle of Rotation, θ
21. Theory Pbefore Pafter θ
22. Pbefore Pafter θ Theory Rotation of joint: cos( -sin( 0 sin( cos( 0 0 0 1 Rz =
23. Theory Pafter = Rz (θ)ɾPbefore cos( -sin( 0 sin( cos( 0 0 0 1 x y 0 x y 0 = ɾ
24. Theory θ1 θ2
25. Rotation of joint: cos( -sin( 0 sin( cos( 0 0 0 1 Rz = Location of point: x y 0 P = Theory
26. cos( -sin( 0 F sin( cos( 0 F 0 0 1 0 0 0 0 1 Theory FromHTo = Rz (θ) P
27. cos( -sin( 0 L sin( cos( 0 0 0 0 1 0 0 0 0 1 Theory 1H2 =
28. cos( -sin( 0 L sin( cos( 0 0 0 0 1 0 0 0 0 1 Theory 2HEE =
29. Theory GHEE = GH1ɾ1H2ɾ2HEE Location of the end effector in global space:
30. # # 0 G # # 0 G 0 0 1 0 0 0 0 1 Theory GH ΕΕ =
31. P art 2: Software
32. HTML
33. <canvas id="canvas" width="500" height=“300") </canvas>
34. JavaScript
35. var ctx = canvas.getContext("2d");
36. // draw a point ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fill(); Canvas
37. // draw a line ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); Canvas
38. // other useful(?) api calls ctx.save(); // save the position/orientation ctx.restore(); // revert to saved position/orientation ! ctx.clearRect(0, 0, 500, 300); // clear the board! ! ctx.rotate(rad); ctx.translate(x, y); Canvas
39. // other useful(?) api calls ctx.save(); // save the position/orientation ctx.restore(); // revert to saved position/orientation ! ctx.clearRect(0, 0, 500, 300); // clear the board! ! ctx.rotate(rad); ctx.translate(x, y); Canvas Can we avoid the math and just use these?
40. Demo: If we only use canvas…
41. Lesson: It’s possible!
42. Node.js
43. var vektor = require("vektor");
44. var vektor = require('vektor'), p = vektor.vector, r = vektor.rotate, h = vektor.homog; ! var LINK_LENGTHS = [100, 100], ORIGIN = new p([250, 50, 0]); Vektor
45. var H = h( r.RotX(0), ORIGIN ), H1 = H.dot( h( r.RotZ(angles[0]), 0 ) ), H2 = H1.dot( h( r.RotZ(angles[1]), new p([LINK_LENGTHS[0],0,0]) ) ), H3 = H2.dot( h( 0, new p([LINK_LENGTHS[1],0,0]) ) ); ! var joints = [H1.getPoint(), H2.getPoint(), H3.getPoint()]; Vektor
46. Demo: If we use vektor + canvas…
47. Lesson: It’s the same result!
48. P art 3: Robot Interlude
49. This is a Serial Manipulator https://flic.kr/p/4q4kSc
50. This is a Serial Manipulator Look familiar? https://flic.kr/p/4q4kSc
51. Robot Kinematics: 101
52. f(θ1 ,θ2 ) = P = Joint Angles Position of End Effector x y 0 Forward Kinematics
53. g(xEE , yEE ) = [θ1 , θ2 ] Joint Angles Position of End Effector Inverse Kinematics
54. Demo: Forward and Inverse Kinematics
55. Lesson: Canvas can’t do that.
56. P art 4: What?!
57. Beyond the Browser
58. This is Manny. (Manny the Manipulator.)
59. Qty Item Cost 1 Arduino UNO + breadboard $25 2 Standard Servos $30 2 Sticks $2 1 Platform $5 Wires, tape, glue, swag $5 Total $67 Manny’s Hardware
60. var j5 = require(“johnny-five"); Manny’s Software
61. var servo = five.Servo({ pin: 9, range: [10, 170] }); ! servo.to(angle); Manny’s Software
62. Demo: OMG ROBOT!
64. Lesson: Math works everywhere.
65. Dig in.
66. Have fun!
67. Thank you :-D
68. Raquel Vélez @rockbot raquel@ js.com Code: http://github.com/rockbot/manny