FORTUNE TELLING WIZARD

ROLE Creative Developer

DURATION December 2024 (2 weeks)

TOOLS p5.js, OpenAI API, HTML, CSS, JavaScript

The Fortune Telling Wizard draws inspiration from traditional Chinese fortune-telling practices, particularly Bazi (Four Pillars of Destiny), and translates them into an interactive, web-based experience. Influenced by a collaborative physical computing project that I was working on at the same time, this mini version utilizes p5.js and OpenAI API to capture the mystical essence of Chinese fortune-telling in a user-friendly digital format.

Web UX/UI Interactive Art Creative Coding

What is Fortune Telling Wizard?

The application invites users to enter their name, birth year, and a question to receive a fortune rooted in Bazi principles. Designed with a whimsical and playful tone, the project blends cultural elements with modern interaction design, using visuals, music, and AI to create a personalized experience.

My Role

I designed and developed this web application from concept to deployment, handling the complete development lifecycle. This included user experience research, frontend development with p5.js, custom OpenAI API integration, responsive design, and API optimization.

Key Features & Implementation

Immersive Introduction

Key inputs include the user's name, birth year, and a personalized question. The starry, animated background sets an ethereal, contemplative tone. A golden rainbow-arc header titled "Fortune Telling Wizard" focuses attention and aligns with themes of prosperity.

Enhanced User Experience

Mysterious looping guitar music auditory layer complements the visual storytelling, adding depth and mystique. Subtle user experience details, like dynamic cursor changes on buttons and hover animations. Implemented a gradual text reveal mechanism, mimicking the unfurling of a scroll, to build suspense and enhance the immersive nature of the fortune-telling experience.

OpenAI API Integration

Integrated OpenAI API to generate personalized, whimsical fortune-telling responses, guiding the AI with a custom system prompt to adopt the role of a Chinese Taoist fortune-teller. Ensured outputs adhered to specific formatting, including "As you were born in the year of..." and elements from Bazi, while incorporating randomness.

                        
 async function getText() {
     const userName = nameInput.value().trim();
     const userBirthYear = birthYearSelect.value();
     const capitalizedUserName = userName
         .split(" ")
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) 
         .join(" ");
     const userQuestion = questionInput.value().trim();
         
     if (!userName || !capitalizedUserName ||userName.length <= 0 ||
         !userQuestion || userQuestion.length <= 0) {
             alert("Please fill in all fields.");
             return;
         }
         
     messages.push({
     role: "user",
     content: `My name is ${capitalizedUserName}, I was born in ${userBirthYear}, and I want to know: ${userQuestion}.`,});

     let options = {
     method: "POST",
     headers: {
         "Content-Type": "application/json",
         Authorization: `Bearer ${API_KEY}`,
     },
     body: JSON.stringify({
         model: "gpt-3.5-turbo",
         messages: messages,
         temperature: 0.7,
     }),
     };

     try {
         let data = await fetchWithBackoff(url, options);
     
         if (data.choices && data.choices[0]) {
             const assistantResponse = data.choices[0].message.content;
             let formattedResponse = `Ah, ${capitalizedUserName}. That's a very good question. ${assistantResponse}`;
     
             messages.push({ role: "assistant", content: formattedResponse });
     
             myOutput.show();
             typeOutResponse(formattedResponse);
         }
     } catch (error) {
     console.error("Failed to fetch response:", error);
     alert("Sorry, something went wrong. Please try again later.");
     }
 }
                        
                    

Typography & Visual Design

MedievalSharp evokes ancient scrolls and mystical texts. Cinzel provides Roman elegance and ceremonial gravitas. Together they create an authentic fortune-telling atmosphere that feels both mystical and trustworthy.