Concept:
My project is called the Beach Finder, it randomly creates items for the user to search for when they are at the beach. I came up with this idea because I visit the beach frequently, so I thought of making something related to what I love doing. The items, descriptions, and locations will be combined randomly in order to produce prompts such as “Look for a colorful seashell by the shore.” The user gets a different beach find each time they click on the screen, I also designed the sketch with fish, a surfboard, and beach colors to match the theme.
Final Sketch:
Code I am proud of:
// Puts the random words together into one sentence
let message =
"Find a " + description + " " + object + " " + place + ".";
I’m most proud of this part because it brings all the random words together to create the final beach prompt. I like how every time I click, the object, description, and place can change, so I keep getting different things to find at the beach.
// Picks a random row and splits the words at each comma
singleRow = splitTokens(
strings[int(random(strings.length))], ","
);
// Gets the object from that random row
let object = singleRow[OBJECT];
I’m also proud of this part because it randomly chooses a row from my CSV file and separates the words using the commas. Then it takes the object from that row. I used this same idea for the description and place, which is what makes every beach prompt different when I click.
How I Made It:
I started by creating the design for my Beach Finder using blue as the background color, brown as the border of the frame, a surfboard, and fish in different colors. For the fish, I made an array of different colors and used a for loop to make the six fish rather than doing them one by one. Next, I made the CSV file containing three categories that were an object, a description, and a place. I used loadStrings() to load the CSV file and splitTokens() to separate the words using the commas. I used random() function to choose random objects, descriptions, and places and make a sentence such as “Find a colorful seashell near the shore.” I used noLoop() to keep the sentence on the screen, and mouseClicked() and loop() functions to generate a new sentence whenever the user clicks the mouse anywhere on the sketch. Lastly, I used the font called “Original Surfer” which I got from google fonts and thought fit the beach theme. Along with the title “BEACH FINDER” and a small instruction to let the users know they can click for a new beach find.
Reflection (problems and improvement for the future):
Problems I ran into:
One problem I ran into was making sure the random words from my CSV file always made sense together. As both the object, description, and the place were selected randomly, not all combinations resulted in logical sentences at the beginning. Some words were altered to ensure that the combinations actually made sense no matter what.
Another problem was that for some of the generated sentences, they were very long, so the words were going under the surfboard. In order to solve this issue, I added maximum width to the text by modifying the code from:
This: text(message, 90, 150);
To this: text(message, 90, 150, 330);
Here, the 330 sets a limit on how much the text can spread out, that’s why in case it is very wide the words move to another line rather than being written under the surfboard.
Also since all my code was inside draw(), the random generated sentence kept changing very quickly but I wanted my sentence to remain the same until the user clicked it. I fixed it by adding this at the end of draw():
// Stops draw() so the text does not keep changing noLoop();
noLoop() stops draw() from continuously repeating, so the generated sentence stays on the screen.
And to actually make it change when I press with the mouse I had to add:
// Generates a new sentence when the mouse is clicked
function mouseClicked() {
loop();
}
loop() allows draw() to run again when I click, which generates a new random sentence. Then noLoop() stops it again.
Overall, I’m satisfied with the result of my Beach Finder because I managed to combine the knowledge of generative text and relate it to the beach, which I like. It was fun for me to learn how to work with a CSV file using loadStrings(), splitTokens(), and random() functions to create sentences that change every time. I also enjoyed creating the visual part of the project and making it interactive. For my future projects of this kind, I would try to add more words and categories in the CSV file and create more combinations of sentences. Also, I would consider adding some interactions and animations to the beach setting.
References:
https://p5js.org/reference/p5/loadStrings/
https://p5js.org/reference/p5/splitTokens/
https://p5js.org/reference/p5/random/
https://p5js.org/reference/p5/textFont/
https://p5js.org/reference/p5/loadFont/
https://fonts.google.com/selection?preview.layout=sample&preview.script=Latn
The coding train – 2.4: random() Function – p5.js Tutorial
The coding train – 1.5: JavaScript String Object – Programming with Text
I used AI to help me notice that some of my randomly generated sentences didn’t make sense because the words were being mixed from different rows. It helped me adjust the words in my CSV file so that any random combination would still make sense.