Back

Moon experiment

Experiment animating 3D objects on web with WebGL and Web Audio API for generated sound.

How it works

The moon is a sphere in a 3D scene (three.js) that carries a surface texture and a displacement map, so that craters and ridges catch the light. Behind it a larger sphere with a star texture forms the sky. The light source follows your cursor, or your finger on a touch screen, with a slight delay, which makes the moon move through phases as you move it.

The sound is not a recording. It is generated live in your browser with the Web Audio API: a low triangle-wave pulse, white noise that swells and fades very slowly, and a single sine tone that changes pitch at random. The closer the cursor is to the centre of the screen, the louder it gets. Browsers only allow sound after a click, so nothing plays until you press the button above.

Related experiments: Rainy day and Visualising Digital Dune Winds. More in the archive.