Link to p5.js sketch: https://editor.p5js.org/kh1785/sketches/6Hj779Kce
“Poetry for the Day” is a simple interactive interface that allows users to read poems of the five preselected keywords. I used PoetryDB (http://poetrydb.org/index.html, GitHub: https://github.com/thundercomb/poetrydb) to get the data, which offers the users several options for searching poems (e.g. by author, title, line and etc.).
On the home page, the five keywords are presented to the user for selection. By clicking one of the keywords, the user can enter the poetry page. When they are on the poetry page, they can use the right and left arrow keys to navigate. Each poetry page has unique accompanying background music that can enhance the experience of reading the poems.
The user can choose from the five keywords, “Christmas”, "love", "sorrow", “summer”, and “wood”.
There was an issue with accessing the URLs in the web editor. I had not realized this issue until the very last minute since I mainly used a local server to create a sketch. On the web editor, I kept getting the message saying that the URL I requested is an insecure resource. At that point, I barely had any idea how to solve this issue, therefore, I manually downloaded the JSON files and loaded them in the preload function.
Due to the limited space, the first 55 lines of the poem are only being displayed ( for (let j = 0; j < 56; j++) {text(line[j]), 0, 65 + 14 * j}; ).
As the numbers (0-13) indicates on the below image ( console.log(data[4]) ), I wanted to know how many poems are belonging to each keyword. This step was necessary to set a scope for navigation.
When I used something like data[4].length, I got the error message as below. I hastily supposed that .length will return a value of the length of the JSON object.
Later I figured that JavaScript does not have a .length property for objects so, I used the below function to manually iterate through the object.
Since each keyword category has a different number of poems, I could not have a single or random number to set a scope of navigation. If the scope of navigation is not determined properly, the variable b will eventually be turned to "undefined" at some point.