Module 3 - Stop Motion with Matrix

Let's make a stop motion pattern, where each image is displayed on a push button click.

Connecting the Button and Resistor

Just like the previous lessons, add a 100K or 10K resistor with one side connected to ground (GND) and the other side connected to the button.

The other side of the button (diagonally), must be connected to +5V.

 

Connecting the Matrix

Matrix has her 4 wires connected as follow:

  • Red wire: connect to the power (5V)
  • Black wire: connect to the ground (GND)
  • Orange wire: connect to the SDA or Analog Pin 4 (A4)
  • Yellow wire: connect to the SCL or Analog Pin 5 (A5)

Your code

This code will run the stop motion program.  Everytime the button is pressed, the next image will be displayed.  Once the loop reaches the end of the array, it restarts from 0 (the first frame).

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  var matrix = new five.Led.Matrix({
    addresses: [0x70],
    controller: "HT16K33",
    rotation: 3,
  });

  var pot = new five.Sensor("A0");
  var f = [ [6,2, 6,5, 4,6, 3,5, 2,4, 2,3, 2,2, 3,1]
          , [6,2, 6,5, 3,6, 3,5, 2,4, 2,3, 2,2, 3,1]
          , [6,2, 6,5, 2,6, 2,5, 2,4, 2,3, 2,2, 3,1]
          , [6,2, 6,5, 1,6, 2,5, 2,4, 2,3, 2,2, 3,1]
          , [6,2, 6,5, 0,6, 2,5, 2,4, 2,3, 2,2, 3,1]
          ];
  var frame = 0;

function show(frame) {
  matrix.clear();
  for ( var i=0; i<frame.length; i=i+2 ) {
    matrix.led( 0, frame[i], frame[i+1], 1 );
  }
};

  var prev = 0;
  var size = Math.round(1024/f.length);
  console.log ( 'f.length=' + f.length + ', size=' + size );

  pot.on('change', function() {
    var value = Math.floor(this.value/size);
    if ( prev != value ) {
        show(f[value]);
        prev = Math.floor(this.value/size);
    }
  });

});