Ribbons With Math

Surfaces, Mathematics and Ribbons

Mathematics is very useful for drawing surfaces in 3D space. Surfaces are often described by the equation type y = f(x, z), that is, the height of a point on the surface is determined by the ground coordinate position below the point.

For the moment take z as fixed, say z = 6. That means for that value of z y = g(x) for some function g.

When x changes linearly, it is easy to write a direct equation, such as y = x², and use Babylon.js to draw its path for a range of x values.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const path = [];
for (let x = -5; x <= 5; x++) {
    let y = x * x;
    path.push(new Vector3(x, y, 6));
}

Another way would be to use a separate parameter t, for example, and write x = t and y = t². This might seem like a waste of time and extra work.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const path = [];
for (let t = -5; t <= 5; t++) {
    let x = t;
    let y = t * t;
    path.push(new Vector3(x, y, 6));
}

This becomes useful when the change in x is not linear. Consider a circle of radius 5, for example. The direct equation is x² + y² = 25. How do you code that? Using the angle, a, as a parameter gives

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const path = [];
for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
    let x = 5 * Math.cos(a);
    let y = 5 * Math.sin(a);
    path.push(new Vector3(x, y, 6));
}
path.push(path[0]); // close circle

When it is possible to write the equations using parameters x = f(t) and y = g(t) it makes coding easier. Assuming the functions f(t) and g(t) have already been coded.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const path = [];
for (let t = -5; t <= 5; t++) {
    let x = f(t);
    let y = g(t);
    path.push(new Vector3(x, y, 6));
}

Having constructed one path to draw a circle at z = 6, do the same across a range of z values and use the many paths to create a ribbon.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const paths = [];
for (let z = -6; z <= 6; z++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
        let x = 5 * Math.cos(a);
        let y = 5 * Math.sin(a);
        path.push(new Vector3(x, y, z));
    }
    path.push(path[0]); // close circle
    paths.push(path);
}

Again, we can use a parameter for z.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const paths = [];
for (let t = -6; t <= 6; t++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
        let x = 2 * Math.cos(a);
        let y = 2 * Math.sin(a);
        let z = t;
        path.push(new Vector3(x, y, z));
    }
    path.push(path[0]); // close circle
    paths.push(path);
}

Makes a tube: Math-Based Ribbon Tube

We can also use the z parameter with x and y.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const paths = [];
for (let t = -6; t <= 6; t++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
        let x = 2 * Math.cos(a) + t / 2;
        let y = 2 * Math.sin(a) + t * t / 4;
        let z = t;
        path.push(new Vector3(x, y, z));
    }
    path.push(path[0]); // close circle
    paths.push(path);
}

Makes a U tube: Math-Based Ribbon U-Tube

And surfaces get more interesting if the change in z is not linear.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
const paths = [];
for (let t = 0; t < Math.PI; t += Math.PI / 32) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 32) {
        let x = 4 * Math.cos(a) * Math.sin(t);
        let y = 4 * Math.sin(a) * Math.sin(t);
        let z = 4 * Math.cos(t);
        path.push(new Vector3(x, y, z));
    }
    path.push(path[0]); // close circle
    paths.push(path);
}

a sphere: Math-Based Ribbon Sphere

More examples

It is hard to stop playing.
A ribbon of parabolas: Math-Based Ribbon Parabolas
parabolas scaled: Math-Based Scaled Ribbon Parabolas
parabolas with some trigonometry: Trigonometry-Based Ribbon Parabolas 1
parabolas and more trigonometry: Trigonometry-Based Ribbon Parabolas 2
cuboids with soft edges Cuboids with soft edges
cuboids with soft edges and recalculated UVs Cuboids with soft edges and recalculated UVs

Paths to Try

You could choose a known math curve from sources like the sites below, among others. When you feel more comfortable, create your own.

http://en.wikipedia.org/wiki/List_of_curves http://www.mathcurve.com/courbes2d/courbes2d.shtml