Controlling an AxiDraw in real-time from P5.js

axidraw.js

let reader;
let writer;
let connected = false;
let wasConnected = false;
let drawing = false;

const encoder = new TextEncoder();
const decoder = new TextDecoder();

let lastX = 0;
let lastY = 0;
let x = 0;
let y = 0;

function setup() {
  createCanvas(400, 400);
  
  const button = createButton('Connect');
  button.position(0, 0);
  button.mousePressed(connectAxiDraw);
  
  background(255, 0, 0);
}

function draw() {
  if (connected && !wasConnected) {
    background(0, 255, 0);
  }
  
  wasConnected = connected;
  
  if (!connected) {
    return;
  }
  
  if (dist(lastX, lastY, mouseX, mouseY) > 10) {
    const s = 0.1;
    moveTo((mouseX - lastX) * s, (mouseY - lastY) * s);
    
    if (drawing) {
      stroke(0);
      line(lastX, lastY, mouseX, mouseY);
    }
    
    lastX = mouseX;
    lastY = mouseY;
  }
}

function mousePressed() {
  penDown();
  drawing = true;
}

function mouseReleased() {
  penUp();
  drawing = false;
}

function moveTo(x, y) {
  const stepsPerMM = 80;
  const xSteps = Math.round(x * stepsPerMM);
  const ySteps = Math.round(y * stepsPerMM);
  const duration = Math.round(dist(0, 0, x, y) * 50);
  
  send(`XM,${duration},${xSteps},${ySteps}\r`);
}

function penUp() {
  send('SP,1\r');
}

function penDown() {
  send('SP,0\r');
}

async function send(data) {
  if (!connected) {
    return;
  }
  
  console.log(data);
  
  const dataArrayBuffer = encoder.encode(data);
  await writer.write(dataArrayBuffer);
}

function connectAxiDraw() {
  (async () => {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 115200 });
    
    writer = port.writable.getWriter();
    reader = port.readable.getReader();
    connected = true;
  })();
}