Concept:
At the beginning of this project, I was deciding whether I should create a truth or dare style generative text. After researching different types of questions, I came across “Who’s Most Likely To,” which has a similar concept but felt more suitable for the project. Because the project focuses on generative text, I chose to create an interactive “Who’s Most Likely To” generator. Each click produces a new randomly generated question using words taken from a CSV file.
I wanted the interaction to feel playful and social, similar to a board game night activity. To support this, the background color changes every time the user clicks, so the experience feels dynamic rather than static. I also designed a bold border, a clear title, and a short prompt explaining how to interact with the page so the user immediately understands what to do. I used a playful font to match the tone of the game and make the interface feel light and inviting. The goal of the project is to create a simple interactive experience where the user repeatedly clicks and receives a new question each time.
Embedded code:
Highlight of the code:
push();//saves current drawing setting
stroke(3);
strokeWeight(20);
noFill();
rect(15, 15, width - 29, height - 29);//draws the rect to be framing the canvas
noStroke();
pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code
push();//saves current drawing setting
textSize(30);
text("Whos Likely Game", width / 2, height / 4);
pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code
push();//saves current drawing setting
textSize(17);
// textAlign(CENTER,CENTER);
text("Click the screen to generate a question!", width / 2, height / 3.5);
pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code
translate(width / 2, height / 2);
function randomColor() {
bgColor = color(random(255), random(255), random(255)); //everytime th emouse is clicked a new color is given to the background
}
I used push () and pop () to isolate the styling of the title and prompt. This prevents their font size and styling from affecting the generated question. It helped me understand that p5.js keeps drawing settings active unless they are reset, so push and pop act like saving and restoring the canvas settings. Instead of calculating the exact position of the generated text, I used translate () to move the coordinate system to the center of the canvas. This allowed me to draw the question at (0,0) and keep it centered regardless of canvas size. I implemented randomness visually by generating a new RGB color on every click. The background change works as feedback, letting the user know their interaction triggered the system while also making every interaction visually unique.
How it was made:
For the process, I first began by implementing the CSV file. I created a CSV containing the word groups I was going to use, specifically the determiners and the verbs. I then loaded the CSV file using loadStrings () and tested that the data was being imported correctly. I mostly used the same structure as the code we used in class, but modified it so it would fit my sentence structure and generate a “Who’s Most Likely To” question.
After that, I added a custom font to improve the visual style. I placed the font file as a . ttf file and loaded it inside the preload () function so it would be available before the sketch starts. Then I applied the font to the text elements.
Next, I created the stationary text elements, including the title “Who’s Most Likely Game” and the prompt “Click the screen to generate a question.” I positioned them using width/2 and height/4, and a similar proportional placement for the prompt. This way, if the canvas size changes, the text stays centered and aligned above the generated question. I then added a border using rect () and adjusted the dimensions so it scales with the canvas size. For the stationary text, I wrapped the styling inside push () and pop () so the text settings would not affect the rest of the sketch.
I also implemented interaction using mousePressed (). Each click refreshes the question and changes the background color to make the experience more playful. I referenced the p5.js example (link in refrences) for this part and adapted the example to my project. To properly position the generated question, I used translate() to center the text on the canvas. Throughout the process, I relied on the examples from class to build the basic structure first, and then gradually added variations and visual improvements.
Reflection and Future ideas:
For reflection and future ideas, I am proud that I was able to understand how to implement important p5.js features such as push () and pop (), the use of translate(), and how to properly structure the draw() function. I also learned how to work with external files by importing a custom font and a CSV dataset into p5.js. Through this project I improved my understanding of transformations and how randomness can be used to generate a dynamic canvas. The background color changes helped me better understand how interaction and feedback can make a simple system feel more engaging. I also became more aware of layout and visual clarity, and how small design choices affect how easily the user understands the interface.
In the future, I would like to expand the project by animating the generated text so it fades in or slightly bounces when a new question appears. I would also like to allow users to input their own names so the game feels more personalized, and possibly add a point system to make it feel closer to an actual game. Additionally, adding small icons or visual elements could make the interface more visually appealing and reinforce the playful board-game atmosphere.
References:
For the color background changing whenever its pressed:
https://p5js.org/reference/p5.Element/mousePressed/
For text randomizer :
https://editor.p5js.org/maa9946/sketches/-4EPAewPV
For refreshing my understanding of transformations:
https://p5js.org/tutorials/coordinates-and-transformations/
Background color labeling and randomizer:
https://editor.p5js.org/aferriss/sketches/B1oYHcN9W
For text font:
https://editor.p5js.org/maa9946/sketches/FUnL3noV1
https://fonts.google.com/specimen/Barriecito
For who’s most likely to questions:
https://www.teenvogue.com/story/most-likely-to-questions#how-to-play