experiment to see if it would be easier to make the interface

to man or machine using p5.js

*/

​

class connectingLine {

  constructor(){

  }

}

​

class stateBlock {

  constructor(x_, y_, text_) {

    this.xPos = x_;

    this.yPos = y_;

    this.text = text_;

  }

​

  move(x_, y_) {

    // move the state

    this.xPos = x_;

    this.yPos = y_;

  }

​

  draw() {

    rect(this.xPos, this.yPos, 120, 30);

    text(this.text, this.xPos + 10, this.yPos + 20);

  }

​

  mouseWithin(mX_, mY_) {

    if (dist(this.xPos, this.yPos, mX_, mY_) < 50) {

      return true;

    }

    return false;

  }

}

​

let block1;

let block2;

​

function setup() {

  createCanvas(400, 400);

  block1 = new stateBlock(40, 50, "person detected");

​

  block2 = new stateBlock(40, 100, "say hello");

}

​

function draw() {

  background(220);

  if (mouseIsPressed) {

    if (block1.mouseWithin(mouseX, mouseY)) {

      block1.move(mouseX, mouseY);

    }

  }

  block1.draw();

  block2.draw();

}

​

function mouseClicked() {

  if (block1.mouseWithin(mouseX, mouseY)) {

    if (lineStarted) {

      connectingLine.end(this)

    } else {

        new connectingLine...

        connectingLine.start(this);

      lineStarted == true;

    }

  } else {

    lineStarted == false;

  }

}

​