Project Overview
This project is an interactive web application that uses a combination of simple rules and user input to create dynamic, ever-changing visual patterns. It serves as a practical demonstration of my ability to write generative algorithms and build a user-facing front-end. It highlights foundational skills in creative coding and my understanding of how to apply generative principles to non-AI contexts.
Tech Stack & Tools
- HTML & CSS: For structuring and styling the web page.
- JavaScript: For creating the interactive generative art logic.
- P5.js: A JavaScript library for creative coding, simplifying the drawing process on the canvas.
My Process
Phase 1: Concept & Setup
I began by conceptualizing a visual effect that could be created with code, focusing on principles like recursion, randomness, and simple particle systems. I then set up the basic HTML canvas and integrated the P5.js library.
Phase 2: Building the Generative Logic
The core of the project was writing the JavaScript to generate the visuals. I implemented a function to draw a series of shapes whose size, position, and color were determined by mathematical functions and random values.
Phase 3: Adding Interactivity
To make the project interactive, I added event listeners to track mouse movements. The generative algorithm was then modified to respond to the cursor's position, creating a unique visual experience with every interaction.
Results & Future Work
The final product is a captivating, interactive piece of digital art. This project solidifies my understanding of generative systems and my ability to create dynamic, engaging user experiences without the need for a complex AI model.
Future Enhancements:
- Allow users to save their favorite generated art as an image file.
- Add new generative algorithms and allow users to switch between them.
- Introduce more complex parameters for user control, such as color palettes and speed of generation.