Concept:
I wanted to come up with a concept that accomplishes both the display of text and the loading of data. During the weekend, I saw my cousin’s daughter listening to the nursery rhyme “Rain Rain Go Away.” The objective of the code is to generate a visual representation featuring clouds and animated falling text, drawing inspiration from the lyrics of the nursery rhyme “Rain Rain Go Away.
Highlight of Code:
function createClouds() {
// Create cloud objects based on CSV data
for (let i = 0; i < cloudData.getRowCount(); i++) {
let x = float(cloudData.getString(i, 'x')); // Get x-coordinate from CSV
let y = float(cloudData.getString(i, 'y')); // Get y-coordinate from CSV
let textToShow = "";
// Assign different text to each cloud based on its position
if (i === 0) {
textToShow = "rain";
} else if (i === 1) {
textToShow = "rain";
} else if (i === 2) {
textToShow = "go";
} else if (i === 3) {
textToShow = "awayyy";
}
// Create a new cloud object and add it to the clouds array
clouds.push(new Cloud(x, y, textToShow));
}
}
for (let i = 0; i < cloudData.getRowCount(); i++) {: This line initiates a for loop. It will iterate through each row of data in a CSV file, and the loop variable i is used to keep track of the current row number.
let x = float(cloudData.getString(i, ‘x’));: This line extracts the x-coordinate for a cloud from the CSV data. It uses the cloudData.getString(i, ‘x’) function to get the value of the ‘x’ column in the current row and converts it to a floating-point number using float().
let y = float(cloudData.getString(i, ‘y’));: Similar to the previous line, this extracts the y-coordinate for a cloud from the CSV data. It gets the value of the ‘y’ column in the current row and converts it to a floating-point number.
let textToShow = “”;: This line initializes a variable textToShow as an empty string. This variable will be used to determine what text should be displayed by each cloud.
The following if-else statements are used to assign different values to textToShow based on the value of i, which corresponds to the current row in the CSV data. Depending on the value of i, different text values are assigned:
If i is 0 or 1, textToShow is assigned the value “rain.”
If i is 2, textToShow is assigned the value “go.”
If i is 3, textToShow is assigned the value “awayyy.”
clouds.push(new Cloud(x, y, textToShow));: This line creates a new Cloud object with the extracted x and y coordinates and the assigned text value (textToShow). The new cloud object is then added to an array called clouds. This array will store all the cloud objects that will be displayed and animated later in the sketch.
Reflection:
Reflecting on the code, I can identify both positive aspects and areas where improvement is needed:
I’m pleased with how I’ve integrated external data from a CSV file. This allows for dynamic positioning of clouds based on the data. I’ve used conditional statements (such as if-else) effectively to assign different text values to each cloud based on its position. I’m following an object-oriented programming (OOP) approach by creating cloud objects.
While the code currently assigns text values based on specific conditions, I recognize that it could be made more scalable. A more flexible approach would enable it to handle a variable number of clouds and text assignments based on the CSV data itself, making it adaptable to different datasets.
