Concept
The project is fundamentally based on the connection between musical composition and natural form. The piano allows for the construction of melody and harmony. The wood creates a changing sonic environment: its branches become resonators that respond to impacts, noise, and rain.
Two Voices
First Voice — PianoA soft, synthesized timbre for melody and manual playing. In the music editor, you can change the pitch, position, duration, and volume of the notes. In the «Harmony» tab, you select the chord for each measure.Second Voice — TreeA resonant instrument linked to branching geometry. The segment sizes determine the pitch, volume, and decay. On the tree, you can play with clicks, via the keyboard, or through a recorded score.
Style
The visual identity of the tool is associated with the forest, twilight, and soft light. The dark green background unifies the workspace. Light-colored labels and calm color accents help differentiate voices and control elements.
Tool Structure
— The composition model stores notes, chords, tempo, and loop duration. — The editor allows modifications to parts and controls playback. — The tree generator creates geometry and calculates resonator parameters. — The sound engine synthesizes instruments and processes voices in separate chains.
Interface Organization
The screen is divided into two panels by voice. On the left: piano, «Notes» and «Harmony» tabs, a part editor, and a keyboard for manual playing. On the right: a tree, its musical score, and sound settings. Above the panels is global transport: play, stop, loop repeat, tempo, metronome, and volume. The tree settings are grouped into four categories: «Form,» «Tone and Resonance,» «Air and Noise,» and «Rain and Output.»
Components and Naming
Interface element names describe the action or purpose: «Play, ” „Mute, ” „Regrow.“ The code uses the same logic.
General CSS classes establish a unified appearance for panels, tabs, and buttons. Function names reflect the action: addNote, updateNote, renderForest. The createVoiceChannel function establishes a separate voice processing pipeline.
Design Prompt
Create a web synthesizer featuring a piano and an interactive forest where the trees emit sounds. The concept is «thought as melody,» meandering through a forest that we design ourselves. Include functionality to play, compose melodies, and alter the forest’s ambience. Place the interface within a single window, using dark, natural tones.
