Use JS when you VJ

A MIDI controller is a device meant to control different functions in an application. Each of the numerous keys, pads or sticks may be in charge of a different element, such as volume or filter. Because yes, a MIDI controller may serve as a sound mixer. But also as a programmers’ tool, if only Ruth John would call herself a programmer. – I build crazy stuff in a browser. – she says when asked to describe herself in one sentence only. We meet during FrontEnd Con in Warsaw where this subtle little Brit becomes a celebrity after her talk on how to become an AV artist with the help of frontend technologies. She creates images that illustrate music using JavaScript, HTMl5 Canvas and the above-mentioned MIDI controller. In case you haven’t seen one, it looks like something between a keyboard from the 80’s (including flashy colours) and an oldschool Mastermind game, but this appearance is the only retro thing about it. It is actually a basic instrument for all the members of LiveJS, a musician and visual artist crew with whom Ruth performs live on JS meet-ups.

How does it work? The MIDI controller is connected to your computer. The animation created in Canvas (the simpliest tool to play with 3D, as she claims) „reacts” in a browser to music registered by the microphone inside the computer. Using the MIDI device, you control the changes of the tempo and adjust the modifications in the animation. Of course, there is no way to do that unless you get familiar with the Web Audio and Web MIDI APIs. – Most programmers don’t really do that if they are not into creating music. That’s because the APIs have so many functions that it’s really hard to master them. If you do, you may as well build your own synthesiser. But if you focus on just some of the functions, you can use it simply to put sounds on your website. – says Ruth. Having music on a website seems to be an old fashioned idea but it makes sense for her if the sound is a well-thought feature and not something that pops up annoyingly whenever the website is opened. So reagge music on a construction company website (an actual example seen by Stefan Baumgartner, another mentor at FrontEnd Con, who recorded a podcast with Ruth while the three of us talked) is a „no” and soft music in the background of a page on ecology may be a valuable part of the users’ experience.

Ruth was no programmer and not a musical person either when it all started. She studied music technology and had the basics of Java in her curriculum. – It made me think that I would never, ever become a programmer. – she laughs. But then she became interested in web design. Working in a big media agency in London, she was living the life of a typical work-hard play-hard twenty-something single girl. Soon she became tired of that. Still interested in web development, but also willing to take a new direction, she got into HTML5 APIs with JS. First they were more of a tool that she used while creating visuals: – I have never divided coding and creativity. I believe that you can apply coding to your artistic activity. – she claims. She started to write online about her new passion and the technologies she was interested in. Tim, the co-founder of LiveJS, read one of her articles about creating visuals in the browser and invited her to create a band together. – Of course, we are not regular DJs. We are all coders, we perform on coders’ meet-ups only and our fans are coders only. And we all go to work on Mondays.– Ruth says. – Tim is responsible for composing music, Sam and Matt are our musicians, Sam is also a visual artist. Martin controls lighting rigs.  I create the video art. Tim does a bit of everything, usually with some crazy hardware.

Live JS full performance at Coldfront 2017 (VEGa, Copenhagen)

In the end she chose to work freelance and she can’t really count her jobs: she does some coding, she devotes Fridays to LiveJS and she also teaches on a three-month programming courses for adults who want to become developers (and she proudly announces that most of them actually got a job in the industry). Her main activity is still web development. Is this the lifestyle for everybody in the branch? – Not really. The truth is you work a lot and you have to learn everyday. You don’t get much time and opportunities to have a regular private life, a partner. But I chose to live like this! I like to join my different passions and I want to be my own boss.


Karolina Wasielewska

Pracuję w radiu i od czasu do czasu w prasie. Lubię: jesień, książki Lema, sporty przeróżne, koty, niespieszne pichcenie w wolne dni, czerwone wino, wesołe miasteczka, historie o superbohaterach, czasami Beastie Boys, a czasami Dianę Krall. Nie lubię: upałów, agresji, gotowania w pośpiechu i wielu innych rzeczy, których nie lubię, więc nie chcę nawet o nich pisać.