My Concept:
For this week’s assignment, I wanted to create something that felt relatable and personal instead of just random words being generated. Since we learned how to load data from a CSV file and generate text from it, I thought it would be fun to make a NYUAD Advice Generator. The idea was to take simple words from a file and turn them into small pieces of campus advice that feel random, questionable, but still kind of make sense.
I liked the idea of the computer choosing the advice instead of me hardcoding every sentence, because it makes the sketch feel unpredictable and sort of personalized in a way. Every time you click, you get something different, which makes it feel more interactive and less fixed and predetermined. I also wanted it to look clean and centered, so it feels like a actual little advice card instead of just text floating on a screen.
Highlight of Sketch:
One part of the sketch that I am most proud of is how I organized the text generation into a fucntion called generateAdvice(). Organizing all those lines of code into one function made it so much more organized and easier for me to call the function rather than repeatdly rewriting the lines of code.
// I created a function for the lines of code that generate the advice for a more efficent and easy to use code, and this way i can call the functiin anywhere in my code without having the repeatdly write these lines again.
function generateAdvice() {
//these lines of code were heavily inspired by the random poem generator example from class.
// this line picks a random line from advice.csv file.
let randomLine = lines[int(random(lines.length))];
// this line splits the words from the array by commas
let row = split(randomLine, ",");
// after splitting the csv line, row is now an array and each position in the array holds one word from the the advice file, and these lines of code extract each word using the index constants i defined at the top of the code.
//these lines of code are similar to the poetry example from class but are organized in a clearer and more consice way that fits my code.
let scenario = row[SCENARIO];
let action = row[ACTION];
let item = row[ITEM];
let location = row[LOCATION];
// these lines of code build the advice clearly.
adviceLine1 = "If you feel " + scenario + "...";
adviceLine2 = action + " with your " + item + ".";
adviceLine3 = "Go to " + location + ".";
}
I am also proud of how I centered the card and used width and height instead of random numbers. That made the layout feel more intentional and organized. It was defintely a small detail, but it made the whole sketch look more put together and versatile for all screens and canvases.
function drawCard() {
// centered card dimensions usinf height and width to avoid magic and hardcore numbers.
let cardWidth = width * 0.7;
let cardHeight = height * 0.7;
//// the rect() starts drawing from the top left corner, so if i want the card in the middle of the screen,i have to move it left and up by half of its size, and this makes the card sit exactly in the center. x being horizontal position and y being vertical.
let cardX = width / 2 - cardWidth / 2;
let cardY = height / 2 - cardHeight / 2;
Embedded Sketch:
How This Was Made:
I started by deciding what kind of text I wanted to generate, and once I chose the NYUAD advice idea, I created a CSV file with single words separated by commas, just like the poem words example from class. Each line followed the same structure so that the program could read it properly, and the sentences/advice would make sense to a certain extent.
Then in my code, I used loadStrings() inside preload() to load the file before the sketch starts. In draw(), I used random() to pick one line from the file and split() to separate the words by commas. After splitting, the row becomes an array, and I used the index positions to take out each word from the array
.Once I had each word stored in its own variable, I built the final advice sentence using string concatenation (which is a fancy term that means putting pieces of text together), just like the poem generator example from class. I then displayed the text using text() and centered everything on the screen. I used noLoop() so the advice only changes when the user clicks, and mouseClicked() to restart that loop. This makes the sketch interactive instead of constantly refreshing on its own.
Reflection and Future Ideas:
Overall, I think this project helped me better understand how loading data works in p5. At first, I didn’t fully understand what split was doing, but after working through it step by step, I realized it’s just turning a string into pieces that I can access individually. That made the whole idea of generative text feel less intimidating and confusing.
There were definitely small moments of confusion, especially when thinking about where the text generation should go and how it compares to the professor’s example. But figuring that out helped me understand the structure of draw(), noLoop(), and mouse interaction much more clearly.
In the future, I would like to experiment with more complex text structures, maybe adding more variables per line or creating multiple sentence formats. I also think it would be interesting to combine generative text with animation so the words themselves feel more dynamic and for the whole sketch to just be more entertaining visually. Overall, really proud of this cute little sketch.
Refrences:
- https://p5js.org/reference/p5/loadStrings/
- https://p5js.org/reference/p5/split/
- https://p5js.org/examples/calculating-values-random/
- https://p5js.org/reference/p5/loop/
- https://p5js.org/reference/p5/noLoop/
- https://p5js.org/reference/p5/textAlign/
- https://editor.p5js.org/Aya_Riad/sketches/fIy61R_jf
- I used Generative AI for feedback, which is how I came up with the idea of instead of putting all the lines of code under the draw function, to create a generateAdvice() function for a more organized code. It also helped me generate the words for the csv file, as it was quite difficult to create that many variations.