💡Inspiration

Chinese Fortune Telling Sketch:

FINAL: Fortune Telling Previs by mx2333 -p5.js Web Editor

Chinese OpenAI API Fortune Telling Sketch:

OpenAI GPT Q&A Template by bobby226 -p5.js Web Editor

🧠 Project Concept Development

Since I’m already collaborating with Queenie and Michelle on a physical computing/hypercinema final project, I wanted to create a mini version of our project using p5.js. Our main project explores Chinese fortune telling, blending the concept of a digital Cornell box with physical computing elements such as RFID readers and seat pressure sensors.

Given p5.js’ limitations and the one-week time constraint of this assignment, I aimed to capture the essence of Chinese fortune telling while allowing for user interaction and personalization. I chose to incorporate one of the many Chinese fortune-telling methods, Bazi, also known as the "Eight Characters" or "Four Pillars of Destiny." Bazi involves analyzing a person’s birth date and time, represented by a combination of Heavenly Stems and Earthly Branches. This system is used to assess various aspects of a person’s life, including luck, health, career, and relationships, based on their elemental balance.

💫 Process/ User Experience

🆕 Starting Screen

I began by carefully considering the type of user input required to generate a meaningful response from the OpenAI API. Since the project revolves around Chinese fortune-telling, specifically Bazi, I needed to gather a few essential pieces of information from the user to personalize the experience. The most crucial inputs were the user’s name, their birth year, and their question. These inputs are vital because Bazi relies on the birth year to determine a person’s zodiac sign, elemental balance, and how these aspects influence their destiny.

To make the experience more immersive and engaging, I also wanted the user to feel as though they were gazing into an endless, starry night sky. This concept ties into the theme of astrology and fortune-telling, where the stars symbolize fate and destiny. I envisioned the stars moving gradually across the screen, mimicking the natural movement of stars in the night sky. This dynamic effect not only creates a sense of immersion but also reinforces the idea of time passing and fate unfolding, much like how the positions of stars in astrology are believed to influence one’s future.

🤩 A picture of an ideal user interacting with my sketch:

/* Code to draw and animate the stars against a purplish-dark night sky */
function draw() {
  drawNightSky();
  drawStars();
}

function drawNightSky() {
  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(color(15, 10, 50), color(5, 0, 20), inter);
    stroke(c);
    line(0, y, width, y);
  }
}

function drawStars() {
  for (let i = stars.length - 1; i >= 0; i--) {
    let star = stars[i];
    
    star.x += star.speed;

    if (star.x > width) {
      stars.splice(i, 1);
      stars.push(createStar(0, random(height)));
    } else {
      fill(star.color.levels[0], star.color.levels[1], star.color.levels[2], star.alpha);
      noStroke();
      drawStarShape(star.x, star.y, star.size);
    }
  }
}

function createStar(x, y) {
  return {
    x: x,
    y: y,
    size: random(1, 3),
    alpha: random(150, 255),
    color: random() < 0.5 ? color(255, 255, 255) : color(255, 255, 150),
    speed: random(0.5, 1)
  };
}

function drawStarShape(x, y, size) {
  push();
  translate(x, y);
  rotate(PI / 4);
  beginShape();
  for (let i = 0; i < 5; i++) {
    let angle = TWO_PI / 5 * i;
    let xOff = cos(angle) * size;
    let yOff = sin(angle) * size;
    vertex(xOff, yOff);
  }
  endShape(CLOSE);
  pop();
}

I realized that something was missing to effectively guide the user’s attention to the input fields while also providing some context to what this sketch is about.

To address this, I added a golden, rainbow-arc header text, "Fortune Telling Wizard." The choice of the golden color ties into themes of prosperity, fortune, and wealth in Chinese culture.

The arc was also chosen to direct the user's gaze toward the center of the page, helping to frame the input fields and visually guide them within the boundaries where the user's interactions begin and end. I added a boolean flag showRainbowArc to track the visibility of the rainbow arc header text, ensuring it is shown or hidden in sync with the other UI elements by updating its value in areas where their visibility changes.

This addition introduces the interactive sketch with a touch of elegance and significance, creating a more cohesive and engaging starting experience that immerses the user in the mystical atmosphere of the fortune-telling journey.