let xPos = -DIAMETER / 2;

let xVel = 4;

​

let state = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function drawIntro() {

  background(255);

  textSize(24);

  textAlign(CENTER, CENTER);

  fill(0);

  text("press mouse to start", width / 2, height / 2);

}

​

function drawAnimation() {

  background(220, 20, 120);

​

  // draw

  fill(255);

  ellipse(xPos, height / 2, DIAMETER);

​

  // update pos

  xPos += xVel;

​

  // check if we need to wrap around

  if (xPos > width + DIAMETER / 2) {

    xPos = -DIAMETER / 2;

  }

}

​

function draw() {

  if (state == 0) {

    // draw intro

    drawIntro();

  } else if (state == 1) {

    // draw and update ellipse

    drawAnimation();

  } else if (state == 2) {

    // do nothing. pause

  }

}

​

function mouseClicked() {

  if (state == 0) {

    // in intro, go to animation

    state = 1;

  } else if (state == 1) {

    // in animation, go to pause

    state = 2;

  } else if (state == 2) {

    // in pause, go to animation

    state = 1;

  }

  // Since we're just cycling through the numbers 0, 1 and 2

  //   the entire logic of this function could simply be:

  // state = (state + 1) % 3;

}

​