Midterm Project – Peking Opera Village

Concept:

Link to the sketch: https://editor.p5js.org/Yupuuu/full/p-mvwnETP

This project takes its inspiration from the coffee shop example given by Professor Shiloh in class. My idea is to integrate some cultural elements into such an experience, Therefore, I decided to create an experience of a Peking Opera Village, in which users can listen to and learn about Peking Opera and hopefully can eventually appreciate it. The overall idea for this project is that the user enters the village through an arch and arrives at a traditional Peking Opera theater. Here, the users are able to see the main stage, some paintings on the wall, tables, tea and teapots, the opera information, and even play a little trivial game.

Design and Implementation:

The most significant design of the experience is the main stage. For this part, I wanted to create something like this:

Recognizing the complexities of such a sophisticated design, I decided to make a simplified version of it. The simplified version consists of the use of both online images and primitive shapes of p5js. The essential elements that constitute a Chinese style stage remain, such as the yellow dragon and phoenix  patterns, the little fences, and the color of Chinese dark red. Combing these elements, I have created this stage for my project:

Particularly, I am proud of the lanterns swinging animation. This adds a bit fun to this static display of the stage. This is realized by the following code:

lantern.resize(55, 0);
 // the left lantern
 push();
 translate(690, 0);
 rotate(angle);
 image(lantern, -25, 0);
 pop();

 // the right lantern
 push();
 translate(780, 0);
 rotate(angle);
 image(lantern, -25, 0);
 pop();

 // the swing effect of the lantern
 angle += lan_speed;
 if (angle >= 10) {
   lan_speed = -lan_speed;
 } else if (angle <= -10) {
   lan_speed = -lan_speed;
 }

Moreover, whenever the user hovers their mouse onto an interactive object, the cursor will become a hand, indicating the interactivity. This explicitly navigates the user’s interaction in the scene without disturbing the holistic aesthetics of the setting. This is realized by the following code:

if (mouseX >= 28 && mouseX <= 48) {
      // back button
      if (mouseY >= 320 && mouseY <= 348) {
        cursor(HAND);
      }
    } else if (mouseX >= 200 && mouseX <= 838) {
      if (mouseY >= 0 && mouseY <= 418) {
        // stage
        cursor(HAND);
      }
      if (mouseX >= 755 && mouseX <= 805) {
        //paper on table
        if (mouseY >= 493 && mouseY <= 545) {
          cursor(HAND);
        }
      }
    } else if (mouseX >= 45 && mouseX <= 170) {
      //painting on the left
      if (mouseY >= 0 && mouseY <= 158) {
        cursor(HAND);
      }
    } else if (mouseX >= 900 && mouseX <= 1050) {
      // opera today
      if (mouseY >= 10 && mouseY <= 105) {
        cursor(HAND);
      }
    } else {
      cursor(ARROW);
    }

Another interesting part of my project is the little trivia challenge for the user. They can click on the paper on one of the table in the main scene, and it will show them the challenge. To complete the challenge, the user will have to read the Opera Today on the wall to get some information about the opera clip I chose. Then, the user will be asked three questions about the information of the opera. Currently, there is not scoring or reward system with this challenge. This just adds some interactivity to the experience.

Reflections:

For this project, I think the overall output is satisfactory. However, it is clear that to truly replicate an experience in a Peking Opera theater need a lot work than this. Due to the limit of time, I wasn’t able to duplicate all the details. If time allows, for example, I would add some audience, waiters, ect, to make the environment more lively and realistic. Moreover, I could add more sounds, like crowd sounds, to make the soundscape of the experience more realistic. Lastly, I could improve the challenge to make it record score and have a reward system. But this indeed need a lot more efforts and time.

One problem I ran into and was not completely solved is the lagging of the character when moving. As the program progresses, the opera singer on stage’s motion will become more and more lagging. I suspect that the problem is due to the huge memory the program is taking when running for a long time. I tried remove(), but this didn’t work as expected. Then I used clear() whenever the scene changes; this works a bit, but not perfectly. So far, I am not sure how I can solve this problem.