Currently, this program operates as a paint program that

recognizes the rectangle you're trying to draw.

​

That rectangle represents the machine. It's not yet possible

to draw the rest of the diagram. I'll implement that next:

​

0. Input and output arrows will pop up at the same time as the 

rectangle.

​

1. Upon pressing the "I" key, the input will appear.

​

2. Upon pressing the "O" key, the output will appear.

​

3. Upon pressing the "M" key, the machine label will appear.

​

4. Upon pressing the "A" key, the input to output transformation 

will be animated. During this animation, any static input or output

that has been drawn will remain visible. This will work as follows.

​

a. The input will be typeset on top of a small rectangle that has the 

same fill as the canvas background. If a static input is already shown, 

the animated input will be drawn on top of it, so at the start, it won't 

be possible to perceive that a new input has been drawn.

​

b. The animated input and its background rectangle will move across the

input arrow, floating on top of it; then it will disappear behind the 

machine and reappear on the output side, floating across the output arrow

until landing to the right of the head of the output arrow (on top of

any existing output that has already been drawn).

​

Note: All typography will be implemented with KaTeX.

*/

​

let arrX = []; //array of X-values

let arrY = []; //array of Y-values

let x, y; //coordinates of rect's top-left corner

let w, h; //width and height

let rectIsSet = false; //true if rect is determined

​

function setup() {

  createCanvas(400, 400);

  stroke(0);

  strokeWeight(2);

}

​

function draw() {

  background(240);

  noFill();

  if (mouseIsPressed) {

    beginShape();

    for (let i = 0; i < arrX.length; i++) {

      vertex(arrX[i], arrY[i]);

    }

    endShape();    

  }

  else if(rectIsSet) {

    rect(x, y, w, h);

  }

}

​

function mouseDragged() {

  arrX.push(mouseX);

  arrY.push(mouseY);

}

​

function mouseReleased() {

  //sort arrays in ascending order

  arrX.sort((a,b) => a - b);

  arrY.sort((a,b) => a - b);

  //set rect parameters

  x = arrX[0];

  y = arrY[0];

  w = arrX[arrX.length - 1] - arrX[0];

  h = arrY[arrY.length - 1] - arrY[0];

  rectIsSet = true;

}