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.

cooling_towers_of_dukovany_nuclear_power_station

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

DSCN2376

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):

Advertisements

Building a portfolio using Polymer

I wanted to give a try to web components, that I think will change the way people create and share UI elements on the web. I chose Polymer, a framework that embraces web components and makes them easy to use. And when I want to get familiar with a new web frontend technology, I just rewrite my personal website with it (last time was Angular).

See it live at steren.fr, get the code on GitHub, and compare it to the previous Angular version.

Polymer contains many things :

Each of these points depends on the points above it. I built the portfolio relying on the Paper elements, and thus, on the full Polymer stack.

Polymer portfolio desktop
My Polymer portfolio on a desktop device

Responsive: The layout of the portfolio is responsive: on mobile, the menu is inside a navigation drawer, on a larger browser, it is displayed on the left. This behaviour came put of the box by using the core-drawer-panel element.

steren.fr on Chrome for Android
The Polymer portfolio on Chrome for Android

UI elements: I used many of the Paper elements to build the parts of the UI: A Navigation drawer, tabs, icons, header… And as in the previous Angular version, the content is a set of cards, except that this time, a card is defined by a custom element, which make the DOM very clean and meaningful. Also each of these card tag is receiving the style from the Material Design card specification.

Data service: A custom element is also used as a data service: it encapsulates fetching the content from a JSON file, using a Polymer helper (the core-ajax). While at first it may sounds strange and unfamiliar to fetch a JSON data resource using only an HTML tag, for simple cases I actually think it is a good idea: It reinforces the declarative way of building a page, by declaring its resources in the HTML, not in JS.

Filtering and sorting: Filtering and sorting of the cards based on their attributes is also done using Polymer’s data binding and filtering, very similar to filters in AngularJS (see the work list component). UI elements for filters were available in the paper elements library and helpers (like core-selector) exists to ease the extraction and binding of their values.

Routing: At the time of writing, Polymer does not provide a routing framework: you cannot bind a state of the URL to a given view state. But because of its design, I could easily combine it with other routing microframework: page.js.

Layout helpers: Centering things has never been that easy with Polymer: the framework is providing CSS layout attributes, that allow you to center something vertically or horizontally by adding just one class.

My first impressions

After building this simple app, what do I think about Polymer? I really believe custom elements are ideal for adding a fully functional and autonomous UI element in an app without worrying about its dependencies or its its compatibility with your code or its API: you simply import the element and use it as any other HTML element. The DOM is the API. This is really great, it’s like if the DOM was designed from the beginning to allow this interoperability of UI elements.

However, I feel that building an app only with Polymer forces you to use custom elements too much. Sometimes, what I needed is not a fully isolated element represented as one tag in my HTML, but just a view, that can easily be styled using the global CSS. Because of this, I’m not sure Polymer is designed or should be used as a full featured client side framework.

I think it is really ideal to share and use custom elements and to add data binding capabilities to webpages. I would probably like it to focus on this role and make sure to be compatible with other popular web front-end framework like Angular, letting them handle the app state and complex controllers and services.

LeCamping Mafia

It has been a 3 years since I took part to the first season of the startup accelerator LeCamping in Paris. The application for the 6th season is starting this week. This creates a large network of “alumni” and a large number of startup created, between us, we call it the Camping Mafia.

Some months ago, we decided to build an alumni website. First goal was to create a summary listing of all the startups, inspired from YC list.

Romain Cochet had initiated a fully working Symfony based website. But I was thinking we could have a simpler solution that would encourage collaboration and not rely on a server-side database and hosting.

Based on the design work from Adrien Dupuy, I created a very simple AngularJS client-side application. This allowed us to easily add new features such as filtering and search.

LeCamping Mafia

The source code is available on GitHub and the website is entirely hosted on GitHub pages. Startups data is stored in a JSON file, which encourage edition and update from anyone through Pull Requests.

Go take a look at lecampingmafia.com.

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.

My Portfolio written with AngularJS

I’ve been working with Backbone.JS for the past two years as front-end JavaScript framework for desktop and mobile web apps. I wanted to try a more structured framework. While I read a lot about Web components, that are for me the future of web programming, I had issues using them in a very simple use case. The Polymer project (based on them) looks interesting, but is still in very early stage. That is how I selected the AngularJS framework.

portfolio made with AngularJS

A refactoring of my simple portfolio at http://steren.fr was a perfect candidate as a simple project to learn this framework. You can check the code on github.

I started with Angular’s great getting started tutorial and was then able to start working using the official Documentation and the rest of the interweb.

The app is very simple :

  • It contains two Views (described in partials), that are using the same Controller
  • The data comes from a JSON file and accessible from a Service.
  • I had to write a custom Filter to filter works based the checked checkboxes.

What is interesting is that I didn’t needed to code any data-binding or manual refresh, Angular is handling this for me since everything is properly wired. For example: clicking on  the sort radio-button changes the ‘sort’ variable that are linked to the works filters.

Read and fork the portfolio code on github.

Sculptfab

This Friday, I joined CédricMarc and the guys from Little Workshop for a quick coding session.
It all started when I noticed a very nice project: SculptGL by Stéphane Ginier. Stéphane created a great 3D scuplting tool that implements some very nice adaptive subdivision and decimation.
Final version of Sculptfab
Final version of Sculptfab
We decided to refine the UI and to add the ability to directly upload to Sketchfab without leaving the tool.
On my part, I created the foundation of a small script that, when inserted, would help an application creator to upload model data to Sketchfab. it displays a model window asking for Sketchfab API key and basic information.
Then, an archive containing the model data is created on the client using JSzip after the model has been transformed to the .obj file format. Screenshot of the current canvas is taken from the client too. and both are submitted to the Sketchfab API.

Try Sculptfab online at http://labs.sketchfab.com/sculptfab/