let page = 'MENU'

​

let white = '#F0EDEE'

let black = '#0A090C'

let buttonDefaultColor = '#2C666E'

let buttonHoverColor = '#07393C'

​

let buttonSound

let soundPlayed = false

​

// interactive orbs for the buttons

let orbAmount = 10

let orbSize

let orbColor = '#90DDF0'

let startOrbs = []

let controlOrbs = []

​

function preload() {

  // load the button sound

  buttonSound = loadSound('buttonSound.mp3')

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // allign everything to the center

  textAlign(CENTER, CENTER)

  // initialize the orbs

  orbSize = width * 0.025

  for (let i = 0; i < orbAmount; i++) {

    startOrbs.push(new Orb(width / 2, height / 2, orbSize, orbColor, false))

  }

}

​

function button(captions, defaultColor, hoverColor, x, y, w, h, action) {

  // Check if mouse inside

  let insideX = mouseX > x - w/2 && mouseX < x + w/2

  let insideY = mouseY > y - h/2 && mouseY < y + h/2

  let mouseHover = insideX && insideY

  // current color

  let currentColor = mouseHover ? hoverColor : defaultColor

  // Settings

  rectMode(CENTER)

  fill(currentColor)

  noStroke()

  rect(x, y, w, h, 30)

  textSize(36)

  fill(white)

  text(captions, x, y)

  if (mouseIsPressed && mouseHover && !soundPlayed) {

    action()

    soundPlayed = true

    buttonSound.play()

  } else if (!mouseIsPressed) {

    soundPlayed = false

  }

}

​

// change the current page, between MENU and CONTROLS pages

function changePage() {

  page = page == 'MENU' ? 'CONTROLS' : 'MENU'

  startOrbs = []

  controlOrbs = []

  for (let i = 0; i < orbAmount; i++) {

    startOrbs.push(new Orb(width / 2, height / 2, orbSize, orbColor, false))

  }

}

​

// front button actions

function frontButtonAction() {

  for (let i = 0; i < orbAmount; i++) {

    controlOrbs.push(new Orb(width-width*0.3, height/2, orbSize, orbColor, true))

  }

}

​

// backwards button actions

function backwardsButtonAction() {

  for (let i = 0; i < orbAmount; i++) {

    controlOrbs.push(new Orb(width*0.3, height/2, orbSize, orbColor, true))

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyTyped() {

  if (key === 'f') {

    // toggle fullscreen 

    screenState = fullscreen()

    fullscreen(!screenState)

  }

}

​

​

function draw() {

  background(white);

  // Title

  textSize(48)

  fill(black)

  text('Human Following Robot', width / 2, height*0.12)

  // Menu Page

  if (page === 'MENU') { 

    startOrbs.map(startOrb => {

      startOrb.update()

      startOrb.display()

    })

    // Start Button

    button(

      'Start', 

      buttonDefaultColor, 

      buttonHoverColor, 

      width / 2, height / 2, 

      width*0.3, height*0.2, 

      changePage

    )

  } else if (page == 'CONTROLS') {

    controlOrbs.map(controlOrb => {

      controlOrb.update()

      controlOrb.display()

      if (controlOrb.outsideBorders()) {

        controlOrbs.pop(controlOrb)

      }

    })

    // back to menu button

    button(

      'Menu', 

      buttonDefaultColor, 

      buttonHoverColor, 

      width-width*0.1, height*0.12, 

      width*0.15, height*0.1, 

      changePage

    )

    // move front button

    button(

      'front', 

      buttonDefaultColor, 

      buttonHoverColor, 

      width-width*0.3, height/2, 

      width*0.3, height*0.2,

      frontButtonAction

    )

    // move backwards button

    button(

      'back', 

      buttonDefaultColor, 

      buttonHoverColor, 

      width*0.3, height/2, 

      width*0.3, height*0.2,

      backwardsButtonAction

    )

    // instructions

    textSize(36)

    fill(black)

    text('Use these buttons to control the robot', width / 2, height-height*0.12)

  }

}