My Concept:
I made a text generator that displays a random fortune and it is styled like a small fortune card. The idea came from fortune cookies and the paper slips you get with them along with Japanese omikuji which are the fortune slips you draw at shrines. I liked the idea of a small piece of text appearing almost like a little ritual, so I wanted the sketch to feel closer to drawing a slip than just reading random text on a screen. When you click the canvas, a new fortune appears, pulled randomly from a list I made stored in a CSV file.
How I made it:
The fortunes are stored as individual lines in a file called fortunes.csv, which I load using loadStrings(). In setup(), I wait for that file to finish loading before doing anything else, then call a function that picks one fortune at random to display. In draw(), I draw a simple paper background with a double border to make it look like a paper slip or card with a small title at the top and the current fortune centered inside. Clicking the canvas picks a new random fortune and redraws the screen, similar to how you would draw a new slip if you wanted to try your luck again.
Highlight of my code:
function pickFortune() {
//random(fortunes.length) picks a random position in the array
//int() turns it into a whole number so it can be used as an index
currentFortune = fortunes[int(random(fortunes.length))];
}
This is the part that actually makes the generator generative. random(fortunes.length) picks a random decimal number somewhere between 0 and the total number of fortunes I have stored. Since array positions have to be whole numbers, I wrap it in int() to round it down into a usable index. That number is then used to pull one specific line out of the fortunes array and store it in currentFortune, which is what gets displayed on the card. Every time this function runs again it recalculates a new random index so a different fortune has a chance of showing up.
My Embedded Sketch:
You can click the sketch to display another result.
Problems I ran into:
I had a layout bug where my fortune text was overflowing off the card instead of staying centered. I originally assumed that when you give text() a width and height for wrapping, the x and y you provide would be treated as the center point, since I already had text align set. It turns out those x and y values are actually the top left corner of the wrapping box so my box was starting from the middle of the canvas and extending off the edge. Once I understood that fixing the position was simple.
Reflection:
I think this assignment taught me more about debugging than about the actual concept of generative text which i did bot expect. I feel like getting stuck on something small like an async function or a misunderstood parameter is where I learned the most. I thought going in that the hardest part would be designing the visuals, but it ended up being the file loading and positioning logic that took the most time to get right.
References:
https://p5js.org/reference/p5/loadStrings/
https://p5js.org/reference/p5/textAlign
Claude – I used it to generate some fortune texts for the csv file