Joy Phases 1.0 is out!

Here comes the final product! With a bunch of new features for the occasion.

Features

• Two new instruments: square wave and exponential wave
• Instruments buttons have now icons
• The number of measures in a section can now be edited
• User is warned that changing the signature will clear the melody

Fixes

• Using arrows in the sequencer won't scroll the page
• Icons use the correct aria-labelledby attribute

And there it is. The game is finished just for Christmas, that's perfect.

Now about this update, I must confess, I cut some corners a bit. For example, the warning about editing the signature was supposed to be displayed in a modal, but eventually it was more simple to just write it below the field's label. Same reasoning for the section's length edition: why creating a complex number input when two buttons to increment and decrement work just as well? The truth is, I'm at the phase of development where I mostly want to get over with the project and move on something new. Not that I'm bored by it, but my motivation is definitely on a downward slope. So I use tiny, easy and efficient solutions.

Also, do you want a fun fact? The “Square wave” instrument, which is home-made, is actually based on a triangle wave… Yes, the UI is lying! The reason? Well, initially I wanted to add a triangle wave and a square wave. Instead of creating them directly in the browser, I prepared samples in a DAW to ensure that the sounds will be consistent between browsers, and pleasant to hear. So I first prepared a nice triangle wave with a low-bass filter… And when it comes to creating the square wave, it turned out that the two were actually pretty similar! With the high frequencies removed, the difference between triangle and square is actually pretty subtle (although not difficult to notice if you are used to work with them). So instead of a square wave, I did an exponential one, a bit more “fun”. But then here is the real issue: how do I design a clear icon for the triangle wave? That might sound silly, but just having a triangle, next to the two other instruments, was pretty confusing. Since the piano and xylophone icons are figurative, the triangle looked like some kind of mountain, or pen, or… A triangle. And what if I tried to draw two triangles, or a part of a wave? Nope, still not clear. And the exponential icon wasn't easy to understand either! So I decided to cheat: since the square wave symbol is more recognizable, and helps to introduce other kind of waves… I might as well just use it! After all, it's technically an “instrument that sounds like a square wave”, no?… Okay, that's not a good, excuse, but it makes the UI easy to understand to everyone! So I sacrificed the scientific rigor in favor of a clear UI. What would be game development if we couldn't do some crimes now and then?

There's also a saw-tooth wave mixed with the exponential one anyway, so…

Anyway, it's time for a conclusion. This toy was mostly a technical challenge. I wanted to write a sequencer, to better know the Web Audio API and ToneJS, and practice some VueJS. as well. The goal was also to write a fully accessible tool, and I'm quite proud with what I've achieved. I've learned a lot in several domains, and as a web developer, this has really taught me a lot. (and it will be a very nice thing to put in my portfolio)

As a musician, now… That's when the journey begins actually! I built this tool because I was myself curious to hear what a phasing sequencer could create. So now it's time for me to use it! I've already quickly tried to compose some songs, the results are pretty nice… We'll see if I achieve to obtain something cool. I might try to export some songs in MIDI to write full original songs. Another idea I had was to use each section of a phasing song to create a new little tune. Maybe I could make a game around this idea, with each level corresponding to one phase? There's a lot to explore.

But mostly I hope that this tool will be inspiring for other people, whether they are musicians or not. I still find it a bit fun to select random notes, random scales, and just see how it evolves. Well, after having tested it a thousand of times during development, I must admit I grew a bit tired of it… But it's still pleasant. And maybe some will want to explore as well this kind of music? Or just find fun combinations, that's awesome too.

Anyway, as said above, I also want to move on to something else. This year, as eventful it has been for me (new job, new home, new cat…), has been an occasion for me to really explore the Web Audio API. On top of Joy Phases, I've built a musical story with Wine, a shooter with procedural music in Phaser, a music tool for JS and another musical web game for both the GMTK Jam and the Music Game Jam! Truly, I like making music with programs. And there is even more I want to do! Honestly, I haven't scratched the surface of what can be done in music programming. Procedural composition, playable synth, spatial sounds… I have still a lot to learn.

But most of all, I think I should try new things. Making abstract music toys is nice, but I miss telling stories, or making more figurative games. Lost Cartridge, a little game I made for a game jam this summer, was a bowl of fresh air in that regard! It was truly different from all my other works, being purely narrative, while still having a little focus on music. I want to make more games of that kind. And… I actually plan to work on some walking simulators! Because walk sims are just great. Yes, 3D, I'm coming back at you! That will also be the occasion to learn Godot, a thing I wanted to do a while ago. Actually, moving away from the web might allow me to experiment more with music.

So, that's for the future! I hope you enjoyed this devlog, and will have fun with Joy Phases. I wish you all to have a great holiday season, and I'll see you next year!