To start simple clone the folder and open index.html in a browser (preferably chrome).
Shape Your Music is a web application that explores a new way of composing music by translating geometric space to musical space.
Experiment with different scales, synths, grid, and quantization options. Dynamically “play" your song by moving shapes, adding new ones, and adjusting the perimeters of existing ones. And record your creation at any time as an audio file to a your computer.
The idea is simple: create melodic loops by drawing shapes. The way in which the sound is generated is unique however: When a shape plays, a node travels around the perimeter of the shape and plays a note at each vertex. The note is determined by the angle at that vertex. While the geometric properties of a shape are used to determine the notes in its melody, color is used to represent its instrument/sound. Multiple other factors are controllable as well.
Use the controls at the top of the screen to control playback and mode, as well as canvas and musical properties.
Pressing play starts all shapes at their origin point. Shapes play in the order that they were drawn.
Pressing record allows you to download your project as an audio file. If playback is stopped, recording will begin when you begin playback. If he song is playing, the recording will start instantly. Pressing stop or record will end the recording and show a window where you can listen and download what you just recorded
Draw mode allows you to create shapes. click to place vertices. Click on the origin point to complete a shape. Select your draw color by using the colored box within the draw tool button.
Edit mode allows you to adjust your shapes. Drag vertices to edit the perimeter of your shape. drag the whole shape to move it. Click on a shape to show more detailed options (see shape controls).
When selected, the grid is shown
When selected, all points will snap to the grid when drawn.
When selected, shapes will snap and lock to the same length - so that they will loop at the same time. Shapes can be “halved’ or “doubled” so that they loop half or twice as often. This allows for a defined rhythm.
Change the speed of playback
Select the root note
Select the musical scale
Toggle fullscreen
Clear the canvas
Click on a shape to display a dialogue box that allows you to edit the shape in detail.
A shape’s position on the x axis corresponds to its stereo pan
A shape’s position on the y axis corresponds to its starting note. Higher shapes start on higher notes.
Select the shape's color. The color determines what sound it generates. Control the synth types and tones for each color using the toolbar at the bottom of the screen.
Select to mute the shape. A muted shape generates no sound.
Select to hear only that shape.
Snap the shape perimeter length to the global quantization length.
Manually adjust the starting note of the shape - this value will be overwritten (by the y-axis property) if you move the shape.
Double the perimeter of the shape, preserving angles
Halve the perimeter of the shape, preserving angles
Bring the shape to the front of the canvas
Move the shape to the back of the canvas
Remove the shape
At the bottom of the screen there is a toolbar that displays the different instruments. Each one has a unique color and a synth. Different colors can be assigned to the same synth. Selecting a different synth changes the sound for all shapes of that color. Use the four knobs to adjust the timbre of the sound.