Exploring Generative Art with JavaScript

Generative art is a technique where the artist creates systems, usually in the form of algorithms, that autonomously generate artworks. These systems can produce infinite results from an initial set of rules, making the process fascinating and full of possibilities. In this article, we will delve into the world of generative art using JavaScript and, more specifically, the popular library p5.js.

What is Generative Art?

Generative art relies on creating systems that can generate an infinite number of variations of a work of art. These systems can be controlled by specific rules, mathematical algorithms, or even randomness. With each execution of the system, a new, unique, and visually interesting artwork can be produced.

This form of art is deeply connected to programming, as the rules and code define how the visual results are created. Generative artists use algorithms to define patterns, colors, shapes, and movement, making every work a process of discovery.

Why JavaScript?

JavaScript is a versatile and accessible language that runs directly in web browsers, allowing immediate visualization of generative art results. Moreover, thanks to libraries like p5.js, it’s possible to create complex graphics with just a few lines of code.

p5.js is a JavaScript library specifically designed for creating interactive and visual graphics. Its simplicity makes it an ideal tool to start exploring generative art.

Getting Started with p5.js

Setting up the Environment

To start creating generative art with JavaScript, all you need is a browser and a code editor. You can use the p5.js web editor or download the library and add it to your project.

The Basic Skeleton of a p5.js Sketch

Every p5.js sketch is structured into two main functions:

• setup(): This function runs once at the beginning. It's where we set up the canvas, colors, and any initial parameters.
• draw(): This function runs repeatedly in a loop. Here, we place the instructions to draw and create the visual elements.

Here’s a basic example:

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(255), random(255), random(255), 150); // Random colors with transparency
    noStroke();
    ellipse(x, y, random(50, 100)); // Draw random circles
  }
}

In this basic sketch, we create a blank canvas and draw 100 circles with random colors, each positioned randomly. The beauty of generative art lies in the variability of the results. With each run of the code, the circles will appear in different locations and with different colors.

Creating Patterns with Math

Generative art often combines randomness with precise mathematical structures. Let’s see an example where we generate a geometric pattern based on regular shapes and cyclical movements:

function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i < 100; i++) {
    let angle = map(i, 0, 100, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    ellipse(x, y, 50, 50); // Draw circles in a circular pattern
  }
  noLoop(); // Static drawing
}

In this example, we use trigonometric functions like cos() and sin() to distribute 100 circles around the canvas center in a circular pattern. The beauty of math in generative art is that you can use simple equations to create complex and surprising patterns.

Adding Interactivity

One of the great advantages of working with JavaScript and p5.js is how easily you can add interactivity to your creations. Below is an example where the colors of a pattern change according to the mouse position:

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i < numLines; i++) {
    let x = i * spacing;
    let colorValue = map(mouseX, 0, width, 0, 255); // Changes with mouse position
    stroke(colorValue, 100, 150);
    line(x, 0, width / 2, height);
  }
}

In this sketch, the color of the lines changes based on the mouse position. Interactivity is an essential component of generative art, as it allows the viewer to directly influence the artwork.

Conclusion

Generative art with JavaScript opens up a world of creative possibilities. Using p5.js, we can transform mathematical equations, random functions, and user interactions into dynamic and surprising visuals. The best part is that, thanks to the flexibility of this environment, the results are unique and always different with each execution.

Exploring generative art is a great way to blend programming and creativity. Experiment with different shapes, colors, and patterns to see how far you can push your own generative artwork!