Creating Digital Art with Math

I was exploring the idea of using some algorithm to create me a random covers based on a page hashed slug.

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, pattern, to bring these ideas to life. In this writing, 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 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 different designs, from smooth gradients to complex geometric patterns.

How It Works#

It uses a mathematical function to calculate the color of each pixel on a canvas. The function exposes 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#

For demonstration purposes and to not overload device, the examples are rendered in fixed 256x256 px resolution. It allows to change things on a fly.

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.

Playground#

Playground includes a gallery of pre-build patterns to start with. You can render, modify, or use it for your own designs.

Visit playground to explore the full collection and start experimenting.