A Generative Music Game using Three.js and the Web Audio API

How To Play

In Tonewarp, the goal is to create unique musical compositions by collecting objects with your ship. There are three main object types:

  1. Note Objects (blue): These add musical notes to the song as you collide with them
  2. Chord Objects (orange): These add chords to the song as you collide with them
  3. Tonewarp Objects: These occur only in the last 2 bars of a zone and will change the overall sound of the song

The game is broken up into zones—each zone consists of ten bars of music. As you progress through the game, you will be able to change certain characteristics of the music by collecting Tonewarp objects.

To control the movement of the ship, use the arrow keys on your keyboard. Up and Down keys control the height of the ship. Left and Right keys control the lane.

Press 'Play The Game' to begin. To view additional options click 'Show Options'. To find out more about the game and how it works, check out this blog post.

Play The Game
Show Options

Game Options


This section allows you to choose parameters relating to the musical phrases generated. You can change which composition acts as the 'inspiration' for the game's music, by choosing a different piece from the 'Source File' list: New sequences will be generated from the chosen source file using Markov chains. To change the starting drum pattern, select a different 'Rhythm Type'.


To try out the synth sound, press 'Play Single Note'. Adjust the Pitch slider and Note Duration value to hear different pitches and note lengths.

Play Single Note
Note Duration



Cutoff Frequency
Filter Q

Filter Envelope


Amplitude Envelope

Take the Questionnaire

Game Complete

Final Score: 0