Experimenting with Web Audio

Hi, it’s me again with another experiment.
This time the experiment is about audio tools on the web, it has few real time audio visualizations; scope, spectrogram, spectrum, it also contains MIDI monitor tool, suitable for inspecting MIDI messages (works only on Chrome and Opera atm), Tap tempo, and a Signal Generator.
This experiment was on hiatus for a long time, since I had plans to add few more features to it and polish the existing stuff. However other projects have come a long, so I thought I might as well share this as it is now, even though it is slightly buggy (not optimized, cross browser support is lacking, responsive design is missing.).

audio-toolbox spectrogram visualizing Bremer/McCoy Hojt At Flyve

The experiment was done using Vue.js, vuex & vue-router, for the curious the source can be read here.

Check audio-toolbox out!

Vue’s reactivity through example

We wanted to create a landing page for our association; kolmekolmesata, so I created one: kolmekolmesata.com/.
You might like the site if you enjoy seeing bunch of SVG polygons appear and disappear over and over again, but you might not like it if you’re after information about our association, well you can’t please them all. In this brief post I’ll explain what I learned during the process.

The site was created with vue.js, and in this post I’ll briefly explain how the Vue’s reactivity system makes it so easy to declare a view like this:


and as a result see something like this:

How it works; so the template above declaratively defines the entire view. The value isToggled returns for each coordinate varies over time. So one might wonder how does Vue track the properties used in .isToggled()?

Well Vue’s documentation does no exceptions here, it is very good also on this subject matter.
The gist is that during the initializing of your component, Vue walks through your data object and defines getters and setters for each property.
Each component has a watcher, the watcher defines whether a property’s getter has been run during the execution of the template (or render method), if so the property is marked as “touched”. The watcher is also used when a setter is called for the touched property, the watcher then re-trigger the rendering of the component.

So in our case on the first render Vue notices that rendering these cubes uses a distanceToSweetSpot property, as every cube’s coordinate is compared to it.
In our app this distance is changed simply by assigning a new value to it every interval. Vue has defined the setter for the distanceToSweetSpot property with Object.defineProperty, the setter is executed every interval. When executing the setter it notifies the watcher that we’d want to re-trigger the templating function.

If you’re interested on the details of the site, feel free to read the source from the repository in github

CLR CTRL Experiment

This weekend I experimented with an interesting JS framework called Cycle.js, out of this experimenting I created a simple “app” for controlling color.

Of course for an app like this one could easily get away without framework’s, but it wasn’t the point of this, and we’re in Javascript-land where the use of frameworks can easily be justified.

Really enjoyed Cycle.js’ functional reactive style, and will probably be using it in the future.

If you want to turn your device’s screen to specific color, this is the app for you.
Go try it out.

Doing Things “For The Fun Of It”

A few days ago I watched an interesting documentary: The Fantastic Mr Feynman of The Late Great Richard Feynman.

What fascinated me was, how after being dispirited, he insisted on doing things For The Fun Of It (See the clip below).

There’s also a longer quote from “Surely you’re joking, Mr. Feynman” where he talks about his motivation on his career after participating in the development of the nuclear weapon in Los Alamos.

Then I had another thought: Physics disgusts me a little bit now, but I used to enjoy doing physics. Why did I enjoy it? I used to play with it. I used to do whatever I felt like doing – it didn’t have to do with whether it was important for the development of nuclear physics, but whether it was interesting and amusing for me to play with. When I was in high school, I’d see water running out of a faucet growing narrower, and wonder if I could figure out what determines that curve. I found it was rather easy to do. I didn’t have to do it; it wasn’t important for the future of science; somebody else had already done it. That didn’t make any difference. I’d invent things and play with things for my own entertainment.
So I got this new attitude. Now that I am burned out and I’ll never accomplish anything, I’ve got this nice position at the university teaching classes which I rather enjoy, and just like I read the Arabian Nights for pleasure, I’m going to play with physics, whenever I want to, without worrying about any importance whatsoever.

Within a week I was in the cafeteria and some guy, fooling around, throws a plate in the air. As the plate went up in the air I saw it wobble, and I noticed the red medallion of Cornell on the plate going around. It was pretty obvious to me that the medallion went around faster than the wobbling.

I had nothing to do, so I start to figure out the motion of the rotating plate. I discover that when the angle is very slight, the medallion rotates twice as fast as the wobble rate – two to one [Note: Feynman mis-remembers here–the factor of 2 is the other way]. It came out of a complicated equation! Then I thought, “Is there some way I can see in a more fundamental way, by looking at the forces or the dynamics, why it’s two to one?”

I don’t remember how I did it, but I ultimately worked out what the motion of the mass particles is, and how all the accelerations balance to make it come out two to one.

I still remember going to Hans Bethe and saying, “Hey, Hans! I noticed something interesting. Here the plate goes around so, and the reason it’s two to one is …” and I showed him the accelerations.

He says, “Feynman, that’s pretty interesting, but what’s the importance of it? Why are you doing it?”

“Hah!” I say. “There’s no importance whatsoever. I’m just doing it for the fun of it.” His reaction didn’t discourage me; I had made up my mind I was going to enjoy physics and do whatever I liked.

I went on to work out equations of wobbles. Then I thought about how electron orbits start to move in relativity. Then there’s the Dirac Equation in electrodynamics. And then quantum electrodynamics. And before I knew it (it was a very short time) I was “playing” – working, really – with the same old problem that I loved so much, that I had stopped working on when I went to Los Alamos: my thesis-type problems; all those old-fashioned, wonderful things.

It was effortless. It was easy to play with these things. It was like uncorking a bottle: Everything flowed out effortlessly. I almost tried to resist it! There was no importance to what I was doing, but ultimately there was. The diagrams and the whole business that I got the Nobel Prize for came from that piddling around with the wobbling plate.

Doing things For The Fun Of It may not win you a Nobel prize, but there’s no reason to be disheartened by that. As Feynman mentioned in the documentary, those kind of prices are not “real” things and so they’re not a great motivation for doing anything. The real reward is being able to do the thing in the first place and finding pleasure in doing it (btw. I also highly recommend watching The Pleasure Of Finding Things Out.

These ideas resonated with me, as I realized that quite similar behaviour has pretty much gotten me to this point. In my childhood, I stopped playing Hockey when it no longer was fun. My decision to quit Hockey, was influenced by me trying Snowboarding and enjoying it really much. For me snowboarding was (and still is) purely done for the fun of it, it’s great to be able to hang out with friends and ride the wave 🌊.
Similarly I started making music because I managed to get my hands on Propellerhead’s Reason 2.0, and found it quite fun to experiment with sound (haven’t looked back, even though the tools have changed multiple times).
I could imagine someone criticizing this approach for it’s lack of ambition, but to me doing things to achieve something feels quite unnatural. And I have realized that ambition could help one’s motivation to finalize something, but maybe it’s better to replace that required push by investing in yourself and strengthening your character, instead of motivating yourself by thinking about prices/money/fame.

As I see it there are immediate benefits for doing things you enjoy, ie. you won’t be miserable while “working” on it (unless being miserable is your thing). You might also learn something about yourself, as you’ll be reacting to the notion “What are things you do just For The Fun Of It?”.