FPGA MIDI Synth update: MIDI improvements, Polyphony, PWM etc

Since school has ended, I’ve played with our yearproject some more to make it more awesome and usable. Here’s an update of what fun stuff I’ve been doing to it. I’ve purchased my own Digilent Nexys2 board, so I can keep working on this and future FPGA projects now I’ve returned my ex-classmate’s board.

MIDI improvements

The most important problem we had was that MIDI interpretation was terrible. Sure, it worked, but once you’d start playing faster than 115BPM, notes would randomly be missed. At school, we had actually spent weeks trying to figure out where in the code of the UART or MIDI interpretation we did something wrong.

During my later fiddling, I found out that the reason for this was that there were a couple of elements in the FPGA design that weren’t triggered on the rising edge on the clock, but rather on the rising edge of some combinatorial signal. This caused all kinda of synchronisation errors, and thus the quite timing-sensitive MIDI interpretation. The issue was resolved easily by adding a clock input to the elements that were without, and altering the code to something like this:

if(rising_edge(clk) and combinatorial_signal = '1') then
-- statements to be executed
end if;

Testing that change made it all work pretty much perfectly. From what I could hear, it played 16th arpeggios at 999BPM without any problem.

After that, I tweaked the design a little more in order to make it play different waveforms when different MIDI channels were being used. With that properly implemented, I could fake polyphony by rapidly switching channels. Here’s a video that demonstrates it. The LEDs lighting up indicate which channel (and thus waveform) is currently being used.

Yearproject: FPGA MIDI synth

Over the past two years, I’ve completed a bachelor course in electronics. In the second and thus final year, we were assigned to come up with a project to complete over the year. My classmate Raf and I are both interested in music production, so we decided it would be a fun idea to create our very own synthesizer.

We actually made the decision to make a synthesizer in our first year, so we certainly would have enough time to work it all out properly. In this first year, we were introduced to the FPGA, which can briefly be described as a digital playground that allows you to build just about any digital circuit on it. (To give an idea: You could actually design a micro-controller on the thing if you’d want to).

Our interest for the FPGA sparked, we decided to use that to build the synthesizer around. Thus the decision was made to go digital. Anyway, I could go on for a while on the why and when, but let’s take a look at how this stuff works first.

MySQL: find number of matches in another table

The problem of finding the amount of matches in another table is one that had me stumped for a while, but after googling a while, looking through concepts that were new to me, I figured it out. Since it may be a fairly common problem, I thought I’d share my solution here.

Use cases

I used this technique to find the amount of posts a user has on a forum, in a situation where I have a users table, and a forum table. Other possibilities could be amount of sales for a certain item in a webshop, where the items are in a table, and the sales in another. I’ll use the users / posts example to show the query.

Users table

Forum table

The query

SELECT
  users.user_id,
  users.username,
  COALESCE(pc.postcount, 0) AS postcount
FROM
  users
  LEFT JOIN
  (
    SELECT
      forum.user_id,
      COUNT(forum.post_id) AS postcount
    FROM forum
    WHERE 1
    GROUP BY forum.user_id
  ) pc ON pc.user_id=users.user_id
WHERE 1

Minecraft design tool

TL;DR: I made this thing: Minecraft design tool

My girlfriend bought me the ever-so-popular indie game ‘Minecraft’ for my birthday, even though I kept saying I would never play it. I tend to get obsessive over certain thing; mostly things that involve creating, building, which is all Minecraft is about. After having seen her play it for quite a while however, I decided to give it a go anyway, as it looked like far too much fun to be left alone. As expected, I did start to obsess over it, once I got everything down properly (which was rather soon since the game is really easy to play).

Since Minecraft also has a multiplayer mode, my girlfriend and I were soon playing together in our own virtual world. After a while we started building things together, which was and still is endless fun. However, when you just explain your idea of what you want to build, there sometimes is a bit of miscommunication, and one or the other starts building things in a way that wasn’t intended, because they misunderstood. Needless to say, this happened a couple of times, with mutual frustration as a result.

A simple drawing on a grid can greatly help explain what you mean, I thought; thus, I got to work. I decided to quickly throw together a tool that lets you draw things in 2D, with Minecraft material sprites. I built it with the tools I’m most experienced with; namely HTML, CSS and JavaScript.

The tool simply uses a table as its grid. I realize that a drawing isn’t quite tabular data, but it seemed the best way to go for it. Since I used HTML5 to make it, I know I could just have used the <canvas> tag, but I’m afraid I don’t have quite enough experience with that one to build something with it quickly—which was mostly the goal here. That and the fact that canvas is one of the things that can’t really be used in older browsers, so it would effectively NOT work there, made me decide to use a table.

I kept the tool very simple and to the point, because all I really wanted was a quick design tool that let you share your designs with others. It isn’t quite the prettiest as it is, but it’s functional, and that’s what matters… to me, at least.

The first version I put up did not have a save button, as it was pure HTML, CSS and JavaScript. To share a design, you had to use the export function, paste the exported data (which is in JSON-format, for those interested), copy the output to your Minecraft partner(s), and have them import it again. Since this is a rather tedious way of sharing designs, I built the PHP part later, which saves a design under an 8-character ID. This way, you can just copy an url the conventional way, and the design will be loaded straight away. For those who still have an exported design sitting around somewhere, you can still import it and save it online.

Seeing as there is no account system or anything, you can’t save to the same ID; you always save to a new one. This prevents people from vandalizing others’ designs. (Or griefing, if you prefer the popular Minecraft term).

Future ideas

Since I made a PHP part for it, I’m planning to expand on that. One nice idea I have is to build an actual image generator; PHP would simply combine the sprites into a single image and make it available for download as a PNG.

Another handy feature would be to have a little list of latest designs, so you don’t need to bookmark everything. I might use a cookie to have a list of the latest designs you made, which makes it easier to find your own designs, rather than just the latest few. I’ll keep you updated.

EDIT 2016-07-10: Well, none of that ever happened.

A fresh new look

It has been far too long since I last updated, and that’s not just because I forgot about it; I’ve been putting it off. Lately, I’ve had quite a couple of ideas to blog about, but I just didn’t want to because I had grown so tired of the dark design I made. I guess it was sort of stylish, in its own way, but I’ve started liking bright colour schemes better.

Therefore, before I wanted to blog again, I wanted to make it look pretty to look at; as you can see, I went for it and finished it; I’ll leave it up to you whether or not I succeeded.

I decided to finally jump on the bandwagon and do it all in HTML5, rather than the good ol’ XHTML. I think browser support for HTML5 is getting big enough to really start using it as the main technology in webpages; besides, it’s easy to set it all up so older browsers display everything all right as well.

My starting point for this custom theme was HTML5Reset‘s ‘empty’ WordPress theme. It’s basically a very basic theme, with minimal styling, so you don’t really need to actually get rid of anything to get it the way you want. It was very easy to work with, and I’m happy with the result.

What’s left

Now as you may have noticed, at the moment of writing, I’ve only redesigned the blog; the rest of my site still bears the dark brown design. I’ll be redo-ing my portfolio as well as the front page in this style, so it all matches. There are a couple of menu options up there in the navigation that don’t work properly yet too (most importantly, the ‘Music’ one), so I’ll be working on that as well.

Either after or before that, I’ll write a bit more about all the things I’ve been up to. It’s quite a bit.

JavaScript: getChildNodesByTagName()

If you’ve ever used JavaScript’s getElementsByTagName(), you may have noticed something annoying about its behaviour. (Well, it’s only annoying depending on your application.)

getElementsByTagName returns every element matching the tag name given, regardless of its position in the document tree. This is annoying if you only want to use the elements that are direct descendants of the element you’re calling it from.

So anyway, to cut this short, I wrote a quick but effective function that works just the same as getElementsByTagName, with the difference that it only returns direct descendants. Just add in this snippet of code and you can start using the function just as you would use getElementsByTagName.

Object.prototype.getChildNodesByTagName = function (tagName) {
    var byTagName = this.getElementsByTagName(tagName),
        outArr = [],
        i;

    for (i = 0; i < byTagName.length; i++) {
        if (byTagName[i].parentNode == this) {
            outArr.push(byTagName[i]);
        }
    }

    return outArr;
}

Here’s how it works: The function uses the typical getElementsByTagName, and then iterates over all the elements found. For each element it checks whether the element’s parentNode equals this, which is the node that should be the parent of any elements we want to return. When the comparison is positive, the element is added to the array, which is later returned.

I hope you can put it to good use!

Leave me a comment if this was helpful to you, or if there’s anything wrong, please.

Economic desklamp hack

Today, I decided to fiddle with things a bit.

We had these LED spots in the house, just like these (random google images find), but they broke pretty fast. When I had replaced them with regular halogen spots again, I decided to see what’s inside them, and see if I could perhaps find what’s wrong with them.

It turned out there’s a simple circular PCB with a sort of high-power SMD LEDs mounted on there. In the other part of the spot, there’s a small transformer circuit, which, as it turned out, is what’s broken. I test the LED board separately, and found that it just runs on a typical 12V DC, which is why I decided to do something with them.

I’m not going to bother trying to get the broken circuitry back to work, though.

Anyway, I got the idea to replace the halogen lamp of my desk lamp, with the LED part of the spot. I took some pictures, so you can have a look.

Here’s the original, intact lamp.

Kitchen+bathroom renovation pt.6

Yesterday, the kitchen furniture was delivered. The store where we bought it from sent 3 guys with it to install all of that, which has been done in one day.

There are still quite some spots that need to be finished up (painted, or tiled), but I must say, It’s looking pretty amazing already. Let’s move on to the pictures, shall we?

Here’s a first view. On the left is the fridge and the freezer (the fridge is on top), neatly built in. Then, the dishwasher (woohoo), and some other cupboards.

The sink is also on that side of the kitchen now, so you can work with daylight, rather than face a wall.

Kitchen+bathroom renovation pt.5

Some progress has been made since last time, so here’s another update. (And mostly because Brittany really wants new pics.)

Here goes.

Here the ceiling is in progress.

Kitchen+bathroom renovation pt.4

I figured it’s time for another update, as much has been done since we finished digging all that clay. Since then, pipes for water and cables for electricity have been put in place, concrete has been poured, walls have been placed, stabilizer has been poured, etc.

Here, a bunch of pipes for the used water have been put in place, and covered by sand again. There are so many of them because the room you see is going to be both the bathroom and the kitchen; a wall to separate them again has yet to be built.