Inspired by the late night study sessions to lofi hip hop that every student has done at some point. In particular, two albums by Potsu: Just Friends and Ivy League.

What it does

Generates 32 bar songs with continuously changing instrumentation.

How I built it

The chord progressions are built on variations of the common jazz progressions 1-6-2-5 and 2-5-1-6 in a 32 bar form (AABA or ABAC) using secondary/tritone/other chord substitutions to add some non-diatonic spice.

The bassline is built on the root, fifth, and leading tone for each chord using seed patterns I came up with on my bass guitar. It is played by a sine wave synth with added saturation.

The chord voicings are built using my implementation of the 3-note shell voicing technique. They are played on a piano/guitar sampler with added effects.

The melody follows the form of the chord progression. It is built by encoding/decoding a VAE sampled melody to the chord progression in 2 measure segments. The resulting melody is aligned to the most commonly associated scale with each chord.

The drum patterns are generated by encoding/decoding a hip hop pattern I made.

The instruments and patterns are scheduled by Tonejs events, which are managed by controllers for each part and a master controller which interacts with the React app. All the audio is routed to the master output and the audio spectrum visualizer, which uses Tone.FFT and React.

Challenges I ran into

I had a hard time figuring out how to incorporate non-diatonic notes into the music because I was not satisfied with how flat purely diatonic music sounds. I went through many ways to generate chord progressions, including graphs and simple markov chains, over the course of about a week. However, I felt those methods didn’t create a sense of direction and never resolved predictably. In the end, I settled on common jazz turnarounds that I knew would sound nice, and I added variation by using chord substitution.

Originally I planned to include genres outside of hip hop as well. However, implementing generation methods for different comping, bassline, and drum groove was overwhelmingly complex, and researching took more time than programming. As it turns out, music sounds interesting when it breaks established patterns. After several days of minimal progress, I took a few days of break and decided to stick to the most iconic subgenre of lofi, which is lofi hip hop.

I also had plans to do effect automation like what is possible in most DAWs but couldn’t come up with something that sounded pleasing to the ear. Mixing audio is something I have never been comfortable with when producing music, but I tried my best to balance out all the parts with filters and EQ. In particular, reducing the ringing on lower piano pitches was extremely problematic, but I solved it by reducing frequencies around 200-700 Hz.

Lofi music has a very chill vibe that I wanted my art to convey. However, nothing I produced with my drawing tablet and p5js really meshed well. Instead, I decided to go for a simple purple gradient behind my visualizer. The purple gradient rectangle is supposed to represent the sky seen through a window in a typical “lofi aesthetic” bedroom.

Ultimately, the product is something that I am satisfied with, enjoy listening to, and looking at.

Accomplishments that I'm proud of

This is the second hackathon I have ever participated in and the first hackathon that I submitted my project.

What I learned

I learned that I should set reasonable expectations for myself and be proud of what I ultimately create. Furthermore, I reinforced my existing music theory knowledge and coding/design skills by finding patterns or generalizations in the way musical genres are produced or performed. It was a great learning experience applying machine learning to a field where optimal results are subjective, and it is topic that I am continuing to learn about.

What's next for Lofi Generator

I would definitely love to expand on this project in the future by implementing different genres of music and by adding artwork that enhances the “lofi aesthetic”.

Built With

  • magenta
  • magenta/music
  • react
  • sharp11
  • sharp11js
  • tonal
  • tonaljs
  • tone
  • tonejs
Share this project: