My Notebook

Random starfield generator for THREE.js

Author
Andreas Rohner
Date

Any kind of 3d space simulation needs a skybox with a starfield as background decoration. At first I wanted to get this right and use a realistic starfield with real stars in their correct positions, but it is really hard to get those for free in high resolutions.

This website has a very good description of the problems associated with star fields and some free sample textures.

Most of the time you get low resolution starfields and you are not allowed to redistribute them. However it is much easier to just generate your own random texture on the fly.

read more...

How to use an object as a key in JavaScript

Author
Andreas Rohner
Date

At first glance it seems perfectly reasonable to use an object as a key in JavaScript, but it doesn't work as you might expect it to. This is a dangerous pitfall, because there are no warnings or error messages and the resulting code seems to work fine. The nasty bugs, introduced by this, surface months later and are very hard to track down. read more...

Some simple animated fractals using HTML5 Canvas

Author
Andreas Rohner
Date

A fractal is a kind of mathematical function that creates infinitely self-similar patterns. In its simplest form a fractal can consist of only a few construction rules that describe how to get from one iteration to the next. Every iteration of these rules reveals finer and finer details until an intricate pattern emerges. In practice we have to stop after a finite number of iterations, but the mathematical fractal space goes on into infinity. read more...

Simple orbital camera controls for THREE.js

Author
Andreas Rohner
Date

This post shows how to implement orbital camera controls with only a few lines of code and without a plugin. This enables the user to move the camera with the mouse along the surface of a sphere, whereby the camera always points to the center. At the center of the sphere there is an object that can be intuitively viewed from every angle. By increasing or decreasing the radius, the camera can zoom in or out. read more...