createCanvas(600, 600);

}

​

var x = [];

var y = [];

var twoDlist = [];

var points = [];

var mode = 1;

​

class Point {

  constructor(mousex, mousey) {

    this.x = mousex;

    this.y = mousey;

  }

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    mode = 2;

    points = [];

    x = [];

    y = [];

    twoDlist = [];

  } if (keyCode === RIGHT_ARROW) {

    mode = 3;

    points = [];

    x = [];

    y = [];

    twoDlist = [];

  } else if (keyCode === UP_ARROW) {

    mode = 1;

    points = [];

    x = [];

    y = [];

    twoDlist = [];

  }

}

​

function draw() {

  background(128);

  strokeWeight(3);

  noFill();

​

  if (mode == 1) {

    stroke(0);

    beginShape();

    for (var i = 0; i < x.length; i++) {

      curveVertex(x[i], y[i]);

    }

    endShape();

​

  }if (mode == 2) {

    stroke(255);

    beginShape();

    for (var j = 0; j < twoDlist.length; j++) {

      curveVertex(twoDlist[j][0], twoDlist[j][1]);

    }

    endShape();

​

  }

  if (mode == 3) {

    stroke(255, 250, 200);

    beginShape();

    for (var k = 0; k < points.length; k++) {

      curveVertex(points[k].x, points[k].y);

    }

    endShape();

  }

}

​

function mouseMoved() {

  if (mode == 1) {

    if (y.length > 50) {

      x.shift();

      y.shift();

    } else {

      x.push(mouseX);

      y.push(mouseY);

    }

  }

  if (mode == 2) {

    if (twoDlist.length > 50) {

      twoDlist.shift();

    } else {

      twoDlist.push([mouseX, mouseY]);

    }

  }

  if (mode == 3) {

    if (points.length > 50) {

      points.shift();

    } else {

      points.push(new Point(mouseX, mouseY));

    }

  }

}

​

​