Chat with chatGPT in creating a web based fidget game. https://chatgpt.com/c/69128021-c450-832d-853b-b57cfca07315

Sketch: https://editor.p5js.org/Anna_Tang/sketches/bik6IGf1L

Open AI API p5 js

Process:

For this week’s assignment, I wanted to explore text generation through APIs, so I created Story Seeds, an interactive p5.js web app that turns user-provided keywords into a short story. My concept was to have five categories—when, what, where, who, and tone—to give users creative control while letting the AI handle narrative flow. I designed the interface to be clean and visually engaging, using gradients, rounded cards, and responsive layouts so it looks good on any screen. One challenge I faced was learning how to safely connect to APIs from the browser, especially understanding why API keys should normally be handled on a server for security. Another difficulty was parsing and displaying the API responses neatly within p5.js’s DOM elements while maintaining a smooth user experience. I also had to troubleshoot small issues like text overlapping, managing async calls, and styling focus states. Overall, the project taught me a lot about combining creative coding with real-world API integration to build an interactive storytelling experience.

Sketch: https://editor.p5js.org/Anna_Tang/sketches/lPt6Lyfc5