Beat
by Beat.

My proposed project is called Beat by Beat. I am choosing Pathway A, net-based creative coding. The idea is a small browser instrument that lets a visitor compose a clear drum rhythm and see it become a visual pattern. Instead of following an existing song or trying to hit notes correctly, the visitor chooses where sounds occur in a repeating loop. Each sound also creates a shape. This presentation describes the project I plan to make, rather than a completed musical program.

I have selected three starting references for different reasons. The TR-808 gives me a structural idea: a rhythm can be arranged through sixteen steps. I am borrowing that principle, not recreating its interface or copying its sounds. Chrome Music Lab suggests that a browser can offer a welcoming place to experiment with music. Patatap connects an action with both sound and animation. I want to combine these ideas: an accessible rhythm grid with a direct visual response. My difference is that the pattern repeats, so visitors can hear and see how a small change affects the whole composition. These references are starting points for further testing, not evidence that my own system already works.

My starting point is an interest in music, rhythm and the relationship between drum beats and visual effects. I want the visitor to create music through their own choices, rather than just play a song and watch an animation. I am new to programming, so the project needs a clear and limited structure. The grid makes that limitation useful: there are only a few sounds and positions, but they can produce different combinations. I want to explore whether repetition and small changes can become a form of personal expression. This is my current motivation, which I expect to refine through making.

The first version will have three rows: kick, snare and hi-hat. Each row has sixteen positions in a repeating bar. The visitor clicks a position to turn it on or off, then starts the loop. A moving indicator shows which step is playing. The illustration here is only a concept sketch, not a working prototype. When a kick actually sounds, it creates an expanding ring. A snare creates a short line, and a hi-hat creates small points. These shapes fade slowly enough to leave a temporary trace, so the rhythm creates a composition over time. Editing a step changes both the sound and the image. The artistic intention is to make the structure of rhythm visible and changeable. It is not a game with scores or a correct answer. The first version stays at one tempo and uses restrained movement rather than full-screen flashing.

I plan to use p5.js for the interface and drawing, with p5.sound and Web Audio for playback and timing. I will start with one sound and one reliable loop. Audio needs its own clock; I should not assume that drawing frames will keep accurate musical time. Next, I will add the three editable rows and basic controls. Only then will I connect the sounds to the visual traces. I will use self-made or clearly licensed sounds and document their sources. My tests will include changing steps while the loop runs, clearing everything, pausing and restarting, and checking whether the image follows the sound. I will also ask a peer to try it and test another browser. The first milestone is a stable loop, not a feature-rich music app.

AI will support my learning, but it will not be the composer or the artistic decision-maker. I will ask it to explain the pattern data, generate small functions and help investigate bugs. I need to be able to explain how a clicked cell changes the pattern, how the loop decides which sound to play, and how that event creates a visual trace. I will keep a record of suggestions I accept or reject, failed attempts and the tests I run. My main emerging question is how a limited grid can support personal expression without making every composition feel the same. I would like feedback on whether the visual mappings clarify the rhythm or distract from listening. My next action is to test a single drum loop.