Overthinker-

As usual finding an idea for assignment 4 was a challenge of its own and as I was scrolling through instagram I saw a video about the overthinking brain and there it was, my generative text artwork. The mind is an amazing thing but the overthinking mind is an epitome as it lies to its owner and paralyses him in negativity.  So through my artwork I wanted to create a simulation of that but have the positive thoughts “win” and create a sense of peace and victory in the end.

This is what I came up with in the end:

First, I started off with a simple black background and positive and negative words just floating around and the negative words disappear when colliding with the positive to symbolize that we should not let the negative thoughts our head lies to us with win.

Highlight of code:

The mechanism of the colliding and disappearing is honestly what I’m most proud of because it took a lot of researching and trial and error but in the end it came out exactly how I envisioned it.

Initially, each word is represented as an object, complete with its position, velocity, and type. Using the dist() function, a foundational function in p5.js, the code assesses the distance between two word objects. If this distance is less than a specified threshold, it infers that the two words are overlapping or colliding. Given the creative intent, the code dictates that if either of the two colliding words is negative, it should be removed from the display. However, directly manipulating (like removing items from) an array while iterating over it can lead to skipped iterations or index out-of-bound errors. To circumvent this, the code first logs the indices of words slated for removal in a separate removalIndices array. Only after all overlap checks are completed does the code loop through removalIndices to remove the identified words from the main displayedWords array. This ensures a safe, error-free removal process. Such collision-detection methodologies are commonplace in game development and interactive visualizations.  Daniel Shiffman’s tutorials on The Coding Train on YouTube were extremely helpful in figuring all of this out, especially object collision pt1, object collision pt2, and  his video about adding and removing from arrays

// Update and display each word
for (let i = displayedWords.length - 1; i >= 0; i--) {
    displayedWords[i].display();
    displayedWords[i].move();

    // Count negative words
    if (displayedWords[i].wordType === "negative") negativeWordCount++;

    // Check for overlapping words
    for (let j = i - 1; j >= 0; j--) {
        if (dist(displayedWords[i].position.x, displayedWords[i].position.y, displayedWords[j].position.x, displayedWords[j].position.y) < 30) {
            if (displayedWords[i].wordType === "negative" || displayedWords[j].wordType === "negative") {
                if (displayedWords[i].wordType === "negative" && !removalIndices.includes(i)) {
                    removalIndices.push(i);
                }
                if (displayedWords[j].wordType === "negative" && !removalIndices.includes(j)) {
                    removalIndices.push(j);
                }
            }
        }
    }
}

// Remove words based on indices stored in removalIndices list
for (let index of removalIndices) {
    displayedWords.splice(index, 1);
}

However, I didn’t like how simple and plain it looked so I started thinking of what other things I could add and started building the mind of my dreams. First, the background was to plain so I made it into a gradient of black and added particles that symbolizes the other thoughts and memories that are present in the mind and that alone made it look better and more lively like a real mind. Then I moved on to the words themselves and decided I wanted to make them look more distinctive so I went ahead and changed their color palette making the positive words lighter and cheerful and the negative more dark and gloomy. After that I remembered the goal I wanted to have which was a sense of peace and victory that comes with letting the positive thoughts win and decided to represent that with a beautiful sun that appears (symbolizing the radiance and happiness one feels when we don’t believe the lies our mind tells us) once all the negative thoughts are whooshed away and is surrounded by a peaceful find filled with nothing but positive words floating around.

Reflection:

The journey was both challenging and rewarding. The task started simply: display positive and negative words on a canvas. But as the requirements grew more complex – making words move, detecting overlaps, and having words disappear based on specific conditions – the code had to evolve. There’s a beauty in the simplicity of the final visualization: negative words being “overpowered” and disappearing when they encounter other words, and the eventual appearance of the sun symbolizing the triumph of positivity. However, behind that simplicity was a series of problem-solving steps, from collision detection to safely modifying arrays during iteration. In the end i’m so happy with the end result and what I was able to come up with in the end and of course the message it conveys.

Ideas for Future Work and Improvements:

1. Interactive Elements:
   • Allow users to add their own words to the positive and negative lists, personalizing the experience.
   • Let users click on words to manually remove them or promote them.
2. Animations and Transitions:
   • Instead of immediately removing negative words, they could fade out or shrink, making the disappearance smoother.
3. Sound Integration:
   • Add background music or sound effects, enhancing user engagement. For instance, a calming tune could play, with chimes or effects when words disappear or when the sun appears.
4. Narrative or Storytelling:
   • The visualization could be part of a larger narrative or game where users have to actively combat negativity.
5. Adaptive Challenges:
   • Introduce “boss words” that require more effort to remove.