Creating Digital Art with Math

That’s exactly what i set out to do when I stumbled upon the concept of generative art is a form of digital art driven by mathematical functions.

Inspired by krzysckh's bitart, I decided to build my own tool, Patrn, to bring these ideas to life. In this post, I’ll walk you through how it works, break down some examples, and share tips for creating your own mathematical art.

What is Generative Art?

Generative art is artwork created with the use of an autonomous system, typically involving algorithms, computer code, or other procedural processes. The artist defines a set of rules, parameters, or instructions, and the system generates the artwork, often producing unique, unpredictable, or evolving results.

At its core, mathematical pattern art involves using formulas to determine the color or intensity of each pixel on a canvas. By defining a function that takes a pixel’s coordinates and the canvas dimensions as inputs, we can generate intricate designs, from smooth gradients to complex geometric patterns. The beauty lies in how simple math can produce visually striking results, blending creativity with logic.

With Patrn, I created a platform where anyone can experiment with these formulas, tweak parameters, and watch patterns emerge in real time. Whether you’re a coder, artist, or just curious, this approach makes digital art accessible and fun.

How It Works

Patrn uses a mathematical function to calculate the color of each pixel on a canvas. The function accepts four optional arguments:

1. x: number is horizontal coordinate of the pixel.
2. y: number is vertical coordinate of the pixel.
3. w: number is width of the canvas.
4. h: number is height of the canvas.

The function returns a value in the range 0–255, which represents the grayscale intensity of the pixel (0 for black, 255 for white) in the RGB color space. You can use JavaScript’s Math object—functions like sin, cos, or random—to craft dynamic patterns.

Examples

Let’s start with something simple: a horizontal gradient.

The formula (x * 255 / w) creates a smooth transition from black to white across the canvas. Here’s how it works:

• x is the pixel’s horizontal position.
• w is the canvas width.
• x / w gives a ratio (0 to 1) of how far the pixel is across the canvas.
• Multiplying by 255 scales this to the grayscale range, producing a gradient where the left edge is black (0) and the right edge is white (255).

This is a great starting point because it shows how a simple formula can create a visually appealing effect.

Now, let’s try something with more structure: a pattern of diagonal lines.

This formula, (x + y) % 50 === 0 ? 120 : 35, generates a pattern of 45-degree lines. Let’s break it down:

• (x + y) sums the pixel’s coordinates.
• % 50 computes the remainder when divided by 50, creating a repeating pattern every 50 pixels.
• === 0 checks if the sum is divisible by 50, marking specific pixels.
• The ternary operator ? 120 : 35 assigns a grayscale value: 120 (a medium gray) if the condition is true, or 35 (a darker gray) if false.

The result is a grid of diagonal lines, showcasing how conditional logic can create geometric patterns.

Let’s explore a more complex pattern: a hexagonal grid.

This formula creates a hexagonal grid by combining modular arithmetic and conditional logic:

• Math.floor(x / 30) divides the canvas into 30-pixel-wide strips horizontally.
• The ternary operator alternates the pattern based on whether the strip index is even or odd, offsetting the grid to mimic hexagons.
• Math.floor(y / 30) adds vertical repetition, aligning the pattern.
• The final condition checks if the combined coordinates form the grid, assigning 59 or 31 for contrast.

The result is a honeycomb-like structure, demonstrating how layered math can produce intricate designs.

For something more organic, let’s try a topographic-inspired pattern with a touch of noise.

This formula creates a wavy, radial topographic-like pattern:

• (x - w / 2) and (y - h / 2) center the coordinates relative to the canvas.
• Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2) calculates the distance from the center, creating radial effects.
• Math.sin(... / 20) introduces smooth oscillations, scaled to control frequency.
• Math.atan2(y - h / 2, x - w / 2) * 10 adds angular variation, twisting the pattern.
• The condition > 0 ? 59 : 31 assigns contrasting grayscale values.

This produces a fluid, almost topographic effect, showing how trigonometric functions can create organic visuals.

Tips for Creating

1. Start Simple: Begin with basic formulas like gradients (x * 255 / w) to understand how coordinates affect output.
2. Experiment with Math Functions: Use Math.sin, Math.cos, or Math.random to add waves, curves, or randomness.
3. Play with Modulo: The % operator is great for creating repeating patterns like grids or stripes.
4. Test in Patrn: Patrn’s gallery lets you tweak formulas in real time. Try modifying the numbers in the examples above to see how they change.
5. Combine Techniques: Mix conditionals, trigonometry, and arithmetic to create unique effects, like the topographic pattern.

Gallery

Patrn includes a gallery of pre-built patterns to start with. You can render, modify, or create your own designs from scratch.

Visit Patrn to explore the full collection and start experimenting.