Brownian Graph

This interactive p5.js visualization features a dynamic network of moving points on a square canvas, adapting to the window size. The background is a gradient of two randomly selected colors from a palette of 69 hues.

Graph Structure: Points, connected via a symmetric matrix, range from 3 to 14. Their connections and sizes are randomized.

Movement & Interaction: Points move with randomized velocities, bouncing off edges. Collisions cause points to toggle color between black and white, simulating momentum exchange.

Interactivity: Users can add points by clicking or touching, dynamically expanding the network and its connections.
Link Color Variation: The color of connecting lines changes with their length, transitioning from white to black, enhancing visual depth.

Save GIF Feature: Press 's' or 'S' to save the animation as a GIF. This captures the evolving network and its interactions in a looping format, preserving the dynamic changes and visual effects.

Color and Contrast: The gradient background and dynamic point colors add richness and visual interest. Varying link colors further enhance depth and aesthetics.

Fluid Motion: The organic movement of points creates a mesmerizing effect reminiscent of Brownian motion, blending chaos with order.

Evolving Design: The network grows with user interaction, symbolizing fluid connectivity and change.

Color Selection: Two colors are randomly chosen for each gradient, ensuring a unique background each time.

Network Variability: Initial points, their sizes, and connections are randomized, adding complexity and unpredictability.

Link Color Change: Line colors vary based on length, creating a gradient effect from white to black.

This piece combines technical precision with artistic expression, offering a captivating and ever-evolving visual experience. Press 's' or 'S' to save the animation as a GIF and capture the intricate dance of points and connections.