Tuesday, August 2, 2016

Web scanning / weird HTTP headers

So there I was, scanning the web with a little Python script, looking for servers and other connected devices (you know, typical Tuesday night stuff) when I found a response that had an HTTP header with the key "X-hacker".

I've never seen that one before so I opened it up to see what the value was, thinking that surely it'll be something awesome...
X-hacker: If you're reading this, you should visit automattic.com/jobs and apply to join the fun, mention this header.
That's right. They're in our meetups, and discussion boards, and now recruiters are even lurking in HTTP headers.

To anyone interested in the scanning script, it's basically a modified version of this: https://gist.github.com/wybiral/8529a14092fef7e31a1c82eb65d36c60. You need a MongoDB instance for it to insert the scans into. Then you can query that MongoDB instance. I use a small web interface that groups them for quick statistics on common responses, popular server versions, etc. Yes, you'd have much better performance if you put something like ZMap in front of a parser, but this works well enough for my needs. Don't do anything I wouldn't do.

Saturday, July 30, 2016

WebGL terrain tutorial

Today I put together a quick tutorial on how to build a 3d terrain in Javascript, from setting up three.js to loading a heightmap and texture. More will be added later (controls and collision).

Each step is organized as a release in the Github repo so you can download them all individually or browse through the commit diffs to see each change being made.

The Github project is here: https://github.com/wybiral/terrain

And, if course, there's a demo of it here: https://wybiral.github.io/terrain/

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();

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;

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).