Sometimes I have to put text on a path

Tuesday, May 22, 2012

Spherical harmonics, meshes and some WebGL and JavaScript : toxiclibs.js, Processing.js, Three.js, ThreeNodes.js

1--------Spherical Harmonics Mesh Builder

Spherical Harmonics Mesh Builder is an example of Paul Bourke's "spherical harmonics" function for creating organic meshes. This example shows the use of Toxiclibs.js for creating meshes inside Three.js
(Technology: JavaScript, WebGL, toxiclibs.js, three.js).

Spherical harmonics are the angular portion of a set of solutions to Laplace's equation. Spherical harmonics are important in many theoretical and practical applications, particularly in the computation of atomic orbital electron configurations, representation of gravitational fields, geoids, and the magnetic fields of planetary bodies and stars, and characterization of the cosmic microwave background radiation. In 3D computer graphics, spherical harmonics play a special role in a wide variety of topics including indirect lighting (ambient occlusion, global illumination, precomputed radiance transfer, etc.) and recognition of 3D shapes.
The 19th century development of Fourier series made possible the solution of a wide variety of physical problems in rectangular domains, such as the solution of the heat equation and wave equation. This could be achieved by expansion of functions in series of trigonometric functions. Whereas the trigonometric functions in a Fourier series represent the fundamental modes of vibration in a string, the spherical harmonics represent the fundamental modes of vibration of a sphere in much the same way.
is called a spherical harmonic function of degree ℓ and order m.
For a given value of ℓ, there are 2ℓ+1 independent solutions of this form, one for each integer m with −ℓ ≤ m ≤ ℓ. 

Toxiclibs.js is an open-source computational design library ported to javascript by Kyle Phillips originally written by Karsten Schmidt for Java and Processing. Examples of the original library can be found at

Toxiclibs.js works great with Canvas, with SVG or any ordinary DOM element. with Processing.js, Three.js, or Raphael.js for SVG...

great example with additive waves

JavaScript 3D library
The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides , and WebGL renderers.

Threenodes.js is an attempt to create a dataflow environment in javascript and html5. It's a way to see what is possible to do in the browser. I had a little list of interesting javascript libraries to try but never had the chance to play with them.

The project is still in an experimental state but you can already see a live demo there:
coffeescript, compass and haml
These are languages that compile to javascript, css and html. Their syntax are much shorter than their equivalent and they offer some great features. If you work a lot with js, css or html you should definitely check these.
The project is using webgl to render the scene. Three.js was obviously the 3d engine of choice. It provide many features like shaders, geometries, postprocessing filters and so on. A great project :)
This is a javascript server. It's used to automatically compile the source files and serve them. I could have used some simple bash script to compile the files but found it would be interesting to use this for this "node" based project.
The application was quickly growing and I needed a way to make it more modular. It's still not used at his full potential in threenode.js but already help make the code cleaner. One nice feature is that it's possible to require text files, or in this case little html template files.
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai