​

const PARAMS = {

  pitch: 0,

  roll: 0,

  blokdotsIsConnected: false,

};

​

function setup() {

  createCanvas(500, 500);

​

  const socket = io("http://localhost:8777/blokdots");

​

  socket.on("connect", function () {

    PARAMS.blokdotsIsConnected = true;

  });

  socket.on("disconnect", function () {

    PARAMS.blokdotsIsConnected = false;

  });

​

  socket.on("blokdots", function (data) {

    if (data.msg === "pitch") {

      PARAMS.pitch = data.val;

    }

    if (data.msg === "roll") {

      PARAMS.roll = data.val;

    }

  });

​

  const f1 = pane.addFolder({

    title: "Monitoring",

  });

  f1.addMonitor(PARAMS, "pitch");

  f1.addMonitor(PARAMS, "roll");

  f1.addMonitor(PARAMS, "blokdotsIsConnected");

}

​

function draw() {

  background(255);

  const posX = map( PARAMS.pitch, -90, 90, 0, width );

  const posY = map( PARAMS.roll, -90, 90, 0, height );

  circle( posX, posY, 10 );

}

​