Teleranek

Recently I stumbled upon a challenge on challengepost.com – “20 lines of JavaScript”. The goal was to write a 20 line JS code that does something that can make the challenge judges vote for you. I thought the best idea would be to treat this challenge like a good ol’ demoscene compo. I’ve already had a good effect – the flower fractals. Unfortunately, after porting it to JavaScript it was 11 KBytes :( and 383 lines of code, not always shorter than the required 80 chars (or maybe even more, but I don’t remember where I put the first version). I used PIXI, great 2D javascript library because it uses several enhancements for JS canvas (it also supports WebGL, but WebGL isn’t really a vector-like drawing thing, the lines are aliased and poor quality, to obtain better quality I’d need to use textures and stuff, I thought it would be too complicated for 20 lines of code).

OK, so I’ve got 383 lines and 11 kilobytes. As we all know, 20 lines of 80 char code is 1600 bytes, so there’s way to go… I checked with google closure compiler, how I could squish that – after compressing, it was about 5 kilos. Still too much. After hours of merging functions, deleting smooth line bezier-based rendering, reusing some vars, it went down to about 3 kilos.

I started to think that its impossible to do, unless some miracle happens.

Then I stumbled upon this great method of utilising somehow buggy behaviour of browsers – treating PNG files like HTML, when compressed PNG data resembles HTML data. After changing the JS to one big eval(…) function and compressing it to PNG I went down to 1600 bytes. Well, exactly 1595. Changing some things inside eval and making the code larger allowed PNG to compress it enough. So there’s this curiosity – PNG JavaScript: 1600BYTES

This was of course no-go, because it wasn’t really javascript – it was png, and I it would be really really hard to intoduce line breaks inside zipped binary data. Also, it’s very ugly, you can see some errors appearing when running this code – some PNG IHDR data is displayed for a short period of time. I had to come up with something else. But how to squish the code better than the zip algorithm itself?

Then I had a moment of enlightning – it’s 20 lines of 80 characters challenge, not 1600 bytes challenge. How about UTF-16? I could write 2 bytes inside 1 UTF16 character.

It worked! Excited, I searched on google if anyone else did it – of course someone already came up with that idea ;/ And the idea was better because the decoder is like:
eval(unescape(escape('SOME STRING').replace(/uD./g,'')))

And mine was much longer and 2 lines:
function(s){A=[];for(i=0;i<s.length;i++){c=s.charCodeAt(i);A.push(c&255);
c>>8?A.push(c>>8):c;}return String.fromCharCode.apply(String,A)}("SOME STRING");

But my method used a bit different technique, so I could use normal letters and fit some ASCII art inside the code, not only some strange chinese letters.

OK, so after compiling with google closure, making big eval and changing to UTF-16, the code looks like this:

And can be seen on the challengepost’s winners’ ( ?° ?? ?°)  gallery:
http://challengepost.com/software/20-lines-of-green

or here
or JSFiddle: http://jsfiddle.net/to267224/tbgad7uz/

ps. I will enhance this post later maybe, to provide some missing info on technical things and add some images, cause there’s too much unformatted text ; )

Ok, so I’ve decided to make simple flash simulations of biological neuron behaviour ( http://en.wikipedia.org/wiki/Neuron_model ).

I don’t want to bore you with neuron model theory, if you are here, you probably know what’s this. And if you don’t, you probably don’t want to know : )
I’ve made 3 experiments. All of them are based on real-life sodium – potassium Hodgkin-Huxley model.
First one is a 2d plot of current flow. The blue line is the input current, red and green ones are the neuron’s answer to the input current. Green is gating variable, red – neuron’s voltage.
It shows, how the current propagate in neurons connected into some kind of chain.

Drag the blue line to modify the input current. The sound, is the neuron’s response converted to waveform.
Here is the source: http://exp.teleranek.org/neuro_stuff/biological/neuronTest.as

The second experiment, is the 3d simulation of the same equations

Drag the stage to change camera position.
Source for this experiment:
http://exp.teleranek.org/neuro_stuff/biological/neuronTest2.as

The third experiment pictures Hodgkin-Huxley’s model bifurcations from sample vector field. It’s shown as particles propagating thourgh the vector field. Click and hold the left mouse button to shoot the particles.

Source for this experiment:
http://exp.teleranek.org/neuro_stuff/biological/phaseTest.as

That’s the little AS3 Class I’ve written. Nowadays there’s some strange trend in ripping off OSX GUI, so I’ve decided to make your life a little easier.
I’ve been googlin for this effect, but I haven’t seen anything event close, to what you can see on OSX.

So here comes this little class – GenieFX:

Click grey button-like object to see the animation.

This is the fragment pulled from demo’s source:

addChild( gfx = new GenieFx(
( new demoBmp() ).bitmapData , /* object to animate - DisplayObject or BitmapData */
150                          , /* x position of genie's "tail" */
0                              /* start from hidden image */
) );


You can pass a vector shape or whatever else to animate.  The “x position of genie’s tail” is randomly generated after every button click,that’s why the image comes to and from different places.
Source for this demo is available for download here:
http://exp.teleranek.org/proj/genie/demo.zip

The demo uses almost all functions of this effect, so you will figure out how to use it : ) It’s ultra-simple.

The class uses a bit buggy ( but free to use on commercial projects : P ) tweening lib called “Twease”, feel free to change it to TweenLite or whatever else.