Concept

Instead of developing a game for my midterm project I decided to create a space for an emotional experience. I believe that midterms often bring about stress, and it’s essential for individuals to be able to relax and prioritize their overall well-being. Consequently, I designed a meditation program that would help unwind people’s minds and partake in self-care activities.

Approach and Code highlight

For the development of this project, I planned to have three different exercises breathing, mantras, and journaling. I have shown the code for the breathing exercises in my midterm progress blog post, where I designed a program of a bouncing ball that would be helpful for people to find a certain rhythm in their breathing. For the mantras, I was planning to show participants different affirmative quotes that would allow participants of the meditation program to focus on their selves. I planned to use the method of a .substring(). I found a sketch that would help to display a portion of the string, based on the mouse position, here. For the journaling exercise, I decided to give some space for the participant where they can think about some questions and have a space to write down their responses. I used a csv. file to store all of the prompts for the journaling exercises. I created an array of strings to hold the entire file and preloaded the text from the file into an array. because I only had one row for all of the prompts, I did not need to loop through each row in the file. I created an index of the random prompt in the prompt array, a variable for a random prompt, and the code that would choose 1 of the prompts from an array. I created an input window and a button that when pressed would erase the input and leave a thankful note to the participant. As the basis for building this little program, I found a code for creating an input on the reference page, here.

Here is the code and sketch for this program, which I am very proud of.

let input, submitButton, prompt;
let strings = [];

function preload() {
  strings = loadStrings("quotes.csv");
}

function setup() {
  if (strings == null) {
    print("failed to load the file, stopping here");
  }
  print("strings array contains this many lines: " + strings.length);

  // create canvas
  createCanvas(710, 400);

  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);

  // variable for a random prompt
  let randomPrompt = allThePrompts[int(random(5))];

  print(randomPrompt);
  //choosing 1 of the prompts from an array
  prompt = createElement("h2", foo);

  prompt.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

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("");
}

Another part of the program, which I am very proud of and which ended up working perfectly is the three buttons in the choosing menu. I was able to program buttons myself using an image and not using built-in buttons. For this, I used object-orientated programming. I created a class, where I specified how buttons should be displayed and function when a mouse is over and the mouse is clicked on these buttons. Then, in setup, I created the three similar buttons that are in the array, which would use the commands specified in the class. Here is a code highlight of the class:

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);

    print("in button display; scenery = " + this.scenery);

    // tint the image on mouse hover
    if (this.mouseOverImage()) {
      print("mouse over image");
      tint(254, 220, 220, 255);

      // furthermore, if the mouse is clicked,
      // set the scene
      if (this.mouseClickedOnImage()) {
        print("mouse is clicked" + this.scenery);
        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;
    }
  }
}

The code for the three buttons:

// 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));

Future Thoughts and Reflection

I haven’t finished this project in three parameters: the switching back and forth between the pages, and the implementation of the sound and shape. I would have added the sound and the shape (btw, I know how to do it) if I finished the switch code. However, because I am very new to coding and have never designed such a complex program of switching between multiple cases, I did not fully realize my project. I decided to take the risk of creating multiple cases in the switch statement, however, the back buttons did not work perfectly well and I spent a lot of time trying to debug it and make it work. Even though it works in the sense that it changes cases, it didn’t change the case to the one I intended. Moreover, as I designed the code for journaling exercises in another shorter program, I was having issues implementing it in my main code. I tried multiple ways of breaking it down, however, it still didn’t work.

Nevertheless, I learned a lot during this project. I now know how to program a switch statement and create my own buttons from images. I learned how to create an input box and display text correctly. I recapped how to use a csv. file to load the information and I learned how to randomly present information from this file. I also learned patience and that it is best to debug a long program by diving it into smaller programs even though it may not work when you are trying to paste it back into the main program. I also was able to practice object-oriented programming on a new level by creating buttons with it. So, even though I didn’t get all of my program to work as was planned, I am nevertheless very happy with the experience and knowledge I gained in the process of creating it.