Before starting, it would be good to recall fundamentals of the terminology that is used in the field of computational art.

Computational art, at its core, represents a paradigm shift in artistic creation. It’s not simply about using computers to illustrate existing artwork; it’s about leveraging algorithms, mathematical models, and data to generate entirely new forms of art. Let’s unpack this with some foundational terminology and then delve into the nuances.

  • Generative Art: This is the broadest term, encompassing any artwork created through an automated process. It’s crucial to distinguish this from simply using a computer to execute a human artist’s instructions. A generative artwork isn’t dictated by a single, pre-determined action; it evolves based on rules and parameters. For example, a system generating landscapes might start with a basic terrain map and then iteratively add detail, erosion, and vegetation based on simulated rainfall and wind patterns.

  • Algorithmic Art: This term is often used interchangeably with generative art, but it emphasizes the algorithm – the set of rules – that governs the creation process. A common example is a fractal generator. Fractals, like the Mandelbrot set, are generated by iterating a simple mathematical equation. Each iteration produces a complex, self-similar pattern. The parameters of this equation – the maximum number of iterations, the range of complex numbers – determine the specific shape of the fractal. Changing these parameters produces drastically different results, demonstrating the algorithmic control.

In order to use the computational systems such as computers as a medium, we need to learn how to speak machine language. As it is real life, in order to communicate with someone from another country, we need to learn their language. Computational systems are similar to that analogy. There are variety of languages in order to talk with computers. Each programming language is tailored for specific contexts. For instance, there are several programming languages and tools exist for creating art like openFrameworks (a C++ framework), Unity (C# game engine), TouchDesigner (node-based programming), or p5js (Javascript). While some of the tools are focused on specific contexts, others may provide more general purpose.

In the end, we need to first learn which programming language to choose. Luckily, mathematics and physics provide great knowledge base for us to use in any language. Because, they abstracted knowledges presented via symbolic characters. So, when you learn how to utilize an algorithm in a programming language, you can implement the algorithm in another programming language easily by taking care of the syntactical rules of the programming language.

There are several ways to implement an algorithm. But sometimes, we need to transform an equation to another equation type according to our program.

1. What is called mathematical equation?

1.1. Polar Equations

A polar equation describes a curve by defining the distance from a fixed point (the pole, or origin) based on an angle . The coordinates are expressed in terms of and .

The polar equation for a circle shifted right by 1 unit is:

This corresponds to the Cartesian form $(x−1)2+y2=1(x−1)2+y2=1.$

1.2. Algebraic Equations

An algebraic equation in n variables is an polynomial equation of the form. It is an equality between two algebraic expressions involving variables, constants, and arithmetic operations (addition, multiplication, powers, etc.). These equations are also called polynomial equations.

A simple algebraic equation is:

1.3. Parametric Equations

Parametric equations are a set of equations that express a set of quantities as explicit functions of a number of independent variables, known as “parameters.” For example, while the equation of a circle in Cartesian coordinates can be given by; 

A parametric equation expresses variables (usually and ) as functions of a third variable called a parameter, often denoted as . Instead of one equation relating and , parametric equations give separate expressions for each coordinate based on .

A circle of radius can be described parametrically as:

1.4. Summary

These equation types provide powerful ways to represent and manipulate curves and shapes crucial for computer-generated art and animation.

Equation TypeDefinitionExampleUse in Computer Art
Parametric EquationVariables as functions of a parameter ttAnimating paths, curves, and shapes
Polar EquationDistance rr as a function of angle θθCreating radial and symmetric designs
Algebraic EquationEquality of algebraic expressionsDefining shapes, solving geometric problems

Heart Curve Equation

source → https://mathworld.wolfram.com/HeartCurve.html
example → https://openprocessing.org/sketch/1927567

Calculus for Makers It involves several tutorials in English about calculus and the relationship between programming. The articles include programming p5js implementations of the relevant mathematical paradigms.

Signed Distance Function (SDF)

A SDF is a function that can tell you how far a point is from a surface of a shape, say a sphere (usually in Euclidean space). For 3D coordinate system;

For 2D coordinate system;

Calculate distance to circle using p5JS;

function sdf(p, center, radius) {
    return Math.sqrt(Math.pow(p.x - center.x, 2) + Math.pow(p.y - center.y, 2)) - radius; // or use p5.Vector.dist()
}

Calculate distance to rectangle using p5JS;

function sdf(p, size, center) {
    const diff = p.copy().sub(center);
    return Math.max(Math.abs(diff.x) - size.x, Math.abs(diff.y) - size.y);
}

Calculate distance to rotated rectangle using p5JS;

function sdf(p, size, center) {
    let diff = p.copy().sub(center);
    diff = rotate2d(diff, Math.PI * 0.25);
    return Math.max(Math.abs(diff.x) - size.x, Math.abs(diff.y) - size.y);
}

source