let duration = 1;

let exponent = 3;

let angleMin;

let angleMax;

let canvasW = 400;

let canvasH = 400;

let x = canvasW / 2;

let y = canvasH / 2;

let w = canvasW / 2;

let h = canvasH / 2;

​

let NotDrawn = 0;

let Drawing = 1;

let Drawn = 2;

let arcDrawingState = NotDrawn;

let paused = false;

let advance = false;

​

let strokeColor;

let fillColor;

let thickness = 2;

​

function setup()

{

  createCanvas(canvasW, canvasH);

  angleMin = 0.00001;

  angleMax = TAU;

  strokeColor = color(255, 255, 0, 255);

  fillColor = color(255, 255, 0, 100);

}

​

function draw()

{

  if (paused && !advance) return;

  background(40);

  // push();

  // stroke(255, 100);

  // strokeWeight(2);

  // noFill();

  // arc(80, 80, 30, 30, 0, angleMin);

  // pop();

  switch (arcDrawingState)

  {

  default:

    break;

  case Drawing:

    DrawArc();

    break;

  case Drawn:

    DrawEllipse();

    break;

  }

  advance = false;

}

​

function keyPressed()

{

  switch (keyCode)

  {

  case 32:

    BeginDrawingArc();

    break;

  case 80:

    paused = !paused;

    break;

  case 191:

    paused = true;

    advance = true;

    break;

  }

}

​

function BeginDrawingArc()

{

  arcDrawingState = Drawing;

  timer = 0;

}

​

function DrawArc()

{

  function a(t) { return pow(t, exponent); }

  function b(t) { return 1 - a(1 - t); }

  let t = timer / duration;

  let interpolant = t < 0.5 ? a(2 * t) / 2 : b(2 * t - 1) / 2 + 0.5;

  let angle = lerp(angleMin, angleMax, interpolant);

  push();

  stroke(strokeColor);

  fill(fillColor);

  strokeWeight(thickness);

  translate(x, y);

  scale(1, -1, 1);

  arc(0, 0, w, h, 0, angle);

  pop();

  timer += deltaTime / 1000;

  if (timer >= duration)

    EndDrawingArc();

}

​

function DrawEllipse()

{

  push();

  stroke(strokeColor);

  fill(fillColor);

  strokeWeight(thickness);

  translate(x, y);

  ellipse(0, 0, w, h);

  pop();

}

​

function EndDrawingArc()

{

  arcDrawingState = Drawn;

}

​

function DebugPause(arg)

{

  paused = true;

}

​

​