Published on

Interactions #1: Express yourself

Authors
  • avatar
    Name
    Rob
    Twitter
    @x

Prompt

Express yourself in Three.js. Make the animation interactive. How do you imagine a human being communicating with you? Explain why you did it this way.

Output 1

The animation starts with a gentle, continuous rotation to represent inherent creativity. As soon as a user interacts (via mouse or touch), that autonomous motion is frozen, and your input takes over the animation. A tap or click also changes the particle color, symbolizing a responsive dialogue.

Why This Expression?

  • Autonomous Creativity: The particle system starts with a gentle, continuous rotation. This represents an inherent creative flow—a dynamic state that exists even without external input.
  • Interactive Communication: The moment you move your mouse or touch the screen, the system "listens." It freezes the current autonomous rotation (as a snapshot of its natural state) and shifts control to your input. From that moment on, your gestures dictate the rotation, symbolizing a conversation where your presence influences the creative output.
  • Responsive Dialogue: A tap or click changes the particle color, further emphasizing the idea of interactive communication. It’s as if the system is saying, "I hear you," by instantly reflecting your action visually.

What Does Interaction Mean Here?

  • User Input as Communication: Interaction in this context is not just about triggering animations—it represents a dialogue between the human and the digital canvas. Your movements (or touches) translate directly into the visual behavior of the scene, making you an active participant in the creative process.
  • Transition from Autonomy to Collaboration: The initial continuous rotation symbolizes a self-sustaining creative energy. Once you interact, that energy becomes collaborative, showing how individual input can merge with the innate flow of creativity to create a unique, shared expression.

This design, combining an autonomous start with a smooth transition to interactive control, aims to capture the essence of communication—a blend of natural creativity and responsive dialogue.

Output 2

In this animation, thousands of particles form a galaxy with distinct spiral arms. The galaxy slowly rotates on its own, but when you move your pointer (or touch the screen), it tilts in response, as if acknowledging your presence. A click randomly re-colors the galaxy, like a burst of spontaneous emotion. This design visualizes communication as a cosmic interplay between inherent order and the unpredictable, vibrant influence of human interaction.

Why This Expression?

  • Cosmic Beauty: The spiral galaxy—with its vibrant, blended colors and structured spiral arms—symbolizes the vast, interconnected nature of creativity. The galaxy’s inherent rotation represents an underlying order and rhythm present even without external influence.
  • Interactive Communication: As you move your mouse or touch the screen, the galaxy tilts, as though it were responding to your presence. This interactive tilt is a visual metaphor for dialogue—your gesture influencing the cosmic flow. A click triggers a burst of random colors, mimicking an immediate, heartfelt reaction, much like the spark of an idea in conversation.

Why This Design?

I wanted to create an experience that is both mesmerizing and evocative. The interplay between autonomous rotation and interactive tilt, along with the sudden color shifts, embodies a conversation where nature’s inherent order meets the unpredictable, vibrant input of human communication. This dynamic exchange creates a captivating visual dialogue, making the artwork feel alive and responsive.

This expression uses three.js to create a living, interactive galaxy—a digital cosmos that listens, responds, and evolves with every gesture, capturing the essence of creative communication.

Output 3

In this animation, hundreds of nodes (points) are scattered in 3D space and connected by lines when they’re close enough. The network gently pulses with a subtle, organic motion. As you move your mouse (or touch the screen), the entire network tilts and orients based on your pointer’s position, as if it’s reading your energy. A click randomly re-colors both the nodes and their connections, representing a burst of creative dialogue. This design envisions communication as a living, dynamic web where every gesture affects the interconnected whole.

Why This Expression?

  • Visual Representation of a Living Network: In this design, nodes represent individual ideas or impulses, and the lines connecting them illustrate the intricate, often unseen links between thoughts. The network is in constant, gentle motion—pulsing and shifting subtly over time—which symbolizes the dynamic nature of creativity.

  • Interactive Communication: Your gestures directly influence the network. As you move your mouse or touch the screen, the network tilts and orients according to your input, suggesting that it’s “listening” to you. This visual shift represents a dialogue where your presence causes subtle yet significant changes, echoing how human communication can alter the state of a creative process.

  • Emotional Bursts on Click: A click (or tap) triggers a random change in the colors of both nodes and connections. This sudden, vibrant shift symbolizes a burst of emotion or an inspired idea—an immediate, heartfelt response within the ongoing conversation.

What Does Interaction Mean Here?

  • Responsive and Evolving Dialogue: Interaction isn’t just a trigger for change; it’s a continuous conversation. The network adapts and responds in real time to your movements, creating a dynamic visual exchange. Every gesture adds a personal touch to the canvas, making you a co-creator of the ever-changing display.

This expression uses three.js to construct a visually engaging, interactive neural network—a metaphor for how creativity and communication are inherently interconnected, dynamic, and deeply responsive to human input.