# 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 * xpath.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 * tpath.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 circlepaths.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 circlepaths.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 circlepaths.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 circlepaths.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.