Exploring ruled surfaces with Three.js and Sketchfab

A ruled surface is a surface generated by moving lines in space, this means that for any point of the surface, you can always find a straight line on the surface passing by it. They go beyond mathematical objects, you can find them frequently in architecture. See my Pinterest board. I find that there is something harmonious and beautiful with ruled surfaces.

An example: hyperboloids

I think the most widespread example are the huge cooling towers of power plants. They are hyperboloids.


Look closer, do you see the lines on this surface? Think about how you could re-create it using strings:


And see this shape in 3d by clicking the image below (which is a reproduction of a sculpture in the city of Munich):

Generating ruled surface with Three.JS

I wrote some code to be able to generate ruled surface based on a set of curves: the code generates lines and triangles between those curves. For example, the previous model is simply generated by joining two circles with lines. To achieve this, I created a new geometry object for the Three.JS library: RuledSurfaceGeometry.js. This allowed me to generate many different shapes and to experiment, just by tweaking some parameters. This led to very interesting results:

Unfortunately, I did not find the time to write an editor to create the base curves, which means that you have to define their parameters manually, which can be quite mind twisting (see this file that contains many hardcoded shapes)

Exploring and sharing on Sketchfab

The code allows to download the surface un an .obj file, but also to directly upload it to Sketchfab, the platform to share 3d files.

Find all my ruled surface models in this Sketchfab folder.

Here are other real buildings that are ruled surfaces (click to see in 3d):

Here are some sculptural explorations(click to see in 3d):


MRI proton spin: 3D animated mathematical curve in the browser using MathBox.js

My partner is defending her thesis today and she needed some help to produce visuals for the presentation. The goal was to illustrate the relaxation of the spin of a proton that received a radio-frequential impulsion in a constant magnetic field, which is the principle at the root of Magnetic Resonance Imagery.

The visualisation needed to be animated and in 3D. I thought it would be a good use case for MathBox.js, a JavaScript library built on top of three.js, which is built on top of WebGL and developed by Steven Wittens.

This library is designed for mathematical visualisations. You focus on curve expressions and not on geometrical primitives, the engine is then evaluating and interpolating them on every frame to draw them. It works in 2D, 3D space and is not restricted to cartesian space.

I created a 3 step animation. MathBox allows you to write an animation script: you define for each step what is added, removed or animated.

You can load it in your browser at this address.
Or simply watch this youtube video:

I am also glad to use this animation to illustrate the Wikipedia article about MRI and MRN.

Using chrome as my code editor
I wanted to experiment with something that I think will happen more and more in the future: This short project was entirely developed inside the browser.

Code in Chrome dev tools

I had to create the local git repository and its submodules, but then I did not use an other editor than the “Source” tab of Chrome’s Dev Tools. This is possible thanks to Chrome’s “Workspaces” that allow it to map the current page source to a specific folder of your computer. It is then possible to edit and save the resources that are usually read-only. This workflow is more streamlined, than the regular workflow of debugging in the Dev Tools, then going back to the editor, find the line to change, save, go back to Chrome and reload. Here, you do not leave the browser’s window and can edit and save the JavaScript file at the same time of debugging.

Of course, this is a different approach than using an online IDE such as cloud9 IDE, that I also appreciate, but both are interesting and we should definitely keep an eye on these new workflows.