Ribbons With Math

Surfaces, Mathematics and Ribbons

Mathematics is very useful for drawing surfaces in 3D space. Surfaces are often described by the following equation type y = f(x, z), that is height of 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 is changing in a linear way it is easy to write a direct equation, such as y = x² and to use Babylon.js to draw it path for a range of values of x.

const path = [];
for (let x = -5; x <= 5; x++) {
    let y = x * x
    path.push(new BABYLON.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 a waste of time and extra work.

const path = [];
for (let t = -5; t <= 5; t++) {
    let x = t;
    let y = t * t
    path.push(new BABYLON.Vector3(x, y, 6))
}

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

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 BABYLON.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.

const path = [];
for (let t = -5; t <= 5; t++) {
    let x = f(t);
    let y = g(t);
    path.push(new BABYLON.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.

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 BABYLON.Vector3(x, y, z))
    }
    path.push(path[0]); // close circle
    paths.push(path)
}

Again we can use a parameter for z

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 BABYLON.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

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 BABYLON.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

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 BABYLON.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

Paths to Try

You could choose a known math curve from these sites http://en.wikipedia.org/wiki/List_of_curves
http://www.mathcurve.com/courbes2d/courbes2d.shtml
or others.
When you feel more comfortable, create you own.