Math

When creating parametric designs, math, especially geometry, will be your constant companion. In this short overview I will cover a few basics, which will come in handy when creating your first code-driven designs.

The circle

See circle and arc in the drawing basics.

A circle is defined by it's centre and radius. A circle's diameter is radius * 2. The circumference of the circle is Math.PI * 2 * radius. The circumference kan also be described by points located at distance radius between 0 and 360 degrees. And the surface or area of a circle is Math.PI * radius².

When you are using circles to visualise data, have in mind, that the surface of the circle increases exponentially to the radius. So do not use the radius as your scale, use the surface: const radius = Math.sqrt(surfaceSize / Math.PI);

Radians

In many functions you will need to use radians as an input, not degrees. The conversion is quite simple: Math.PI equals 180°. So if we want to calculate the radians for a specific angle, we only need the following formula:

const rad = Math.PI / 180 * angleInDegrees;

And then reverse the whole thing:

const angleInDegrees = rad * 180 / Math.PI;

Polar coordinates

Our normal coordinate system is described by x, y (, z). An alternate coordinate system is the polar coordinate system. In this system, each point's location is described by radius and angle. To convert it into our normal coordinate system two simple conversions help us:

const rad = Math.PI / 180 * angle;
const x = radius * Math.cos(rad);
const y = radius * Math.sin(rad);

The functions above also take negative angles (see image below for an example).

We can als do the reverse to calculate angle and radius from x, y:

const radius = Math.sqrt( x * x + y * y );
const angle = Math.atan2(y, x) * 180 / Math.PI;

Distances

Some of you might remember Pythagoras and his triangle a² + b² = c². This is the basis for distance calculations in our two dimensional coordinate system:

// Point #1
const p1x = 10;
const p1y = 10;

// Point #2
const p2x = 40;
const p2y = 20;

const distX = p1x - p2x;
const distY = p1y - p2y;

const distance = Math.sqrt(
  distX * distX + 
  distY * distY
);

For short variable names, simply writing a * a is the shortest. If you have a long variable name, there is a shorter Version: Math.pow(a, 2). This comes in even more handy when you have a higher exponent: Math.pow(a, 5).

Curves

Curves are very complex, the following examples will provide some starting points, particullarly from a parametric design perspective, rather than a mathematical/geometric perspective.

sin/cos

Through sin/cos we can generate waves. The problem is, the normal wavelength is Math.PI * 2 and it starts at 0. So for one wave across our sketch (sketchWidth) we would need to use the following:

const sketchHeight = 400;
const sketchWidth = 400;
beginShape();
for (let x = 0; x < sketchWidth; x += 1) {
  vertex(x, sin(Math.PI * 2 / sketchWidth * x) + sketchHeight / 2);
}
endShape();

But we would hardly see anything, because the amplitude is 1. But we can control the amplitude (distance between highest and lowest point):

const sketchHeight = 400;
const sketchWidth = 400;
const amplitude = 200;
beginShape();
for (let x = 0; x < sketchWidth; x += 1) {
  vertex(x, sin(Math.PI * 2 / sketchWidth * x) * amplitude + sketchHeight / 2);
}
endShape();

We could for example feed those two functions into our polar coordinate system:

Rule of Three

The Rule of Three is mostly of interest, if your are looking at ratios/relationships between numbers. For example we define that a rectangle with the width of 400px equals 100%. Now we want to know the width for a rectangle representing 30%. Using the rule of three we can:

const fullWidth = 400;
const fullPercentage = 100;

const searchPercentage = 30;
const searchWidth = fullWidth / fullPercentage * searchPercentage;

So we require a pair defining the relationship between two scales (pixel and percentage). And from there on, we can use other values, from either scale (pixel or percentage) to calculate the corresponding value, by dividing the the pair and multiplying by the addition value, to find this value's corresponding value.

Random

The p5js function random(), allows you to set a min and max value. But sometimes you either want more control or random() is not available. Here is a quick formula to replicate the functionality:

const min = 20;
const max = 120;
const value = min + Math.random() * (max - min);

HTML

GIF