const INSTRUCTIONS = 0;

const CHOOSING = 1;

const MANTRAS = 2;

const BREATHING = 3;

const JOURNALING = 3;

​

function setup() {

  createCanvas(400, 400);

}

​

function mousePressed() {

}

​

function draw() {

  background(220);

​

  switch (state) {

    case INSTRUCTIONS:

      displayInstructions();

      break;

      case CHOOSING:

      displayChoosing();

      break;

  }

}

​

function keyPressed() {

  if (key = 'e' && state === INSTRUCTIONS) {

    state = CHOOSING;

  }

}

​

function displayInstructions() {

  image(coffeBackgroundImage)

  text("choose your whatever");

  text("press 'e' to continue");

}

​

function displayChoosing() {

  image(cloudImage);

  text("choose your whatever");

  // display the buttons

}

​

let breathingButton;

​

function setup() {

  createCanvas(100, 100);

  background(0);

  // make the three buttons

  breathingButton = createButton('meditate');

  breathingButton.position(0, 0);

  breathingButton.size(100,200);

  breathingButton.mousePressed(breathingButton);

}

​

function selectBreathing() {

  state = BREATHING;

}

​