I speak both Arabic and English, so when I learned that our project had to involve words, I knew I wanted to create something that brought both languages together. My first idea was simple: a program that translates colors typed in English into Arabic and displays them on the screen. At first, I liked it, but I quickly realized it felt too basic. Each time you typed a color, the same thing happened, for the same input you got the same output every single time.
To improve it, I thought to add a quiz that tested you on three random colors each time. This added some variation, but it still didn’t feel interactive enough. I wanted users to not just type answers but to interact with the piece and feel like they were shaping the experience. As I worked on making the program more dynamic, I found a YouTube video that helped me learn how to add randomness and interactivity to my code: https://youtu.be/-6v_AYyn49k?si=Ra0T98ejk4Xkcr-J. From that tutorial, I learned how to make the Arabic words appear in different random positions and sizes and how to create multiple modes so the user can switch between still, bouncing, and floating text. This gave the piece a balance between control and randomness, the user can make choices, but there’s still some sort of randomness. I also used custom fonts from Google Fonts by embedding them directly into my HTML file.
In the final version, I kept my original concept of translating colors, but now the project feels much more alive. The user can explore different modes, play with the experience, and see something new each time. It’s almost as if its art created by the words now. It’s structured enough for the user to have some control, but there’s always randomness, so it’s never exactly the same twice. For me, this connects to Chris Crawford’s ideas about interactivity, where both the user and the program are working together to create something meaningful, rather than the program just showing a static result. It’s no longer just a translation tool, it’s an interactive artwork that bridges both of my languages while letting others engage with it in a fun and personal way.
When I first added Arabic text to my program, it kept printing from left to right, which looked really strange because Arabic is supposed to flow right to left. It took me a couple of tries to figure out why this was happening. Eventually, I realized I needed to set the text direction directly in the code. Once I added a line to force the drawing context to use RTL, the Arabic words finally displayed correctly. It was a small but important fix that made the project look much more natural and readable.
// Draw Arabic word correctly (right to left) push(); drawingContext.direction = 'rtl'; textFont(arabicFont); textSize(item.size); fill(item.color); text(item.word, item.x, item.y); pop(); }