Saturday, July 23, 2016

Procedural trees with Javascript

Here's another quick web experiment, this time exploring the use of particle systems to generate art.


You can watch it generate a random forest live here: https://wybiral.github.io/code-art/projects/trees/

Or if you're one of the cool kids you can clone the Git repo or browse the code here: https://github.com/wybiral/code-art

Each tree starts as a single particle representing the trunk and moves upward with a random chance of bending or splitting as it goes. The branches are rendered using a technique similar to the spray can from MS Paint to create a charcoal look. Random pixels are faded out as it runs to create a grainy fog effect.

Saturday, July 16, 2016

Audio synthesis in the browser with WebAudio

Audio synthesis with WebAudio is easy. To prove it I'll get straight to the point...

(If you don't want to follow along via blog post, a working example project with code broken up into logical commits and releases is available here: https://github.com/wybiral/webaudio-example)

The first thing you need is an instance of AudioContext:

var ctx = new AudioContext();
var node = ctx.createGain();
node.connect(ctx.destination);


The "node" object is actually a gain node that you can use to adjust the audio level but you can ignore that for now. All I did was connect it to the AudioContext destination (our ouput).

Now you need to create an audio buffer to stuff some samples into:

var duration = 1.0;
var rate = ctx.sampleRate;
var length = rate * duration;
var buffer = ctx.createBuffer(1, length, rate);
var data = buffer.getChannelData(0);

In case you're lost here, duration will be the length of our audio buffer in seconds. I've grabbed the sample rate from the audio context and used that to compute the length of the buffer. Now we have "data", which is a Float32Array that we can start adding samples to.

Let's fill that buffer with some noise (random noise in this case):

for (var i = 0; i < data.length; i++) {
    data[i] = Math.random() * 2 - 1;
}

Now all you have to do is play the buffer by creating an audio source and connecting it to the gain node.

var source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(node);
source.start(0);

That's it. The Github code will show you how to turn this random noise into musical notes and goes into a bit more detail in the comments so go check it out!

Saturday, March 26, 2016

Teach a computer to play air hockey

I'm always looking for an excuse to build something fun... So it was only a matter of time before I got the idea to create a virtual air hockey game, and then train a neural network to play it.

Check it out: https://github.com/wybiral/air-hockey

The idea is pretty simple. First setup some basic physics for controlling the puck and paddles. Instead of writing a new physics engine I decided to go with matter.js (it's easy to use and supports everything I needed here). The neural network is a basic multilayer perceptron handled using synaptic.js (another great library that works well here). It's trained to recreate the actions of a human player given the position of the objects as inputs.

I've also been using this mini-project to track my development process using releases so if you're curious how this was put together you can look at each step along the way here: https://github.com/wybiral/air-hockey/releases

The next step will probably be to add export/import capabilities for the neural networks (that way we can train two different networks differently and then watch them go head-to-head).


Friday, October 23, 2015

Visualizing popular machine learning algorithms

I put together an experiment to compare different classification machine learning algorithms in real time to gain insight into which ones handle certain situations better than others: http://jsfiddle.net/wybiral/3bdkp5c0/embedded/result/

Currently the algorithms covered are:
  • Linear regression (with cubic expansion on feature space)
  • Logistic regression (with cubic expansion on feature space)
  • Neural network (sigmoidal feed forward back propagation)
  • K nearest neighbor (where k=5)
  • Naive bayes
  • Support vector machine (gauss kernel)
  • Discriminate analysis
The bottom dropdown has a few simple datasets but you can also click on the classification space to add new blue/orange points.

As the algorithm trains you'll see the background color morph to display the classification boundary. Change the algorithm (via the dropdown on the top) and see how it impacts the classification boundary.

Sunday, October 20, 2013

Halloween Strategy Game

As a fun little side project to kick off the season I decided to write a Halloween themed strategy game (in the style of the tower defense genre). Appropriate for children (there is no gore or violence) although it may be a bit challenging for young ones.

Click Here to play!

As the narrator explains... Monsters appear every Halloween night and take all of your candy. It's up to you to build spooky decorations to scare them off as they get progressively more difficult to frighten.

It was written from scratch in Javascript leveraging HTML Canvas, jQuery, and UnderscroreJS. I took most of the images from google image search. If you own any of them and would either like credit or want them removed, contact me immediately!

Happy Halloween!

Saturday, February 9, 2013

Web Guitar

I finally got around to porting some of my old code to use HTML5's Web Audio API. It's a guitar tab editor that uses web audio to playback your tabs. The sound is synthesized using the code in the textarea below the editor. By default, the code is a basic string pluck synthesis, but you can change it to produce whatever waveforms you'd like.

It's primitive. It hasn't been tested on anything other than chrome. The UI has no documentation. It's got some growing up to do, but it's still fun to play around with.

Here it is: Web Guitar Demo

Load the example "Moonlight sonata" and press play.


Hint: clicking above the strings in the editor will toggle between 4, 8, 16, 1, 2 which is the reciprocal of the duration of the note. Also, after clicking on a string, you can navigate the editor using the arrow keys.

Monday, January 7, 2013

Quantum Algorithms

I've added a few examples to my quantum circuit editor / simulator. The most interesting of which being Grover's Algorithm for unsorted search.

Go ahead and try it out.

Hit "Enter" to evaluate the circuit and get a table of probable outcomes.

The gate F7 makes the fifth qubit in the "|1>" state if the first four qubits are in the state "|0111>" (seven). The circuit is able to determine that "|0111>" is the magic number with over 96% accuracy and only three calls to F7.

I also included an F5 gate. Go ahead and right click those F7 gates away, select the F5 gate, and then drag it into the three places the F7 was. Now it will find "|0101>".

You can save the entire circuit by pressing Ctrl+S. Double click on the GROV, F7, and F5 gates to see what their circuits look like (or to edit them to create your own versions).

Some of the other examples include:

  • Toffoli gate (you can make one simply by dragging to controls onto an X gate, but this is an implementation using only CNots and single-qubit gates)
  • Bell State (the "Hello World" of quantum computing)
  • 2 Qubit QFT and 4 Qubit QFT (again, the editor has it's own quantum fourier transform gate, but these are implementations using only Hadamard gates, controlled rotations, and swaps)
More general info can be found in the help menu on the very top right of the application.