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