NotesLearn

I recently bought an alto saxophone. It was quite a while I haven’t seriously been playing an instrument, so I came across a little challenge when it was time to read a music sheet. You know, that thing with a pentagram and some notes of various shapes drawn over it.

Since playing a note on the saxophone is not straightforward as it would be on a piano, I actually had two separate challenges: the first was to recognize a note on the pentagram, the second was to play it well (it means play the correct note steadly for some seconds – and in tune).

So I decided to code a little app to aid me doing so. The app is pretty simple: it shows a (random) note on the pentagram, and then listens to the microphone waiting for a note, identifying the pitch and, after some seconds of playing, says if the played note was correct or not. This app has proven quite useful in the process of improving my reading accuracy and speed, and I guess it might be useful to someone else too.

It’s published here: https://dmnk.cloud/noteslearn.

Technical infos

On the technical side, it is entirely coded using Javascript, and has been a cool challenge to code since it was the first time for me interacting with the microphone data on a web app. It uses some advanced Audio features of HTML5, based on the AudioContext component. Recognizing the pitch was a minor issue, obtained by playing a bit with the FFT of the signal, some other challenges included volume thresholding and octave recognition (less trivial).

In the end, the result is pretty usable for my alto sax, even though it may be less accurate if used with other instruments I didn’t test. The piano version is not perfect, for some notes it needs to repeatedly play the key to make the app recognize it. I guess it should work best with constant-volume-notes kind of instruments, like violin or flute, but as I said it was only fully tested with my alto sax.

KangaMex

Hello everyone! It’s been a while since I last wrote a piece on this blog, since that a lot of things changed, but I still want to share some of my experiences with the world.

I’ll be making some brief posts to track some projects I’ve been working to in these almost 2 years of absence.

This post is about KangaMex, a messaging platform which idea is really simple, yet I didn’t find something like it when I needed it. The app is a delayed messaging service, or a service to send messages which will be delivered only at a specified date and time in the future. You write your message, set the unlock date and time, the recipient’s username, and send it. The recipient will be notified that he/she has an upcoming message, but will not be able to see it until the unlock time has come. Very simple, nice way to send delayed messages.

The app is at mex.kanga.life.

Who wants to be millionaire?

You probably know the tv show “Who wants to be a millionaire”. Lately I’ve been invited at the graduation party of a friend, and thought about creating a game for it.

So I decided to create a HTML5 simulation of WWTBAB, complete with webcam support, sounds and introduction video. It has been quite fun, and I’ve been releasing the code on github.

Questions are hardcoded in the index.html file, but it’s trivial to modify them. Recently I’ve added support for images in questions.

I really don’t know if someone can actually make use of it, but who knows?

Just a quick overview about the keys used to control the simulation:

  • [Left arrow] – to skip to next step (video is not skippable by now)
  • [Down arrow] – to unveil the next answer
  • [A,B,C,D] – to highlight the selected answer
  • [Y,N] – when an answer is highlighted, Y makes it correct, N makes it wrong
  • [F] – to switch between the default background or the webcam image
  • [P] – to flash the background to induce some suspance

Github.

Example-link.

A try for a 3D game

Recently I’ve been experimenting a lot with 3D in the browser with Three.js, and although this is my first post about it, there’s a lot more I’m working on about 3D in JS, but it’s involved in my professional work and it’s not time to publish it yet.

Anyway, as usual I like to keep track of my projects here, so I link to this simple game I developed as a joke for a friend some days ago. The game is here, descriptions are in italian but if you don’t understand just click and everything will be fine.

3D website experiment

Greatly inspired by this article, it came to my mind that would be cool making some website which could be explored like the real world, rather than just consulted or read.

I picked the original code from the article, which already let you build a simple 3D world which could be navigated in first person, and modified it to have customizable blocks, with action, photos and mouse to control the view, enriching the experience.

Actually, then I spent a lot of time developing what would be the map editor, which has been really useful when designing my own map/world.

A first experiment that I have made is here.

I also uploaded the editor so that people can design and try their own world.

Everything will be saved locally to the localstorage of the browser, so for now, you can’t share the world you have created. Anyway, I’m planning to offer the possibility to create and share your own world, but it will take some effort so I will do it later.

The thing should work fine with chrome and firefox.

Collecting Robots

Collecting Robots is a little project I have made as a project for a university course of Operating System for Robotics. The goal is to plan a strategy for some “robots” to collect some “objects” and taking them to some “collect points”. The robots also have a maximum capacity, i.e. they can take a maximum number of objects at once, so to go on they will need to take the objects to a collect point.

The problem is quite hard (I believe it is NP-hard) so my first thought was to use an heuristic approach. I implemented a genetic solution using the JSGenetic library I wrote some time ago.

Actually there’s a little problem with my implementation: the crossover operation is quite weak. It does not combine the two parent individual in a complete way, thus the generated children is often very similar to the parents. This moves the evolution capability towards the mutation process, which is much more random, and this means the evolution will lead more likely to a local optima. This is especially evident with large problems (many objects) when object positions are not uniformely distributed in the map.

The app is publicly available here.

Browser compatibility:

  • [Google Chrome/Chromium] OK
  • [Firefox] Some problems, “go” and “animate” button works but label doesn’t refresh (isn’t .innerText standard?), simulation is slower
  • [IE] Not tested
  • [Safari] Not tested

Some notes on usage of the app:

Map generation

You may use the randomly generated map which is presented on startup, generate a new one with the “randomize” button, or generate your own map.

To generate your map, just press “clear” to clear current map, then select the proper point you want to place on the dropdown list, and place it clicking on the map.

If you want to change the number of points used by the randomize option, you can place the point manually on the map, in the number and type you want them to be, and then pressing “randomize” will make a new random map with the number and type of points you placed.

Evolution of the solution

When the map is ready, you can press “init Evolver” to initialize the Evolver object, which is responsible for managing the evolution process.

Then, pressing “go” will start the evolution, showing the best solution found in the left canvas.

When you’re happy with the shown solution, press “stop”.

Simulation

Beware that you need to stop the evolution to run the simulation. Doing otherwise will lead to unknown results :P

When you have a solution (you need to at least have initialized the Evolver), you can see the robots in action in the right canvas by pressing “animate”, which will start the simulation with the current solution.