Generative Art Tools

2025-01-08

Generative art is a broad term, and the tools we use to create it are just one part of the process. Through my research on various artists and their tools, I found a wide range of approaches, including Processing, p5.js, pure JavaScript, OpenFrameworks, TouchDesigner, Unity, Cinder, Runway ML, and others. Choosing the right tool depends on the specific needs and complexity of the project. Some tools make it easier to achieve specific visuals, others are node-based (offering a visual workflow), some are ideal for advanced graphics, and some work directly in a browser environment.

My goal is to create an interactive generative art tool for experimenting with typography and grids enabling users to produce and export unique visuals. Based on my needs, I believe Processing or p5.js are the most suitable options for my project. The final choice will depend on whether I need the tool to run in a browser.

Processing

Pros:

  • Powerful for 3D rendering and custom shaders (PShader).
  • Extensive library support for graphics, physics, and audio.
  • Great for desktop-based applications --> no dependency on a browser.
  • Supports high-performance rendering and larger projects.

Cons:

  • Limited for browser-based sharing since it’s a Java-based desktop application.

p5.js

Pros:

  • Runs directly in the browser, making it easy to share and deploy.
  • Strong community and examples for generative art.
  • Integrates with other web technologies like HTML, CSS, and APIs.

Cons:

  • WebGL support is limited compared to Processing or Three.js.
  • Performance can be slower for large or complex 3D scenes.
  • Limited support for advanced shaders and 3D rendering.

Pure JavaScript

Pros:

  • Fully customizable.
  • Can integrate with Three.js for advanced 3D.
  • Lightweight and flexible.

Cons:

  • No built-in drawing or rendering utilities; everything must be coded from scratch.
  • Requires more development time and effort compared to tools like p5.js.

Open Frameworks

Pros:

  • High performance, ideal for real-time graphics and large installations.
  • Supports complex 3D rendering, shaders, and advanced visual effects.
  • C++-based, giving low-level control over graphics and hardware.

Cons:

  • Requires more setup and familiarity with C++.
  • Not browser-based.

TouchDesigner

Pros:

  • Node-based, making it highly visual.
  • Powerful for creating real-time visuals and interactive installations.
  • Good for integrating with physical devices.

Cons:

  • Limited flexibility for custom coding compared to Processing or p5.js.

Unity

Pros:

  • Powerful for real-time 3D graphics and physics.

Cons:

  • Overhead and complexity may be excessive for generative art projects.
  • Requires familiarity with C# or Unity’s scripting environment.

Cinder

Pros:

  • High-performance graphics with deep control over rendering.
  • Good for 3D generative art and interactive installations.
  • C++-based, offering flexibility.

Cons:

  • Learning curve.
  • Not browser-compatible.

Runway ML

Pros:

  • Focused on AI-powered generative art (e.g., style transfer, GANs).
  • Node-based.

Cons:

  • Limited customization compared to coding-based tools.
  • Heavy reliance on machine learning and pre-trained models.

Final Thoughts

Taking everything into consideration, I’ve decided to focus on p5.js and Processing as the primary tools for my generative art project. Both tools are well-suited for experimenting with typography, grids, and shaders, while offering flexibility for interactive and creative outputs. The final choice will depend on my focus area.

Typography

  • p5.js: It's easy to load custom fonts and style text. I can turn text into points to move or reshape it, and it works in 3D with WebGL.
  • Processing: It’s better for handling bigger or more complex text layouts. I can turn text into shapes or place it in 3D environments.

Shaders

  • p5.js: I can use shaders in WebGL, but it’s simpler and not as powerful.
  • Processing: It gives me more control and is great for advanced shader effects.

3D Rendering

  • p5.js: It’s good for simple 3D shapes and interactive visuals, but it struggles with more complex scenes.
  • Processing: It’s much better for detailed 3D work, with advanced lighting, textures, and control over shapes.

Sources

  • Zafeiriou, S. (2024, December 12). Top 15 Algorithmic Art Tools for Creating Generative Art in 2024 | Steve Zafeiriou. Steve Zafeiriou. https://stevezafeiriou.com/algorithmic-art-tools/