Midterm Project Progress 1: Polyglot Galaxy (Week 5)
For my midterm project, I decided to develop an interactive generative artwork called Polyglot Galaxy. The concept is to create a multilingual visual space where users can click to “stamp” greetings from different languages onto a galaxy background. Each click generates a unique phrase using randomness, along with visual glow effects and sound feedback. My goal is to combine text, image, sound, and object-oriented programming into one interactive experience that reflects my interest in languages combining aesthetics like sounds, animations.
In terms of user interaction design, the program starts with a start screen and transitions into the play state after the first click. Once the user enters the play mode, clicking on the canvas generates a new greeting text at the mouse position. The phrases are randomly selected from a JSON file and styled with different sizes, colors, and blinking alpha effects using sine functions.
The coded that I am proud of would be:
// sound on click
if (mouseX <= 300) {
clickSound.play();
} else {
clickSound1.play();
}
As I also implemented two different sounds depending on the click position (left or right side), where split in the middle if you click towards the left side of the frame it will play 0.mp3 file sound more of a peep sound and if you click more towards the right side it would play 1.mp3 sound more deep and it also restart function using the “R” key to reset the session without reloading the page. This structure I think gives a good step by step approach.
From a coding perspective, I have begun designing the project using functions, classes, and interactivity as required. I created a GreetingText class to manage each stamped phrase as an object, including its position, color, size, glow shape, and blinking animation. The generatePhrase() function handles generative text creation using randomness from language data, punctuation, and decorative elements. Moreover, I added a state system (“start” and “play”) to control the interface flow.
The challenging part was integrating multiple media elements together incorporating sound playback, generative text from JSON, and object-oriented animation in the same system. To reduce this risk, I tested each component separately by doing sound playbacks on mouse click, image backgrounds for different states, and a prototype class for animated text objects. I also added a limit to the number of stamped texts to ensure the sketch runs smoothly.
I think maybe I can improve by adding some songs into the galaxy output at the start menu to attract people e.g. assuming you were watching the movie guardians of the galaxy or universal starting music.
https://p5js.org/reference/p5/textAlign/