SynoScape: Interactive Synonym Textscape
Sketch link: https://editor.p5js.org/hmuramatsu/sketches/iPIRJg6Sb
Description: An immersive and interactive experience where users engage with evolving text, transforming words into a swirling visual display of synonyms.
Project summary:
This project builds off of my interest in graphic visualizers and using text as a seed. My Creative Computing final project from last semester allowed the user to input a prompt using speech recognition and, based on this, generate music using a Replicate API. Referencing Daniel Shiffman’s tutorial, Perlin Noise Flow Field / The Coding Train, I created a flowfield that would visualize the music, allowing the color and path to respond to changes in amplitude.
.png)
flowfield project from last semester
Over this semester, every project I’ve done has also been along the lines of visualizations with user interaction. My final project has a similar aesthetic—a dark background (utilizing the alpha value) with a gradient of colors—and again allows the user to control the display.
I wanted to somehow incorporate text into my project, and when I was looking for inspiration, I came across this really cool swirling text concept by a designer @pepepepebrick on Instagram. It was a short and simple code, but the result was very intriguing, so I chose to reference this code as the basis of my project. It uses the conversion of polar coordinates into cartesian coordinates (as in the oscillation chapter of the Nature of Code book), increasing the angle with each repetition, to create a spiraled path.
I was also inspired by this sketch by shawnpeters that creates a web of synonyms. My original idea was to incorporate genetic modification to evolve either the appearance or the type of synonym over time. I thought that users could select two words as "parents," and the rest of the words would evolve based on a combination of their “DNA”. However, I couldn’t think of a good way to “combine” the words. I didn't really want to mix up the letters or anything like that, and I considered using umap-js, but while it could map the words, there’s no way for it to generate new words in between. So, I instead chose to just generate new synonyms based on one clicked word.
I had many different iterations of the sketch, first starting with adding a simple input bar and mouse controls, and next adding colors. Users can control the size of the letters by moving the mouse up and down, and the position of the spiral by moving the mouse left and right. Pressing the up arrow ‘freezes’ the size and spiral position.
Next, I actually added the API for synonym-generating, using the same one as I found in the sketch I mentioned earlier. However, I found that this one didn’t generate enough synonyms, so I found another one online (https://api-ninjas.com/api/thesaurus), that generates over a hundred depending on the word entered. Because this one didn’t have an example code on how to put it into p5.js, it took me a while to get it to work properly.
While that was difficult, I had an even harder time with the next part. I wanted the user to be able to click on a synonym, have the API generate more synonyms based on that word, and then display it with the others. While this sounds simple enough, I spent a very very long time trying to figure it out. I had to keep track of each synonym's position and, when the mouse was pressed, detect whether its position matched up with any word. I couldn’t figure out how to do it accurately because for a while the position values were much too low, and the clicking wouldn’t detect anything. I tried to get help from chatGPT, which gave me some idea of what I needed to do but also didn't execute exactly what I wanted. So, after playing around with it a lot more, I finally got the clicking to work. The next problem was that the newly generated synonyms wouldn’t show up unless typed into the input box, so after figuring that out, I added code to append the clicked synonym into it. Overall, it was a very confusing possess.
I had one version where instead of typed input, it used voice recognition, similar to my previous project. However, I didn’t like that version as much since it also took longer to load, so I decided to stick with the typing idea. In the final version, I added typing sound effects as well (one for when synonyms are generated and one for when none are found), adding to the concept.
If I had more time, I’d want to explore different versions of this textscape. I think it’d be interesting if I added a different kind of background music (one that’s more exciting) and then have the text change using the amplitude, similar to my previous project. Another idea that I had from the beginning is to incorporate forces like the gravity ones we’ve covered in class. I was going to add this into my final project, but I thought it would be too busy with the other word-clicking feature. I think it would be cool to be able to force the letters around through.
Another idea that one of my classmates had is to generate/randomize different fonts based on the the type of word (maybe nouns are one font, verbs are another, etc. - or something along those lines) instead of using the same font through the whole display.
I also do want to see if I could get the genetic modification idea to work to explore how words can evolve. The umap-js idea is intriguing but also just seeing how letters can decay or rearrange.
Presentation Link:
https://decisionscape.my.canva.site/synoscape-interactive-synonym-textscape