Super BeatBox Machine

In a world where music serves as the bridge to the soul's deepest expression, sound and graphical interface unite to create a symphony of endless sensory experiences — Super BeatBox Machine.

The Super BeatBox Machine is a client-server application that provides an innovative chat system. It allows users to send musical patterns over the network to others connected to the server. Additionally, users can save a musical pattern to disk, with the option to reload, modify, and resend it via chat at a later time.

The Super BeatBox Machine is a programming challenge that does not use an IDE — it was built in Notepad++ and compiled in the command prompt. The project utilizes a complex set of technologies that are difficult to understand and master, including: Java Swing Library, GridLayout, GridBagLayout, JFrame, JPanel, PlainDocument, File, JFileChooser, Java Sound API, Sequencer, MidiEvent, Object Serialization to Disk, Object Serialization over the Network, Socket, ServerSocket, Multithreading, Inner Class, and Key Mapping.

Developed between February 2018 and March 2020, it took a total of two years and one month of hard work.

Project Conception

The Super BeatBox Machine was inspired by one of the greatest classics in Java literature: Head First Java by Kathy Sierra and Bert Bates. In the book, the authors cover everything from the basic principles of the programming language to more complex topics such as Object-Oriented Programming, Graphical User Interface, Serialization, Network Connections, Concurrency, Collections, Generics, RMI for Distributed Computing, and more. The work stands out for its unique teaching approach — always presenting topics with humor and irreverence.

One of the most interesting topics covered in the book is, without a doubt, the manipulation of MIDI (Musical Instrument Digital Interface) events. This allows Java code to record and play any sound from any musical instrument — as long as the channel code, instrument code, and note number are known.

As the book progresses, the authors guide readers, step by step, through building an application that utilizes MIDI events to play a musical pattern, made with percussion beats. The project, titled Cyber BeatBox, also allows users to save their created patterns to disk and send them over a network to a server. For readers who choose not to follow the book sequentially, Chapter 19 (Appendix A) includes the complete application code.

Over the two years I studied the book, I went through all the chapters and gradually added new features to the project (Cyber BeatBox), transforming it into the Super BeatBox Machine.

Project Transformations

Cyber BeatBox - Original Project from the Book

1. JFrame (2 modifications)
   • The application window (JFrame) now utilizes a content panel (JPanel) with a GridBagLayout manager. As a result, the internal window elements (Label, JCheckBox, JTextField, JList) no longer resize when the window is maximized — preserving the application's screen layout.

   The original project uses a JPanel with a BorderLayout manager. Consequently, the internal elements resize when the application window is maximized, distorting the screen layout.

   • The title bar of the application window now displays the user's full name and the connection status, which can alternate between "Connected to Server" and "Playing Alone".
2. Beat Selection Panel (1 modification)
   • The Beat Selection Panel now displays guide columns (in a darker gray color) that enhance the application's aesthetic appeal and allow users to quickly and intuitively identify the position of each column in the panel.
3. Instrument Name Panel (6 modifications)
   • The musical instrument names are now numbered.
   • The added numbering is elegantly aligned to the right.
   • When hovering the mouse pointer over a label:
     • The musical instrument's name turns bold blue.
     • The musical instrument's name and image are displayed in the Dynamic Instrument Draw Panel (D).
     • A beat from the selected musical instrument is played so the user can hear it.
   • Additionally, the order of the musical instruments has been changed. The new arrangement displays drum kit instruments in sequence, ordered from left to right.
4. Dynamic Instrument Draw Panel (present only in the transformed project)
   • Displays the image and name of the musical instrument corresponding to the active label — the active label is understood as the instrument name that turns bold blue when the mouse pointer hovers over it.
5. Static Instrument Draw Panel (present only in the transformed project)
   • Displays an image of the set of numbered musical instruments — a very helpful reference for identifying the drum kit instruments' position.
6. speedTextField (present only in the transformed project)
   • Allows users to adjust the playback speed. To change the speed, simply click on the text box, enter the new value, and press ENTER — the playback speed is updated instantly.

   If the user wishes to input a decimal value, both a period or a comma can be used as a separator — 1.5 or 1,5 work the same way.

7. Clear Button (present only in the transformed project)
   • Clears the checkboxes in the Beat Selection Panel and stops any currently playing pattern. This is particularly useful when a pattern is playing, and the user wants to erase it to create a new one.
8. Save/Restore (1 modification)
   • The process for saving and restoring a beat pattern has been modified. Now, when clicking the Save and Restore buttons, the Save and Open dialog boxes default to the "saved-beats" folder. However, if the user selects a different folder, it automatically becomes the new default folder.In practice, this means that to save a set of patterns in a custom folder, the user only needs to specify the folder path once.

   In the original project, the default folder is always "Documents". This means that to save 10 patterns in a folder of their choice, the user must specify the folder path 10 times.

9. [btd] (present only in the transformed project)
   • Messages received via chat, that include an embedded beat pattern, now display the expression [btd] in pink.
   • Messages received via chat, without an embedded beat pattern, now display the expression [btd] in gray.
10. Date and Time (present only in the transformed project)
    • Messages received via chat now display the local date and time.
11. Playing a beat pattern received via chat (1 modification)
    • Clicking on a received message automatically plays the embedded beat pattern. Clicking again stops the playback.

    In the original project, the only way to stop playback is by using the Stop button.

12. Delete Button (present only in the transformed project)
    • Allows the user to delete a received message.
13. outputMessageTextField (2 modifications)
    • Limits the number of characters so that the size of the sent message does not exceed the width of the JList displaying the received messages.

    In the original project, when a received message exceeds the width of the JList, a horizontal scroll bar is added, compromising the application's aesthetics — unlike JTextArea, JList does not support line breaks.

    • Allows the message to be sent by pressing ENTER — in the original project, the message could only be sent through the Send button.

The transformed version of the project also offers a start screen that allows the user to enter their username and the server's IP address — in the original project, these details had to be entered manually into the operating system's command prompt when launching the application.

The server side of the application has also undergone significant changes. The Super BeatBox Machine Music Server now features the Intuitive Console — a graphical log window (JFrame) that allows you to categorize server console messages by color, making analysis much easier.

Messages related to the server status are printed in black; messages related to connected users are printed in pink; messages related to operations are printed in green; messages related to disconnected users are printed in gray.

And last but not least, the cherry on top. The transformed project provides executable startup files (.jar) for both the client and server sides of the application — a real treat!

In the original project, the application is launched via command-line interface (in the operating system's console window) — efficient, but not very user-friendly.