Design of Sonic Painter

A few key design points that make Sonic Painter great:

• The key to making it look nice is about having really, really good sound and image integration, so that people really feel that it's interactive.
• And, also mapping information from one domain to another.
• What makes a really visual app is really, really good brushes
• Just because you've got only one input, doesn't mean you should only have those one inputs.
• You can use symmetry to create order out of something that doesn't look that ordered. The more layers of symmetry you add, the more people find it attractive

Basic idea of Sonic Painter:

• Draw shapes on the screen
• They slowly rub each other out
• There are different brushes
• As you make a gesture to draw a shape, it plays back and manipulates a sound.

The interactions in Sonic Painter (SP):
Between you and SP
Between objects in SP themselves

Color Design elements:

• mouse x-position => color red
• mouse y-position => color blue
• distance from some point e.g. center => green
• speed => alpha, lineWidth

Brush Design elements:

• size of circle changes with speed
• brush that generates more than one output 
• Symmetry - eight orders of symmetry!

Sound Design Elements

• contrasting sounds: ambient vs bells
• balance the sound volume player.volume(0.25)
• sound speed
• sound filter ... ambient sound "brighter" or "darker"

Other Design Techniques:

• mapping mouse position to color red 
• constraining variables e.g. lineWidth, constrain()