let logoImage;

let choosingImage;

let backImage;

​

let scene = 0;

const WELCOME = 0;

const CHOOSING = 1;

const BREATHING = 2;

const MANTRAS = 3;

const JOURNALING = 4;

let buttonsChoosing = [];

let buttonBack;

​

let speedX = 5;

let x = 0;

​

let input, submitButton, prompt; // for JOURNALING case

​

let strings = []; // for reading the csv file

​

// let strings = [];

​

function preload() {

  backgroundImage = loadImage("background.jpeg");

  logoImage = loadImage("Logo.png");

  choosingImage = loadImage("Sun.png");

  backImage = loadImage("Back.png");

​

  strings = loadStrings("quotes.csv");

}

​

function setup() {

  createCanvas(620, 388);

​

  // make the three choosing buttons

  buttonsChoosing.push(new ChoosingButtons(20, 150, choosingImage, BREATHING));

  buttonsChoosing.push(new ChoosingButtons(235, 150, choosingImage, MANTRAS));

  buttonsChoosing.push(

    new ChoosingButtons(450, 150, choosingImage, JOURNALING)

  );

​

  // make the back button

  buttonBack = new ChoosingButtons(

    5,

    0,

    backImage, //backImage,

    WELCOME

  );

​

  // buttonBack = new ChoosingButtons(20, 20, backImage, WELCOME); // replace with left arrow image

​

  // to check if the file is loaded

  if (strings == null) {

    print("failed to load the file, stopping here");

  }

  print("strings array contains this many lines: " + strings.length);

}

​

​

function draw(){

  switch (scene){

    case WELCOME:

      sceneWELCOME();  

      break;

      case CHOOSING:

      sceneCHOOSING();

      break;

      case BREATHING:

      sceneBREATHING();

      break;

      case MANTRAS:

      sceneMANTRAS();

      break;

      case JOURNALING:

      sceneJOURNALING();

      break;

  }

}

​

function sceneWELCOME(){

  image(backgroundImage, 0, 0);

      image(logoImage, 160, 0, 300, 240);

      fill(80);

      textSize(25);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER, CENTER);

​

      text(

        "This is the welcoming page of the Meditation Center. Today you can immerse yourself into the world of meditation and relaxation",

        100,

        260,

        width / 1.5

      );

​

      textSize(15);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER, BOTTOM);

      text(

        "Please, press ENTER to see instructions and proceed with the experience",

        0,

        350,

        width

      );

}

​

function sceneCHOOSING(){

   image(backgroundImage, 0, 0);

      image(logoImage, 420, 0, 200, 150);

​

      fill(80);

      textSize(20);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER);

      text("BREATHING", 95, 350);

      text("MANTRAS", 305, 350);

      text("JOURNALING", 525, 350);

​

      for (let i = 0; i < buttonsChoosing.length; i++) {

        buttonsChoosing[i].display();

      }

​

      buttonBack.scenery = WELCOME;

      buttonBack.display();

}

​

function sceneBREATHING(){

      image(backgroundImage, 0, 0);

​

      // code for the bouncing ball

      noStroke();

      fill(100, 0, 100);

​

      x = x + speedX;

      if (x > width || x < 0) {

        speedX = speedX * -1;

      }

​

      ellipse(x, 200, 100, 100);

​

      //displayBreathing();

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

}

function sceneMANTRAS(){

​

          image(backgroundImage, 0, 0);

​

      //  displayMantras();

​

      // mantras is from the first string that is randomly chosen

​

      // singleRow = split(strings[int (random(strings.length))], ',');

​

      // randomly presented mantras

      //   csv file to story mantras

      // // selecting 3 random quotes

      // for (let i = 0; i < strings.length; i++) {

      //   strings[i] = strings[Math.floor(random(1, strings.length))];

      //   }

​

      //to display text: display a portion of the string based on moused position

​

      //let sourceText = "Life is short and art long";

​

      //function setup() {

      // createCanvas(400, 400);

      // frameRate(10);

      //}

      //function draw() {

      // background(50);

      // fill(255);

      //  textSize(32);

      //  textAlign(CENTER, CENTER);

      //  let middle = sourceText.length / 2;

      //  let left = middle - ((mouseX / width) * middle);

      //  let right = middle + ((mouseX / width) * middle);

      //  text(

      //   sourceText.substring(left, right+1),

      //  width/2, height/2);

      //}

​

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

}

​

function sceneJOURNALING(){

      image(backgroundImage, 0, 0);

​

      // what i used as an example of input text: https://p5js.org/examples/dom-input-and-button.html

​

      // displayJournaling();

​

      input = createInput();

      input.position(20, 100);

      input.size(400);

​

      submitButton = createButton("submit");

      submitButton.position(input.x + input.width, 100);

      submitButton.mousePressed(prompting);

​

      // all the prompts in an array

​

      let allThePrompts = split(strings[1], ",");

​

      print(allThePrompts); //it has 5 prompts and they are all split. nice!!!

​

      // x is the index of the random prompt in the promt array

      let X = int(random(allThePrompts.length));

      print(X);

​

      // foo is the random prompt

      let foo = allThePrompts[int(random(5))];

​

      print(foo);

      //choosing 1 of the prompts from an array

      prompt = createElement("h2", foo);

​

      prompt.position(20, 5);

​

      textAlign(CENTER);

      textSize(50);

​

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

}

​

function prompting() {

  input.hide();

  // ? not working: how to hide the button: button.hide();

  prompt.html(

    "Thank you for your response ! Hopefully it made your day a little better ^^ "

  );

  input.value("");

}

​

class ChoosingButtons {

  constructor(inX, inY, inImg, inScenery) {

    // what does this mean?

    this.x = inX;

    this.y = inY;

    this.img = inImg;

    this.scenery = inScenery; // where to go if this button is clicked

  }

​

  display() {

    stroke(0);

​

    // tint the image on mouse hover

    if (this.mouseOverImage()) {

      print("mouse over image");

      tint(100, 0, 100);

​

      // furthermore, if the mouse is clicked,

      // set the scene

      if (this.mouseClickedOnImage()) {

        scene = this.scenery;

      }

    } else {

      noTint();

    }

​

    image(this.img, this.x, this.y);

​

    noTint();

​

    print(this.img.width, this.img.height);

  }

​

  // over automatically matches the width & height of the image read from the file

  // see this.img.width and this.img.height below

  mouseOverImage() {

    if (

      mouseX > this.x &&

      mouseX < this.x + this.img.width &&

      mouseY > this.y &&

      mouseY < this.y + this.img.height

    ) {

      return true;

    } else {

      return false;

    }

  }

​

  // over automatically matches the width & height of the image read from the file

  // see this.img.width and this.img.height below

  mouseClickedOnImage() {

    if (

      mouseIsPressed &&

      mouseX > this.x &&

      mouseX < this.x + this.img.width &&

      mouseY > this.y &&

      mouseY < this.y + this.img.height

    ) {

      return true;

    } else {

      return false;

    }

  }

}

​

function keyPressed() {

  if (keyCode === ENTER && scene === WELCOME) {

    scene = CHOOSING;

    print("changing state to choosing");

  }

}

​