https://github.com/burnycoder/emergent-complexity

Interactive generative art visualization where particles move based on the Clifford Attractor and user-adjustable parameters for particle count, trail opacity, repulsion strength/radius, color influence, density threshold, and anti-cluster force, forming complex patterns on a canvas. Made with HTML with Canvas API, Tailwind CSS, JavaScript.
https://github.com/burnycoder/emergent-complexity

Last synced: 5 months ago
JSON representation

Interactive generative art visualization where particles move based on the Clifford Attractor and user-adjustable parameters for particle count, trail opacity, repulsion strength/radius, color influence, density threshold, and anti-cluster force, forming complex patterns on a canvas. Made with HTML with Canvas API, Tailwind CSS, JavaScript.

• Host: GitHub
• URL: https://github.com/burnycoder/emergent-complexity
• Owner: BurnyCoder
• Created: 2025-04-08T08:11:41.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-08T09:28:57.000Z (about 1 year ago)
• Last Synced: 2025-06-27T16:48:20.521Z (about 1 year ago)
• Language: HTML
• Homepage:
• Size: 26.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Emergent complexity

Interactive generative art visualization where particles move based on the [Clifford Attractor](https://blbadger.github.io/clifford-attractor.html) and user-adjustable parameters for particle count, trail opacity, repulsion strength/radius, color influence, density threshold, and anti-cluster force, forming complex patterns on a canvas. Made with HTML with Canvas API, Tailwind CSS, JavaScript.

![image](https://github.com/user-attachments/assets/d903e76f-bc08-4da2-87ae-5ec306d41d89)

Video: https://youtu.be/bXrRpF_-TTM

## How to Run

Open emergent-complexity.html file in browser

## Features

* **Generative Art:** Creates dynamic and complex visual patterns based on mathematical rules and particle interactions.

* **Clifford Attractor:** Utilizes the Clifford Attractor equations to guide the target positions of particles, creating characteristic fractal-like structures.

* **Particle System:** Simulates numerous individual particles moving on the canvas.

* **Interactive Controls:** Allows real-time adjustment of various simulation parameters via UI sliders:

    * Number of Particles

    * Trail Opacity (how quickly old positions fade)

    * Particle Repulsion Strength & Radius

    * Color Influence Strength (how much nearby particles affect each other's hue)

    * Density Threshold & Anti-Cluster Force (to prevent excessive clumping)

* **Color Blending:** Particles gradually change their color (hue) based on the colors of their neighbors.

* **Anti-Clustering:** Implements a force that pushes particles away from areas that become too dense.

## Controls

The control panel in the top-left corner allows you to manipulate the simulation:

* **Particles:** Adjusts the total number of particles simulated. *Changing this value will reset the simulation.*

* **Trail Opacity:** Controls the alpha value of the background fill on each frame. Lower values result in longer particle trails; higher values result in shorter trails.

* **Repulsion:** Sets the strength of the force pushing particles away from each other when they are within the repulsion radius.

* **Repulsion Radius:** Defines the distance within which particles exert repulsive forces on each other.

* **Color Influence:** Determines how strongly a particle's target hue is influenced by the hues of its neighbors.

* **Density Threshold:** Sets the minimum number of neighbors within the `DENSITY_CHECK_RADIUS` required to trigger the anti-cluster force.

* **Anti-Cluster Force:** Controls the strength of the force pushing particles away from the center of dense clusters.

* **Reset Simulation Button:** Restarts the simulation with the current parameter settings but new random constants for the Clifford Attractor and new initial particle positions/velocities.

## Potential Improvements

* Make applying the attractor another continuous parameter that the user can play with. 

* Add more attractor types (e.g., De Jong, Peter de Jong).

* Implement mouse interaction (e.g., attract/repel particles).

* Optimize performance for a larger number of particles.

* Add functionality to save the current canvas state as an image.

* Explore different color mapping strategies.