Tweet
Tweet

Slide 1

Slide 1 text

Johnny Five Bringing the JavaScript Culture to Hardware Rebecca Murphey • Times Open Science Fair Wednesday, November 21, 12

Slide 2

Slide 2 text

rmurphey.com • @rmurphey • bocoup.com Wednesday, November 21, 12

Slide 3

Slide 3 text

Wednesday, November 21, 12

Slide 4

Slide 4 text

Wednesday, November 21, 12

Slide 5

Slide 5 text

Wednesday, November 21, 12

Slide 6

Slide 6 text

Wednesday, November 21, 12

Slide 7

Slide 7 text

Wednesday, November 21, 12

Slide 8

Slide 8 text

Wednesday, November 21, 12

Slide 9

Slide 9 text

Wednesday, November 21, 12

Slide 10

Slide 10 text

Wednesday, November 21, 12

Slide 11

Slide 11 text

Wednesday, November 21, 12

Slide 12

Slide 12 text

Wednesday, November 21, 12

Slide 13

Slide 13 text

javascript culture Wednesday, November 21, 12

Slide 14

Slide 14 text

javascript culture view source / share by default libraries lower the barrier to entry show-and-tell is encouraged & enabled new solutions are open & collaborative we embrace the crazy Wednesday, November 21, 12

Slide 15

Slide 15 text

Wednesday, November 21, 12

Slide 16

Slide 16 text

sparkfun.com Wednesday, November 21, 12

Slide 17

Slide 17 text

Wednesday, November 21, 12

Slide 18

Slide 18 text

var  five  =  require("johnny-­‐five"); var  board  =  new  five.Board(); board.on("ready",  function()  {    var  buttons  =  {        rock:  new  five.Button(2),        paper:  new  five.Button(3),        scissors:  new  five.Button(4)    };    var  lcd  =  new  five.LCD({        pins:  [  7,  8,  9,  10,  11,  12  ]    });    var  gameOverLED  =  new  five.Led(  13  );    var  losers  =  {        rock:  "scissors",        paper:  "rock",        scissors:  "paper"    };    var  choices  =  Object.keys(  losers  );    var  waiting  =  false;    var  computerPoints  =  0;    var  playerPoints  =  0;    var  totalTurns  =  5;    var  isGameOver  =  false;    var  points  =  {};    choices.forEach(function(  buttonName  )  {        var  button  =  buttons[  buttonName  ];        button.on(  "up",  function()  {            turn(  buttonName  );        });    });    reset();    function  computerChoice()  {        return  choices[  Math.floor(  Math.random()  *  choices.length  )  ];    }    function  reset()  {        points  =  {            player:  0,            computer:  0        };        isGameOver  =  false;    }    function  turn(  player  )  {        if  (  waiting  )  {  return;  }        gameOverLED.off();        waiting  =  true;        var  computer  =  computerChoice();        if  (  player  !==  computer  )  {            points[  playerIsWinner(  player,  computer  )  ?  "player"  :  "computer"  ]++;        }        updateScoreboard(  player,  computer  );        waiting  =  false;        if  (  points.player  >  3  ||  points.computer  >  3  )  {            gameOver();        }    }    function  playerIsWinner(  playerChoice,  computerChoice  )  {        return  losers[  computerChoice  ]  !==  playerChoice;    }    function  updateScoreboard(  playerChoice,  computerChoice  )  {        lcd.clear();        lcd.print(  "Robot  :  "  +  points.computer  +  "  :  "  +            computerChoice.substr(0,  1).toUpperCase()  );        lcd.setCursor(  0,  1  );        lcd.print(  "Human  :  "  +  points.player  +      "  :  "  +            playerChoice.substr(0,  1).toUpperCase()  );    }    function  gameOver()  {        lcd.clear();        lcd.print(            points.computer  >  points.player  ?            'ROBOT  WINS'  :            'HUMAN  WINS'        );        gameOverLED.on();        reset();    }    board.repl.inject({        buttons:  buttons,        lcd:  lcd,        gameOverLED:  gameOverLED    }) }); Rock Paper Scissors on an Arduino in 107 lines of code. Wednesday, November 21, 12

Slide 19

Slide 19 text

var  five  =  require("johnny-­‐five"); var  board  =  new  five.Board(); board.on("ready",  function()  {    var  buttons  =  {        rock:  new  five.Button(2),        paper:  new  five.Button(3),        scissors:  new  five.Button(4)    };    var  lcd  =  new  five.LCD({        pins:  [  7,  8,  9,  10,  11,  12  ]    });    var  gameOverLED  =  new  five.Led(  13  );    var  losers  =  {        rock:  "scissors",        paper:  "rock",        scissors:  "paper"    };    var  choices  =  Object.keys(  losers  );    var  waiting  =  false;    var  computerPoints  =  0;    var  playerPoints  =  0;    var  totalTurns  =  5;    var  isGameOver  =  false;    var  points  =  {};    choices.forEach(function(  buttonName  )  {        var  button  =  buttons[  buttonName  ];        button.on(  "up",  function()  {            turn(  buttonName  );        });    });    reset();    function  computerChoice()  {        return  choices[  Math.floor(  Math.random()  *  choices.length  )  ];    }    function  reset()  {        points  =  {            player:  0,            computer:  0        };        isGameOver  =  false;    }    function  turn(  player  )  {        if  (  waiting  )  {  return;  }        gameOverLED.off();        waiting  =  true;        var  computer  =  computerChoice();        if  (  player  !==  computer  )  {            points[  playerIsWinner(  player,  computer  )  ?  "player"  :  "computer"  ]++;        }        updateScoreboard(  player,  computer  );        waiting  =  false;        if  (  points.player  >  3  ||  points.computer  >  3  )  {            gameOver();        }    }    function  playerIsWinner(  playerChoice,  computerChoice  )  {        return  losers[  computerChoice  ]  !==  playerChoice;    }    function  updateScoreboard(  playerChoice,  computerChoice  )  {        lcd.clear();        lcd.print(  "Robot  :  "  +  points.computer  +  "  :  "  +            computerChoice.substr(0,  1).toUpperCase()  );        lcd.setCursor(  0,  1  );        lcd.print(  "Human  :  "  +  points.player  +      "  :  "  +            playerChoice.substr(0,  1).toUpperCase()  );    }    function  gameOver()  {        lcd.clear();        lcd.print(            points.computer  >  points.player  ?            'ROBOT  WINS'  :            'HUMAN  WINS'        );        gameOverLED.on();        reset();    }    board.repl.inject({        buttons:  buttons,        lcd:  lcd,        gameOverLED:  gameOverLED    }) }); function  updateScoreboard(  playerChoice,  computerChoice  )  {    lcd        .clear()        .print(  "Robot  :  "  +  points.computer  +  "  :  "  +            computerChoice  )        .setCursor(  0,  1  )        .print(  "Human  :  "  +  points.player  +      "  :  "  +            playerChoice  ); } Wednesday, November 21, 12

Slide 20

Slide 20 text

sparkfun.com Wednesday, November 21, 12

Slide 21

Slide 21 text

Wednesday, November 21, 12

Slide 22

Slide 22 text

var  writeMessage  =  function()  {    board.digitalWrite(lcd.rsPin,  board.firmata.LOW);    sendCommand([0,0,0,0,0,0,0,1]);    board.digitalWrite(lcd.rsPin,  board.firmata.HIGH);    sendCommand([0,1,0,0,1,0,1,0]);    sleep(200);    sendCommand([0,1,1,0,1,1,1,1]);    sleep(200);    sendCommand([0,1,1,0,1,0,0,0]);    sleep(200);    sendCommand([0,1,1,0,1,1,1,0]);    sleep(200);    sendCommand([0,1,1,0,1,1,1,0]);    sleep(200);    sendCommand([0,1,1,1,1,0,0,1]);    sleep(200);    sendCommand([0,0,1,0,1,1,0,1]);    sleep(200);    sendCommand([0,1,1,0,0,1,1,0]);    sleep(200);    sendCommand([0,1,1,0,1,0,0,1]);    sleep(200);    sendCommand([0,1,1,1,0,1,1,0]);    sleep(200);    sendCommand([0,1,1,0,0,1,0,1]);    board.digitalWrite(lcd.rsPin,  board.firmata.LOW); }; Wednesday, November 21, 12

Slide 23

Slide 23 text

Wednesday, November 21, 12

Slide 24

Slide 24 text

sparkfun.com Wednesday, November 21, 12

Slide 25

Slide 25 text

Wednesday, November 21, 12

Slide 26

Slide 26 text

Wednesday, November 21, 12

Slide 27

Slide 27 text

Wednesday, November 21, 12

Slide 28

Slide 28 text

var  lcd  =  new  five.LCD({    pins:  [  7,  8,  9,  10,  11,  12  ] }); function  updateScoreboard(  playerChoice,   computerChoice  )  {    lcd        .clear()        .print(  "Robot  :  "  +  points.computer  +  "  :  "  +            computerChoice  )        .setCursor(  0,  1  )        .print(  "Human  :  "  +  points.player  +      "  :  "  +            playerChoice  ); } Wednesday, November 21, 12

Slide 29

Slide 29 text

sparkfun.com Wednesday, November 21, 12

Slide 30

Slide 30 text

Wednesday, November 21, 12

Slide 31

Slide 31 text

Wednesday, November 21, 12

Slide 32

Slide 32 text

Wednesday, November 21, 12

Slide 33

Slide 33 text

github.com/rwldrn/johnny-­‐five github.com/rmurphey/johnny-­‐five-­‐projects sparkfun.com Wednesday, November 21, 12

Slide 34

Slide 34 text

rmurphey.com • @rmurphey • bocoup.com Wednesday, November 21, 12