NodeBeat was created by Seth Sandler and Justin Windle earlier this year and released in April for the iOS platform. It is an experimental node-based audio sequencer and generative music application. By combining music and playful exploration, NodeBeat allows anyone to create an exciting variety of rhythmic sequences and ambient melodies in a fun and intuitive fashion.

How Does it Work?

Octaves and Notes make up the two types of nodes. Octaves pulse and send messages to Notes within proximity. Each Octave is assigned a random octave and each Note, a random note; therefore, a Note will play in several octaves depending on the Octave it’s connected to. Pause nodes to create your own beats or let them roam free to have them generate their own.

Cross platform development

Because NodeBeat was developed using the C++ based open source framework openFrameworks, I did not expected a lot of trouble getting the core to work on Android. However, since the Android port of openFarmworks is still pretty new (we’re using the development branch) and officially only supported on the Mac and Linux platforms, I decided to put some effort into making it work on Windows as well. I’m a Windows user and developer, so if I can avoid dualbooting, I will .

Native Development Kit

As soon as you want to use C or C++ in your Android projects, you will have to install the Native Development Kit (NDK). It basically allows you to compile your code into a library which you can access using JNI calls. While in general it is recommend to code using the SDK in Java for your Android projects (the Dalvik VM with JIT show really good performance), lazy coders (like me ) are always trying to find ways to reuse existing code. Instead of having a native codebase for iOS (in Objective-C) and Android (in Java), it is nicer to have a shared core in C++ with a thin layer (Obj-C or Java) to interface with it. Sure the NDK might sound intimidating at first sight and Google doesnt recommend it unless you know what you’re doing, but honestly I don’t think its rocket science either. After downloading the NDK, you will need to setup a unix like environment such as MinGW or Cygwin.

For my previous projects I already had MinGW installed (you could use Cygwin, but in general I don’t like their approach). I did a fresh checkout from Github and started to mess around with the Makefiles to see if it would compile.

It turned out that all I had to do is replacing a few IF statements (the ones that are checking the build platform) and make them point to the NDK location on my Windows computer. I’ve created a tutorial that explains the steps if you want to try it out yourself. However, if you want to use openFrameworks for your own Android applications, I would highly recommend just using my openFrameworks fork instead (until they accept my pull request). It includes all the patches from the tutorial and it should be compatibly with the latest NDK. The tutorial actually also explains how to run one of the examples so be sure to check that out.

Porting the GUI

For the UI I wanted to stay as close to the iOS version as possible. As I don’t own an iOS device, Seth gave me some screenshots of NodeBeat running on iOS which I used as a reference.

Since the iOS and Android framework are quite distinct, there are cases where I had to do an alternative implementation. For example, on Android most devices have the following buttons:

• Back
• Menu
• Home
• Search

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/node"
          android:icon="@drawable/node_icon"
          android:title="Node" />
    <item android:id="@+id/audio"
          android:icon="@drawable/audio_icon"
          android:title="Audio" />
          ...
</menu>

Example: Audio menu

Example: Recording dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("You can stop recording by pressing the record button in the menu again")
       .setCancelable(false)
       .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
           public void onClick(DialogInterface dialog, int id) {
                // Start recording
           }
       })
       .setNegativeButton("No", new DialogInterface.OnClickListener() {
           public void onClick(DialogInterface dialog, int id) {
                dialog.cancel(); // Cancel dialog
           }
       });
AlertDialog alert = builder.create();
alert.setTitle("Start recording");

Using JNI Callbacks

After we’ve ported the UI, we still need to pass on our settings to the core application. Fortunately we can use JNI callbacks to get and set NodeBeat’s properties. It is good to know that you should minimize the number of JNI callbacks for performance reasons (so don’t go mental and call tons of JNI methods each time you render a frame).

Let say we would like to pass a value from one of the sliders from the Audio context menu to our NodeBeat core. In such case we first create a new static method in our Java source file:

OFActivity.java

1

public static native void sliderChanged(float v);

It is important to use the static and native keyword when you define your method. This is all we need to do in our java code and this method can be used anywhere in our java class.

Now the tricky part is how to implement the function on the C++ side of your application. It’s not exactly complex, but you will have to pay attention to a few details. Three things are important here:

1. The namespace (in Java)
2. The class name
3. The method name

If we assume we’re implementing this callback in one of the openFrameworks examples, this means:

1. The namespace (in Java): cc.openframeworks.androidEmptyExample
2. The class name: OFActivity
3. The method name: sliderChanged

main.cpp

Here is the code you implement in C++

1
2
3
4
5

#include <jni.h>
extern "C"{
void Java_cc_openframeworks_androidEmptyExample_OFActivity_sliderChanged (JNIEnv*  env, jclass  thiz, jfloat value){
// Do smth here
}

As ugly as this method looks like, take a brief look at how it is constructed. It starts with the return type (which is void just like how we specified it in Java). Next it starts with Java_ and is succeeded by the namespace, classname , method name. All dots from the namespace are replaced by underscores and between each element we place an underscore as well.

In the arguments list, the “JNIEnv*  env, jclass  thiz” part is mandatory (so if you have a something like this: public static native void methodname(), it would be void methodname(JNIEnv*  env, jclass  thiz)). For our method we want to pass a float as argument. For some reasons you can’t just pass a float, you will need to use JNI mapping types. The float becomes a jfloat.
Note: for booleans you need to compare the value to JNI_TRUE or JNI_FALSE and not to true or false.

Honeycomb Tablets

Unlike the iOS devices from Apple, Android devices run at so many different configurations and API levels, it can be a bit tricky to support all of them. For NodeBeat we decided to create two versions: A phone version and tablet version. We basically distinguish between phones who are running Eclair or Gingerbread (2.2+) and tablets running Honeycomb (3.0). On the Android Market it seems like we only provide one version, but depending on what device you’re using to download the app, it will give you a certain version.

In order to maximize the use of the display, I’m using this line in the AndroidManifest.xml file:

1

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

On phones it sets the application to fullscreen. While this works for anything running Android 2.2+, it is a problem on Honeycomb devices. Honeycomb tablets don’t have any physical buttons and when the application is running in fullscreen mode, there is no shortcut to the menu button. This shortcut is normally placed in the top right corner.

This means that for the tablet version, we run the application in regular display mode.
Other than that, NodeBeat provides a rich user experience on tablet devices such as the XOOM or Asus transfomer.

Earbleeding masterpiece created by Sharath Patali (professional coder, horrific musician)

Android Market

Publishing the app to the Android market is no hassle at all (we were just a bit unfortunate and had our app pulled down by accident). There is no annual fee (just a one time 25$) and apps are approved instantly. The dev guide provides a comprehensive overview on how to build your project in release mode and how to sign it.

Go get it!

NodeBeat is available on the Android market:
https://market.android.com/details?id=com.AffinityBlue.NodeBeat

Try it out! It’s just a dollar

Website: http://nodebeat.com/
Twitter: http://twitter.com/NodeBeat

Of course, there is always the debate whether it is legal to build an emulator. Console manufacturers will always forbid any type of emulation of their systems. Although its a rather grey area as most documents on the chip design are publicly available (e.g. MIPS / ARM instruction sets).

Since I got excited about emulation in general, I started to do some research on how to build one myself. As I didn’t want to spend days or even weeks to get some results, I looked for a simple system. A friend introduced me to a small system called the Chip 8.
The Chip 8 itself didn’t existed as a hardware system, but was implemented in software. Due to the small instruction set (~30 opcodes), it was a very good candidate to work on as a first emulation project. The instruction set defines the functionality of the CPU. It for example contains instructions that allow the CPU to load or store data, but also perform mathematical tasks such as multiplications.

Having worked on a couple of emulation projects (and emulator plugins), I started to write a guide that will hopefully help out aspiring emulator authors and inspire emulation enthusiast. The guide explains how emulators work and provides a detailed overview on how to write a Chip 8 interpreter from scratch.

Writing a Chip 8 emulator shouldn’t be too time consuming. On average people tend to finish such project in one or two days. It’s a fun project to test out your programming skills and of course quite educational (and it isn’t just for CS majors )

If you’re ready to take up the challenge, click the link below! Have fun!

• How to write an emulator (CHIP-8 interpreter)

Howto: Compile Touchlib in Windows
Howto: Compile Touchlib in Linux

Both compile instructions apply to subversion rev.73 of touchlib. If you followed the Howto’s and still have some trouble please post the problem in the comment section.

After the last blog not much had to be done about the FTIR screen. Actually I only used some tape to hide the wires on the sides.
With all LED’s in place and the frame being placed on two chairs it was time to finally test the FTIR screen.

All LED’s are fully functioning !

Testing with 5 and 2 fingers…

10 finger test:

Video containing a summary of the project and some demo applications

To get the Touch Tracer tool (from the demo video) please click on read more.

Project description:
Name: Touch Tracer
Purpose: To display recognized blob’s and for debugging purpose

Install instructions:
1. Put all files (touch_tracer.exe and *.bat files) in the same dir as touchlib.dll
2. Either run the bat files or edit them.
touch_tracer.exe requires 4 arguments: width height bitdepth refreshrate
example: touch_tracer.exe 1024 768 32 60

General note, as the readme.txt states, this application needs libraries of visual studio 2005. If you don’t have those, you will be prompt with an error message.

Todo:
1. Show the path of a tracked blob and let it fade away over time.

Download:
Touch Tracer v0.1 Binary

Optional downloads
Visual Studio 2005 SP1 Redist. Package (URL Offline)
Entire package if the one above fails -> Get it from microsoft

As power source for my LED’s I will be using a 12V DC Adapter (1000 mA).
To calculate the LED array and the amount of needed resistors I used an internet tool the LED Wizard.

According to the wizard I should create 5 array’s of LED’s. Each array should contain 6 LED’s and one resistor of 68 ohms.

Click the link below to continue reading.

Needed equipment:
- Workbench
- Soldering iron
- Solder
- Wires and resistors
- Needle-nose pliers
- A steady hand
- Toilet paper!

Bending!
First you should bend the legs of the IR LED’s. I would recommend using Needle-nose pliers to prevent breaking a leg. Also don’t bend it more than once.

Be sure to check the holes you drilled, you really don’t want to get them stuck in there. To prevent the LED’s from being damaged, you should make them a bit larger than the diameter of your LED.

Soldering
Well I didn’t made much photo’s during soldering. But some general hints, don’t heat the legs of the IR LED’s too long because you probably end up melting the LED. Also whenever possible you should try soldering on some plate instead of what I did… soldering inside the small frame. However it makes it twice as challenging though .
After soldering 3 sides, it’s time to put in the acrylic plate. You might want to use some toilet paper to keep the acrylic plate centered (The acrylic plate should not be touching the LED’s). Now closed the frame and continue soldering!

Almost done, just need to attach the power plug…

A new FTIR screen born…

Coming up: First tests on the FTIR screen…

Before actually working on the frame, I made a drawing in AutoCAD. Within this drawing I could easily calculate the amount of IR LED’s I would need and at the same time see how the IR light beams would spread.

FTIR Prototype Drawing

The local tool shop was friendly enough to cut the aluminum frame (H shaped) into the sizes of my drawing.
So at home I just needed to remove the edges in 45 degrees.

Click the link below to continue reading.

Needed equipment:
- Saw (for aluminum/iron)
- Mitre Block
- Clamp
- Workbench
- Drill
- Drill bits (multiple sizes)
- Punch
- Hand-file

First I mounted the aluminum frame in a Mitre Block. To prevent it from moving during sawing, I used a clamp.

After sawing, I used a Hand-file to smoothen the edges. It fits nice:

Next step is drilling holes for the LED’s. Before drilling I used a Punch to make sure the Drill won’t shift during drilling.You could start with a small Drill bit but I just started with 3.5 mm and after that I used 5 mm (which is the size of my LED’s).

Almost done…

To keep the parts into place I used a construction like this:

Next time I’ll cover soldering the LED’s…

[Show as slideshow]

I tried to maintain the aspect ratio of a regular screen (4:3). The size of the plate is 41 x 31 cm and about 8 mm thick. The actual area which will be captured is 40 x 30 cm.

Two days after ordering the acrylic plate I received it in a nice package:

In the image below we can see the plate has been cut roughly.

(The plate looks a bit blue but thats due the colour of the protective layer)

Because we want to beam IR light into the sides of the acrylic plate, it is necersaily to polish the sides.

Click the link below to continue reading about how to treat the acrylic plate.

Needed equipment:
- (Wet) sandpaper of the following grit sizes:
P320 (I used Norton T223 / P320 / Very Fine)
P800A (I used Auto-paper P800A / Super fine)
P1200A (I used Auto-paper P1200A / Super fine)
- Brasso
- Old cloth
- Some old newspapers
- A bucket of water
- A lot of Patience! (Really!)

General hint: If you order an acrylic plate, ask your supplier to finish off the edges as smooth as possible.

Polishing step by step
Depending on the state of the edges you should decide how many different types of sandpaper you want to use.

In my case I started with the P320. Since this is “wet” sandpaper you need to soak it in a bucket of water before you can use it! Continue polishing the edges until no scratches of the cutting machines are visible anymore.

After a quick first polish with P320 it should look a bit like this:

If (almost) no scratches are visible, continue using P800A

Just do the edges several times, after this continue with P1200A for a while

To make it all nice and shiny we use the good old Brasso:

Pour some Brasso on a cloth and start wiping the edges.

After doing the sides multiple times, it is time to view the result:

As an example object I took an old guitar string package. You should be able to see “Electric Guitar Strings” in it (a bit mirrored though).

Shipping + Lazyness = … !
In my case the local tool shop did not had acrylic plates which where thick enough (at max 4 mm, and I needed at least 8 mm), so I had to order it online. No big deal though. At the time of delivery no body was home, however it seems that the postman did not felt like returning for the second time, so he left the following note:

Translation: NOTE!: Behind green garbage bin

>_< Like wtf? He left it outside! Thank god my neighborhood is a safe place, it could easily have been stolen …

To be continued
If you made it to this state, your arm is probably hurting from polishing …
take a break and see you next time!

[Show as slideshow]

12►

Today I will cover how the lens of the Philips webcam can be dismounted and replaced by one without an infrared (IR) blocking filter.

Most consumer webcams contain an IR filter which will prevent IR light coming through. This is done to prevent image distortion. However in our case we want to capture the IR light. On some webcams it’s possible to remove the IR filter (which is behind the lens and often has a red colour). With our current webcam from Philips this isn’t possible. Therefor a new camera lens has been ordered on eBay.

It was called “4.3MM 4.3 MM CCTV Camera board Lens IR DVR NEW”

Some specifications of the new camera lens:
* Glass Lens
* Focal length: 4.3 mm
* Aperture F/1.8
* Image format 1/3 inch
* Angel of view 68°
* Mount M12 x P0.5
* Size ?14×14.75

Click the link below to continue reading about how to replace the camera lens.

Needed equipment:
- A screwdriver or a swiss knife
- A steady hand
- Some patience

Obviously by following the next steps your product warranty will be over… don’t say I didn’t warned you… but who cares

Step 1: Turn it
Because we don’t want to take the whole camera apart, we will start by removing the lens adjuster (normally used to focus manually).

First turn the lens adjuster counter clockwise untill it won’t go any further. If you feel like it’s being stuck, try a bit harder untill you have something similar as the image below:

Step 2: Removing the lens adjuster.
Now there should be enough space to put a screwdriver in the gap.

You should now be able to take the lens adjuster off. You could do it nice and gently, but in my case I broke a few parts of it . Not something to worry about though.

You can cleary see the CCD sensor:

Step 3: Mount the new lens.
Finally you should be able to mount the new lens. This might be tricky if you got large fingers. You might want to use the lens adjuster as a tool to mount it.

Some extra images
The old (left) and the new (right) lens:

The IR filter on the old lens:

The next blog entry will be about how to polish the acrylic plate.