My concept
For this week’s assignment, I made a generative fortune cookie. I wanted to create something that is fun to interact with, but also use what we learned about loading data from a CSV file. Instead of letting the computer pick totally random words, I organized my CSV so each row had the same structure: subject, adjective, action, object, place, and warning.
I liked the idea of copying how real fortune cookies work so in my sketch, every time you click, the program picks one row from the CSV and turns it into a fortune. This makes the project interactive and gives it that “mysterious” fortune cookie feeling not knowing what you will read next. I also tried to center everything so it looks like an actual fortune paper coming out of a cookie.
Highlight of my sketch
One part of my project that I’m proud of is how I drew the fortune paper. I wanted it to look clean and centered, so I made a separate function called drawPaper() just for that. This helped keep my code organized and made it easier to adjust the design. The function draws a big white rectangle with rounded corners to look like the paper sticking out of the cookie, and then I added a soft shadow underneath it to make it stand out more.
Here’s the code for that part:
function drawPaper() {
noStroke();
fill(255);
rectMode(CENTER);
rect(width/2, 360, 360, 110, 12);
fill(0, 0, 0, 25);
rect(width/2, 365, 360, 110, 12);
}
Embedded sketch
How this was made
I made a CSV file where every row followed the same pattern. Keeping the format consistent was important because if one row had a missing comma, the whole sentence would break.
In preload(), I used loadStrings() to load the CSV and loadFont() to load my font that i downloaded from google fonts. In setup(), I created the canvas, set the font, centered the text, generated the first fortune, and used noLoop() so the sketch doesn’t constantly refresh.
The main logic happens in generateFortune(). I used random() to pick a random line from the CSV, then split() to break it into pieces. Each piece goes into a variable, and then I build two full sentences using those variables.
The mouseClicked() function calls generateFortune() and then redraw(), which updates the sketch only when the user interacts (by clicking it basically) . This makes it feel less chaotic.
Reflection and future ideas
This project helped me understand how external data works in p5.js. At first, I didn’t get how a whole line from the CSV could turn into separate words, but once I understood how split() works, it made sense. It showed me how generative text can be structured instead of random.
One challenge was keeping the CSV formatted correctly. If one row had an extra space or missing comma, the whole sentence would come out wrong. Fixing that helped me understand how important clean data is.
In the future, I want to try mixing pieces from different rows instead of using one row at a time. That would make the fortunes even more varied. I also think it would be cool to animate the cookie cracking open or have the fortune slide out instead of just appearing, and also try making the fortune cookie look more realistic, and I also want to trey adding animation because it would make the interaction feel more fun.
References
p5.js documentation I used the official p5.js reference to look up functions like loadStrings(), loadFont(), random(), split(), noLoop(), redraw(), text(), triangle(), and rect(). https://p5js.org/reference/
Google fonts I downloaded the font I used in my sketch from Google Fonts. https://fonts.google.com/
CSV file I created my own CSV file for this project and formatted it myself.
Ai usage I used AI to help me brainstorm and generate some of the sentences for my CSV file (subjects, adjectives, actions, objects, places, and warnings). I edited and formatted everything myself when creating my own CSV file on google sheets.