You can do what with math now?

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

583a0cfd3e0ec851166c5c6fa5e506a5?s=128

Raquel Vélez

May 01, 2014
Tweet

Transcript

  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!

  63. None
  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