Concept:
For this week’s assignment, I found myself being more drawn towards using Arabic text, not only because it was something new, but because in my Intro to Digital Humanities class we discussed how different languages can be difficult to represent within digital systems, which can cause certain meanings to get lost in translation. This made me think about how different languages have their own meanings and ways of expressing ideas, especially Arabic. I noticed that in Arabic, one broader concept can be connected to multiple words, each with slightly different meanings and associations, but still relating back to the same overall idea. I wanted to show some of these connections through generative text, so I decided to take three values that are deeply rooted in Emirati culture and display three different Arabic words connected to each one. Through this, I wanted to show how meaning can go beyond a single word.
My Artwork:
Code I am proud of:
function mouseClicked() {
wordNumber += 1;
if (wordNumber > 2) {
wordNumber = 0;
groupNumber += 1;
}
if (groupNumber > 2) {
groupNumber = 0;
}
}
The part of my code that I am proudest of would definitely be the mouseclicked() function. I used wordNumber to move through the three Arabic words in each group every time the user clicks. After clicking through all three words, wordNumber resets back to 0 and groupNumber moves to the next value. I also made groupNumber reset after the final group so that the interaction continues in a loop. I am honestly really proud of this part because I was able to learn and use variables and if statements to control how the whole sketch changes by interacting with it, and it took a lot of trial and error.
How this was made:
I first created three different arrays to store the Arabic words related to each value: generosity, determination, and unity. I then used wordNumber to keep track of which word was currently being displayed and groupNumber to keep track of which value the user was on. Using the mouseClicked() function and if statements, I made each click move to the next word, and after the three words were displayed, the sketch would move to the next value. I also used different colors and Sadu inspired geometric patterns for each group to visually separate the three values while still connecting the overall design to the UAE.
A lot of the coding for this project was inspired by things we had already covered in class. I kept going back to the lecture notes and previous assignments whenever I got stuck, especially when working with arrays, variables, if statements, and mouseClicked(). Since I had already used arrays and interaction in previous sketches, I tried to take those concepts and apply them in a different way for this project.
One of the biggest challenges I had was getting the Arabic font to display properly. At first, the font I wanted to use was not working correctly with the Arabic text in p5.js. I used the CSS method provided in class and downloaded Noto Kufi Arabic from Google Fonts, then added the font file to my sketch and used textFont(“Arabic”) when displaying the Arabic words. This was something I had never done before, so it took some trial and error to understand how the font file, CSS, and p5js code worked together.
I also wanted the sketch to feel more generative rather than only changing when the user clicked. I experimented with adding faded copies of the current Arabic word into the background and making their size grow. At first, I tried using random() for the text size, but because it was being called continuously inside draw(), the words changed size extremely quickly and looked more like they were flickering. Instead, I created a wordSize variable and gradually increased it using wordSize += 0.5. Once it becomes too large, it resets back to its original size. This gave me a much smoother growing effect while still keeping the generative aspect of the sketch.
Reflections & Future work:
All in all, I am honestly really happy with how the final artwork came out. I thought a lot about the different aspects of the piece and tried to incorporate my culture where possible, while still keeping the meaning behind it clear and easy to understand. I learned a lot through the process, one of the biggest things being how much trial and error is involved in coding. There were multiple times where something as small as a bracket being in the wrong place would stop the interaction from working completely, and figuring out the Arabic font was also much more difficult than I expected. However, I think working through these problems helped me understand my code better rather than just getting it to work.
I also enjoyed experimenting with the visual side of the sketch. At first, the interaction was quite simple, with the words only changing when clicked, but adding the growing words in the background made the final result feel much more dynamic and generative. In the future, I would probably experiment with more ways for the user to interact with the words and patterns, rather than only clicking through them. I would also like to explore more Arabic words and values, since there are so many words that carry meanings and associations that cannot always be represented by a single English word.