Concept
For this assignment I wanted to create something that generates an answer for the user rather than just displaying random pieces of text. I knew that I wanted to make some type of interactive answer giving experience for the user so I thought of making an affirmation box, or some type of fortuneteller and this eventually led me to the idea of a magic 8 ball, since its whole purpose is to answer questions with random responses. My assignment allows the user to think of a yes or no question and then after they click the magic 8 ball, it would give them an answer. The responses are stored in a CSV file and can either be positive, negative, or an unsure answer. I wanted this assignment to feel more alive and playful so I added a moving star background.
Highlight code
// generating answer
function generateAnswer() {
let singleRow = [];
// choose one random row
singleRow =
splitTokens(strings[int(random(strings.length))], ",");
// get the 3 parts from the SAME row
let start = singleRow[START];
let middle = singleRow[MIDDLE];
let end = singleRow[END];
// put sentence together
answer = start + "\n" + middle + "\n" + end;
}
// CLICK THE BALL
function mouseClicked() {
generateAnswer();
}
CSV:
definitely,yes,go for it most likely,yes,signs look good without a doubt,yes,you can count on it probably,yes,things look promising maybe,yes,but give it time honestly,no,don't count on it probably,no,try again later definitely,no,not this time unclear,maybe,ask again later hard to tell,maybe,wait and see
The part of my code that I’m proud of the most has to be the generating answers. I especially enjoyed understanding how random() and splitTokens() work together, with the help of the professors presentations and p5’s reference pages. The program first randomly chooses one row from my CSV filed. SplitTokens() then separates that row wherever there is a comma, allowing me to access each part individually. I learned that this feature is a way to split strings into pieces. One thing I changed from the class example was how the randomness worked. In the poetry example, different rows could be randomly selected, and mixing unrelated words was part of the generation of the poem. But for my magic 8 ball, I didn’t really want to create answers that didn’t make sense and contradicted itself. For example, if I didn’t use split tokens, I could end up with a result saying
Definitely
No
You can count on it
And that wouldn’t have made sense. Instead, I randomly select one row and keep all three parts of that row. This allows the result to be random but still making sense as an answer. I think this was the part where I understood the purpose of the CSV and arrays the most.
Embedded sketch
How this was made
I started by drawing the magic eight ball using the basic P5.JS shapes. I used a reference photo from online to try to mimic the colors and shapes included. I also added a custom font from Google fonts for the title. At first, the font was not working and I wasn’t really sure why. I realized that the name I was using in P5 did not match the actual name of the font file I uploaded. So all I had to do was change the name to make sure both uploads are the same. Once I fix the file name, it worked. I also learned that after using textFont() for the title, P5 continued using that font for the other texts. I only wanted that font for the title so I had to change the font back to Ariel before displaying the magic 8 balls answer.
I wanted the background to have some movement and motion instead of being completely still, so I used everything that I learned last week about classes and raise to create the stars. Each star object has its own x and y position and speed and I stored the stars inside in array and used a loop to move and display all of them. It’s similar to my last assignment, where when it reaches the end of the canvas it returns to the bottom so the movement continues.
For the main text generation, I used loadStrings() to load the responses from a CSV file. Each rule contains three parts of one answer separated by commas and when the user clicks, random() selects a row and splitTokens() separates it into three parts. I then combine these parts with \n so they appear on separate lines inside the triangle. I used P5.JS and the code examples from class as references for the code structure, Google fonts for the title, and ChatGPT to clean up silly mistakes I made when it came to writing the code.
https://p5js.org/reference/p5/splitTokens/
https://p5js.org/reference/p5/push/
https://p5js.org/reference/p5/loadStrings/
https://p5js.org/reference/p5/loadStrings/
https://p5js.org/reference/p5/int/
https://fonts.google.com/selection?lang=en_Latn&categoryFilters=Feeling:%2FExpressive%2FFuturistic&preview.script=Latn&preview.lang=en_Latn
Reflection
I enjoyed this assignment because I initially thought generating text would mostly just be putting random words together, but this assignment showed me that text is organized in its own way, depending on how you decide to use it. One challenge was making sure the random answers actually made sense. At first I was selecting each section from a different random row, but that created contradicting answers. If I continue working on this project I would like to make the magic 8 ball to be more interactive. For example I could make it shake for a few seconds before reviewing the answer. Overall I’m very proud of how it turned out and how I use my creativity when it came to displaying text.
