Inspiration

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.

Concept

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.

Features

• 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.
• 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, such as a randomly included line from the NYU ITP website.
View Code
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."); } }
• 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.
  
• Typography —
  • MedievalSharp — Conveys an ancient, esoteric vibe reminiscent of handwritten scrolls.
  • Cinzel — Adds elegance and tradition with its Roman-inspired lettering.
  • This font combination reinforces a mystical fortune-telling theme.

Tools & Frameworks

• Developed using p5.js to create an interactive and visually engaging canvas experience.
• Integrates OpenAI API to deliver personalized, dynamic, and contextually relevant fortune-based responses.
• Customized responsive, user-centric design through CSS and HTML to enhance visual aesthetics and ensure seamless interaction across devices.

Take this sketch for a spin!