const CVS_WIDTH = 340, CVS_HEIGHT = 400;

const TG_WIDTH = 300, TG_HEIGHT = 300;

// Define the display position that corresponds to the center of the turtle graphic

let cx = 170, cy = 170;

// The turtle will be created in setup()

let turtle;

// Get a reference to the canvas's 2D drawing context in setup

let dc;

// ==========================================================================

// Add variables specific to this sketch

const root2 = Math.sqrt(2);

​

function setup() {

  createCanvas(CVS_WIDTH, CVS_HEIGHT);

  cursor(CROSS);

  dc = drawingContext;

  turtle = TG.getTurtle(TG_WIDTH, TG_HEIGHT);

  initTurtle(turtle);

}

​

// Add tasks for this turtle to perform - then start it going

function initTurtle(t) {

}

​

function curve(t, length){

}

function draw() {

  background("skyblue");

  drawTGframe();

  turtle.draw(dc, cx, cy);

  drawLegend();

}

​

// Draw a picture frame to display the turtle graphic

function drawTGframe() {

  push();

  fill(255);

  stroke(0);

  strokeWeight(3);

  rectMode(CENTER);

  rect(cx, cy, TG_WIDTH, TG_HEIGHT);

  pop();

}

​

// Draw a legend stating any keyboard interactions

function drawLegend() {

  push();

  textSize(16);

  textAlign(CENTER, CENTER);

  fill(0);

  noStroke();

  rectMode(CORNER);

  translate(0, cy + 10 + TG_HEIGHT / 2);

  text("CONTROL KEYS", 0, 0, width, 20);

  text("[B] Pause  ::  [N] Restart animation", 0, 20, width, 20);

  pop();

}

​

// Keyboard interactions

function keyTyped() {

  switch (key) {

    case "n":

      turtle.start();

      break;

    case "b":

      turtle.stop();

      break;

  }

}

​