Save and Load Binary Files in HTML5

In this example, we firstly draw something (shapes & lines) on the canvas, convert it into a bitmap (pixel data) and save the pixel values as a binary file.

//Draw something
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 60, 60);
ctx.beginPath();
ctx.rect(60, 60, 160, 80);
ctx.fillStyle = "blue";
ctx.fill();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(6, 160);
ctx.lineTo(240, 360);
ctx.lineTo(60, 800);
ctx.lineTo(800, 60);
ctx.stroke();//draw
//Convert canvas draws into pixels
var buffer = ctx.getImageData(0, 0, w, h);

//https://stackoverflow.com/questions/23451726/saving-binary-data-as-file-using-javascript-from-a-browser
var saveByteArray = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, name) {
        var blob = new Blob(data, {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());
//Save pixel data (ArrayBuffer) as binary file
saveByteArray([buffer.data], 'example.bf');

Then we load the binary file and display the pixel values it stores (as a bitmap) using a new canvas.

//The requestAnimFrame fallback for better and smoother animation
var buffer = ctx.createImageData(w, h);

//http://qnimate.com/an-introduction-to-javascript-blobs-and-file-interface/
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "./example.bf"); 
//although we can get the remote data directly into an arraybuffer using the string "arraybuffer" assigned to responseType property. For the sake of example we are putting it into a blob and then copying the blob data into an arraybuffer.
xhr.responseType = "blob";

function analyze_data(blob)
{
    var myReader = new FileReader();
    myReader.readAsArrayBuffer(blob);
    
    myReader.addEventListener("loadend", function(e)
    {
        var buf = e.srcElement.result;//arraybuffer object
        var buf8 = new Uint8ClampedArray(buf);//first view for copy pixel data to ImageData
        var data = new Uint32Array(buf);//second view for setting pixel values
        buffer.data.set(buf8);
        //we use putImageData() to copy the image data back to the canvas.
        ctx.putImageData(buffer, 0, 0);
    });
}

xhr.onload = function() 
{
    analyze_data(xhr.response);
}
xhr.send();

Demo & Full Source Code: Create & Save, Load & Show

Fast per pixel bitmap animation in HTML5

According to this tutorial (Faster Canvas Pixel Manipulation with Typed Arrays), we can make the code in my last post (per pixel bitmap animation in HTML5/JavaScript) faster using Typed Arrays:

//The requestAnimFrame fallback for better and smoother animation
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

//Prepare our canvas
var canvas = document.querySelector('#render');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');

var time = Date.now();//record initial time
var buffer = ctx.createImageData(w, h);//The back buffer we used to paint the result into the canvas
//The main render function
//Calculate a color value from elapsed time and [x,y] coordinates (scaled to [0,1])
function render(time, fragcoord) {
    /* put the GLSL fragment shader's JavaScript equivalent here. */
    //begin of per pixel bitmap manipulation
    var x = fragcoord[0]; var y = fragcoord[1];
    var red = x;
    var green = y;
    var blue = 1/(1+time);
    var alpha = 1;
    //end of per pixel bitmap manipulation
    return [red,green,blue,alpha]; //the final color value (scaled to [0,1])
};
var buf;
function animate() {
    var delta = (Date.now() - time) / 1000;
    buffer = ctx.createImageData(w, h);
    //
    /*
    Next we create two ArrayBuffer views. 
    One that allows us to view buf as a one-dimensional array of unsigned 8-bit values 
    and another that allows us to view buf as a one-dimensional array of unsigned 32-bit values.
    */
    buf = new ArrayBuffer(buffer.data.length);
    var buf8 = new Uint8ClampedArray(buf);//first view for copy pixel data to ImageData
    var data = new Uint32Array(buf);//second view for setting pixel values
    //
    ctx.clearRect(0, 0, w, h);
    for (var x = 0; x < w; x++) {
        for (var y = 0; y < h; y++) {
            var ret = render(delta, [x/w, y/h]);
            //var i = (y * buffer.width + x) * 4;
            //buffer.data[i] = ret[0] * 255;//red
            //buffer.data[i + 1] = ret[1] * 255;//green
            //buffer.data[i + 2] = ret[2] * 255;//blue
            //buffer.data[i + 3] = ret[3] * 255;//alpha  
            data[y * w + x] =
            (ret[3]*255 << 24) | // alpha
            (ret[2]*255 << 16) | // blue
            (ret[1]*255 <<  8) | // green
             ret[0]*255;  // red
        }
    }
    /*
    now assign the contents of the ArrayBuffer buf to imageData.data. 
    We use the Uint8ClampedArray.set() method to set the data property 
    to the Uint8ClampedArray view of our ArrayBuffer by specifying buf8 as the parameter.
    */
    buffer.data.set(buf8);
    //Finally, we use putImageData() to copy the image data back to the canvas.
    ctx.putImageData(buffer, 0, 0);
    requestAnimFrame(animate);
};

window.onresize = function () {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
};

animate();

Demo & Full Source Code: http://vvv.flaswf.tk/demo/?url=HTML5Pixelsfast

The difference: Here we use an ArrayBuffer "buf" to hold the ImageData "buffer", and create two ArrayBuffer views of "buf"; one as an array of unsigned 8-bit values for using "putImageData()" function to copy the image data back to the canvas, and the other one as unsigned 32-bit values for setting pixel values (just like in AS3, allowing you to use only one, instead of four, array assignment to set a pixel's value).

Per pixel bitmap animation in HTML5/JavaScript

LICSON showed how to simulate GLSL shader effects on HTML5 Canvas using pure JavaScript:

//The requestAnimFrame fallback for better and smoother animation
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

//Prepare our canvas
var canvas = document.querySelector('#render');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');

var time = Date.now();//record initial time
var buffer = ctx.createImageData(w, h);//The back buffer we used to paint the result into the canvas

//The main render function
//Calculate a color value from elapsed time and [x,y] coordinates (scaled to [0,1])
function render(time, fragcoord) {
    /* put the GLSL fragment shader's JavaScript equivalent here. */
    //begin of per pixel bitmap manipulation
    var x = fragcoord[0]; var y = fragcoord[1];
    var red = x;
    var green = y;
    var blue = 1/(1+time);
    var alpha = 1;
    //end of per pixel bitmap manipulation
    return [red,green,blue,alpha]; //the final color value (scaled to [0,1])
};

function animate() {
    var delta = (Date.now() - time) / 1000;
    buffer = ctx.createImageData(w, h);
    ctx.clearRect(0, 0, w, h);
    for (var x = 0; x < w; x++) {
        for (var y = 0; y < h; y++) {
            var ret = render(delta, [x/w, y/h]);
            var i = (y * buffer.width + x) * 4;
            buffer.data[i] = ret[0] * 255;//red
            buffer.data[i + 1] = ret[1] * 255;//green
            buffer.data[i + 2] = ret[2] * 255;//blue
            buffer.data[i + 3] = ret[3] * 255;//alpha
        }
    }
    ctx.putImageData(buffer, 0, 0);
    requestAnimFrame(animate);
};

window.onresize = function () {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
};

animate();

Demo & Full Source Code: http://vvv.flaswf.tk/demo/?url=HTML5Pixels

The difference: In AS3/Haxe, a color value is represented by a single Unsigned Int value (0xAARRGGBB). In HTML5, the color data (BitmapData) array stores a whole color value as four neighboring elements (integer between 0 and 255), representing the red, green, blue and alpha values, respectively. To get/set the color value at coordinate (x,y), you should go to index "i=(y*buffer.width+x)*4", then the red, green, blue and alpha values are respectively "buffer.data[i], buffer.data[i+1], buffer.data[i+2], buffer.data[i+3]".

Links:
https://licson.net/post/glsl-fragment-shaders-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
https://bruce-lab.blogspot.com/2019/02/four-ways-for-per-pixel-bitmap.html
Faster Canvas Pixel Manipulation with Typed Arrays
References:
HTML5 Canvas: Native Interactivity and Animation for the Web, see Animation Loop (P.27), Pixel Manipulation (P.170).
Foundation HTML5 Animation with JavaScript, see Animation loops (P.16), Pixel manipulation (P.94).
HTML5 Game Development Insights, see High-Performance Update Loops (P.106), A Bitmap API Example (P.246).
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
https://www.w3schools.com/js/js_htmldom_animate.asp
https://www.w3schools.com/tags/canvas_putimagedata.asp

Find the IP, Country and Location of Your Visitors Using JavaScript

Note: You must visit this page using "http" instead of "https" to display the example correctly.


Geolocation by geoPlugin is a free service providing Javascript, PHP, JSON, XML and ASP APIs for you to identify a visitor's IP, location such as country, city, latitude, longitude and so on.

Geolocation by geoPlugin

More Examples and Source Code: http://www.geoplugin.com/examples
JavaScript API: http://www.geoplugin.com/webservices/javascript

Links:
http://www.geoplugin.com/
https://developers.google.com/maps/documentation/javascript/
http://stackoverflow.com/questions/391979/get-client-ip-using-just-javascript
http://stackoverflow.com/questions/12553160/getting-visitors-country-from-their-ip
http://stackoverflow.com/questions/5206015/fastest-way-of-detecting-users-country

"No Programming Needed" Game Editors and Visual Programming

Blueprints - Unreal Engine Visual Scripting (Free & Open Source & Commercial)
https://docs.unrealengine.com/latest/INT/Engine/Blueprints/index.html

Node-based scripting system of Unreal engine, can be extended with C++ programming.
Links: http://blueprintue.com/ (Pastebin for Blueprints)

Blender Game Engine - Logic Editor (Free & Open Source)
https://www.blender.org/manual/editors/logic_editor.html

Event driven logic bricks, can be extended through Python scripting.

Amazon Lumberyard (CryEngine) - Flow Graph System (Free with Full Source & Commercial)
https://aws.amazon.com/en/lumberyard/
https://www.cryengine.com/features/sandbox-tools#features/flowgraph

Visual scripting system to implement complex game logic without code.

WIMI5 (Free)
http://wimi5.com/

Html5 game editor with node-based visual programming.

Scratch (Free & Open Source)
https://scratch.mit.edu/
http://wiki.scratch.mit.edu/wiki/Blocks

Blocks based visual programming language.
Similar Tools: Stencyl (Free & Commercial)

Blocky
https://developers.google.com/blockly/

Javascript library by Google, for building visual programming editors.

Gdevelop (Free & Open Source)
http://compilgames.net/

Event based system, can be extended using Javascript (HTML5 target), or C++ (Native target).
Similar Tools: Construct 2 (Free & Commercial)


Note: Basically, there are two most popular types of visual programming as scripting system in game editors - node & wire based and block based. My personal favorite is block based, more specifically, GDevelop-style. The reason is the presentation of logic in block based visual programming is "linear". Node & wire based visual programming is very flexible, but as the presentation can be non-linear ("messy"), it usually has low readability (just think the "wires" as the notorious keyword "goto"). Block based is more similar to line by line text-based structured programming, and it is easier to structure and organize, and hence usually have better readability. Scratch and blocky are too similar to text-based programming and almost have no advantages over text-based programming, so I think most programmers would not bother using them. GDevelop gives a better example of block type - the event driven, condition & action approach is very intuitive and convenient.

Others:
Goo Create (Free & Commercial)
http://goocreate.com/
Goo Create open source online WebGL game editor has a state machine visual programming system.

Get URL and Read URL Parameters in JavaScript, HaXe and AS3

Find the URL of the embedding page of a swf is a very basic way for domain locking flash games. Similar things can be done for JavaScript based online games. To get the URL, in JavaScript you can use

var myURL=document.URL;

In HaXe (targeting JavaScript or HTML5), you can use

var myURL:String=js.Browser.window.document;

In AS3, to find the path url of the swf, you can use

root.loaderInfo.loaderURL;
//or
root.loaderInfo.url;

and for finding the path url of the embedding page, you can use

ExternalInterface.call("window.location.href");

Besides, it's common to see url parameters, for example: "http://mysite.com/index.html?param1=1234&param2=somestr&param2=someotherstr" To read the parameters, in the above example, that is "1234", "somestr" and "someotherstr", in JavaScript, you can use the snippet provided by http://stackoverflow.com/a/979995/1100006 or the function given at http://css-tricks.com/snippets/javascript/get-url-variables
In HaXe, you can use the following HaXe function

//translated from http://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryVariable(variable):String
{
       var query:String = js.Browser.window.location.search.substring(1);
       var vars:Array = query.split("&");
       for ( i in 0...vars.length) {
               var pair:Array = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return("null");
}

In AS3, if the parameters are given in the path of the swf' url, for example, "http://mysite.com/myswf.swf?param1=1234&param2=somestr&param2=someotherstr", or if the parameters are declared in flashvars, then you can simply use "root.loaderInfo.parameters" object to access all the parameters, for example,

var myStr:String = root.loaderInfo.parameters.param1;

However, to read parameters of the embedding page' url, you still need the help of JavaScript, see the following pages for an example:
http://snipplr.com/view/44852/how-to-access-query-string-arguments-with-as3/ http://www.abdulqabiz.com/blog/archives/2006/03/06/how-to-get-url-query-string-variables-within-flex-application/

References:
http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter http://www.javascriptcookbook.com/article/Get-the-current-URL-via-JavaScript
http://stackoverflow.com/questions/2127962/get-current-browser-url-actionscript-3
http://snipplr.com/view/47055/get-url-of-the-page-where-swf-is-embedded/ http://snipplr.com/view/28103/as3-get-url-of-current-flash-movie-swf/

JiuGongGe UI - A Simple Open Source UI Framework in HaXe

JiuGongGe (means 9-cell) UI is a UI framework written in HaXe with OpenFL for all platforms, including Flash, HTML5, Android/iOS and Windows. This UI framework is designed to be lightweight and mobile friendly.

The framework is actually a set of buttons (clickable cells) in a nested hierarchy, with each level containing at most 9 cells. The UI framework is firstly created for the BNote application.

Basic Usage
The framework contains two main classes, "JGGCell" represents a single cell and "JGG" is the whole set of cells. You can customize the look and feel for the cells by modifying and extending the first class. For the most time, you're working with the second class. Firstly, you need to create an instance of the "JGG" class, which is a subclass of "Sprite", so you can add it to the stage and set the positions:

var myJGG:JGG = new JGG();
addChild(myJGG);
myJGG.x = 300;
myJGG.y = 200;

But nothing happens until you initialize the UI:

  
myJGG.init(this,this,Assets.getText("assets/UILayout.txt"));

Where the first parameter is the UI host,usually the parent of the the UI object. All event handler function of the click event triggered by cells should be declared in the UI host as public functions. For example, if you use the stage as the UI host, the following function in your Main class can be used as on click event handler:

 
public function CallBack(event:Event)
 {   
  trace(event.target.name);
 }

The second parameter is the assets host, which will provide the UI framework with icons. The assets host must implement the function "getIcon(ID:String):DisplayObject" as a public method, which will be called by the JGG class to fetch icon resources. For example:

 
public function getIcon(ID:String)
 {   
  return new Bitmap(Assets.getBitmapData("assets/" + ID));
 }

The return value can be a Bitmap, Sprite, or any other display object.

The third parameter is the String of the config file. The cells' hierarchy is declared in the string. Usually, it's better to write the config file in a text file, then you can use "Assets.getText" to get the string and pass it to the JGG's init function, other than directly embed the string content in your code. For each line of the config file, you declare one cell and specify the cell's property. It's not necessary to give all the 9 cells for a level. Just declare used cells only. You should give the following things (with out the "[" and "]") in order and delimited by space:

 
[name_of_cell] [on_click_callback_function_name] [background_color] [icon] [text_label] [index][newline] 

Note strictly one row for one cell, and no spaces within [...] - use "_" or "-" instead. For example,

StartCell JGG_ChangeLevel 0xffffff null Start 0

You can use "#" at the beginning of the line to comment:

# This is a comment line.

Now about some details of each property declaration.
[name_of_cell]: Will be used as the name of the JGGCell class instance. [on_click_callback_function_name]: Use the same name of the public method in the UI host. When the cell is clicked by user, this function will be called. You can use the shortcut string "JGG_ChangeLevel" for folding (for non-center cell)or unfolding (if it is the center cell) levels, without implementing the function in the UI host.
[background_color]: Background color of the cell, e.g., 0xffffff.
[icon]: An ID string used as a parameter of Assets host's public function "getIcon". Use the shortcut string "null" if you want to simply use a text label instead.
[text_label]: This is usually used for debugging or quick prototyping purpose. It's recommended use an icon instead of a text label. You can use "_" for space, "/" for newline in the label string. The label text will shown only if the icon string is "null".
[index]: To give the level information of the cell. For example "0,1,0" - integer sequence separated by ','. It is an array of indices for different levels. "0,1,0" means the cell's index in the root level is "0", in the first level is "1" and in the second level is "0". For each level, there're at most 9 cells, so the indices are all staring from "0" to "8". The cell's position is determined by the index of its last level. Starting from center as "0", go left as "1" then up as "2", then along a clockwise circle to "8".
How to interpret the index: Take "0,2,4,3,5" as an example. Look at the last (5-th) integer "5", it means the cell is in the 4-th level with index "5", so it's position is the center one on the right panel. Now the second last (4-th) integer "3", it means the cell's parent's index (in the 3-rd level) is 3. And the integer "4" means the cells' parent' parent's index is 4... In short, you can think the indices as an index of a multidimensional array, which specifies the position of the the cell in the hierarchy.

For a complete example of the config file, please check: https://flaswf.googlecode.com/svn/trunk/JiuGongGeUI-v0.2/assets/UILayout.txt

Advanced Usage
To change cells' behavior, customize cell's look and feel etc.: You can use public functions foldLevel() and unfoldLevel(TargetCell:JGGCell) to change the levels manually, and getCell(name:String) to get a specific cell. The JGGCell class is a subclass of Sprite, so you can redraw the cell using its Graphics property. See the example's source code for more details: https://flaswf.googlecode.com/svn/trunk/JiuGongGeUI-v0.2/src/Main.hx

Although the UI framework is very simple, I believe it can satisfy the most needs for a simple application with some customization. For example, check the BNote app. However, if you're looking for a more feature complete UI framework in HaXe, try http://haxeui.org/ or http://ui.stablex.ru.

Links:
Flash demo: http://flaswf.googlecode.com/svn/trunk/JiuGongGeUI-v0.2/bin/flash/bin/JiuGongGe.swf
HTML5 demo: http://flaswf.googlecode.com/svn/trunk/JiuGongGeUI-v0.2/bin/html5/bin/index.html
Real Example (BNote): http://bruce-lab.blogspot.com/2014/10/bnote-free-online-taking-handwriting-notes.html
Source Code v0.2 (MIT): https://flaswf.googlecode.com/svn/trunk/JiuGongGeUI-v0.2
SWC for Flash/AS3: http://bruce-lab.blogspot.com/2014/11/jiugonggeswc-jiugongge-ui-for-flash-as3.html

Test Notes on Emscripten

Recently, I tried the Emscripten compiler, which can compile C/C++ to HTML5/JavaScript. Also based on LLVM, it is a similar tool as the Adobe CrossBridge, but targeting a different platform. With Emscripten, it's possible not to write even a single line of JS for creating an HTML5 application. But for CrossBridge, you may still need to write some AS3 to make things work. Emscripten has very good SDL and OpenGL support, so you can compile your SDL/OpenGL application into JS without getting hands dirty of JavaScript.

Emscripten is similar to CrossBridge, in may aspects. For Emscripten, like the CrossBridge, you also need to break the C/C++ main infinite loop and use "emscripten_set_main_loop()" to run the loop content frame by frame. However, CrossBridge supports multi-threads and background workers, which is actually an advantage of AS3 over current JS. Both use similar inline asm (AT&T style) for interlope with the targeting languages. Their ways of dealing with the file system are similar - both use a virtual system to simulate C/C++ reading & writing processes and both provide tools for packaging assets. Besides, both CrossBridge and Emscripten can be used as code obfuscators, Emscripten even use the closure compiler for optimizing and obfuscating the generated JavaScript.

I thought the Emscripten SDK is mature enough. Even Unity3D and Unreal engine are using it for publishing HTML5, after they abandoning FlasCC and the flash platform. Also see the Porting Examples and Demos, especially the amazing Cube2 engine demo (The CrossBridge Cube2 port is not yet rendering correctly). However, in my test, for the latest Emscripten SDK (emsdk-1.21.0-web-64bit.exe), if you want to port your SDL applications or games, very likely, you will fail. That's because the support of SDL, although is working for many cases, is far from complete. What's more, the officially supported SDL version is SDL 1.3, while most old games/application are based on SDL 1.2 and most new ones are based on the latest SDL 2 (There're many API differences among these versions). Many SDL functions are not supported or implemented, such as very commonly used "SDL_DisplayFormat", "SDL_ConvertSurface". So when you compile, you may get "unresolved symbols" warnings and a black screen - the compiled application will just not run. Although there is an unofficial SDL port for Emscripten, I'm not sure whether it is worthy of trying.

Fortunately, Emscripten SDK is under very active development, unlike the almost abandoned CrossBridge. I'm looking forward to a future version with more features and great improvements. By the way, there is an unofficial fork of the CrossBridge SDK, which pulled many things together and collected lots of  examples: https://github.com/crossbridge-community, I'm also watching on the project, hope it will continue to involve.

I think, the same problem for both CrossBridge and Emscripten is, there are not many games/applications written in C/C++ there waiting to be ported to the browser platform, so only a few people are actually using these cross language compilers. The reason is most games written in C/C++ are not designed for the browser platform. So if there exists a tool can compile AS3 to JavaScript, I believe it will be very, very popular. And one factor that Emscripten will be more popular than CrossBridge is that JavaScript is not a suitable language for programming large scale games and applications, but AS3 itself is good enough to handle many large projects.

Free JavaScript Obfuscators

A List of Free JavaScript Obfuscators Compressors, Packers, Encryptors, Protectors, Optimizers!

A free and efficient obfuscator for JavaScript (including ES6):
https://javascriptobfuscator.herokuapp.com/

Web based tool to protect JavaScript code from stealing and shrinks size:
http://javascriptobfuscator.com

JavaScript Obfuscator - JS Packer:
http://packer.50x.eu/

Convert human readable javascript to a more shrouded code:
http://www.daftlogic.com/projects-online-javascript-obfuscator.htm

ObfuscateJS - Javascript Obfuscator:
http://tools.2vi.nl/

Inline JavaScript Obfuscator:
http://www.wiseloop.com/demo/php-javascript-obfuscator
 
JavaScript Obfuscator, Minifier, and Packer:
http://www.addressmunger.com/javascript_obfuscator/

YUI Compressor by Yahoo:
http://yui.github.io/yuicompressor/

JavaScript Utility:
http://jsutility.pjoneil.net/

A JavaScript Compressor, version 3.0:
http://dean.edwards.name/packer/
https://github.com/jcoglan/packr

Javascript-Encrypter:
http://www.toolzzz.net/en/jsPacker.htm

Javascript Obfuscation and Compression:
http://www.obfuscriptor.com/ 

Free online javascript and html obfuscator:
http://obfuscatorjavascript.com/

Hackvertor:
http://www.businessinfo.co.uk/labs/hackvertor/hackvertor.php

Free online html/js obfuscator:
http://htmlobfuscator.com/

JSMin - The JavaScript Minifier:
http://www.crockford.com/javascript/jsmin.html

HaxMin - JavaScript obfuscator, powered by Haxe, intended for use with Haxe-generated JavaScript code:
https://github.com/YellowAfterlife/HaxMin

JavaScript minification:
http://marijnhaverbeke.nl/uglifyjs

The impressive js segment compiler:
http://player.opengg.me/js.segment.compiler/

A JavaScript optimizer by Google:
https://developers.google.com/closure/?csw=1

A JavaScript optimizer by Facebook (update on 2017/5/4):
https://prepack.io/

Want to test the results? Try the following de-obfuscator (Via http://stackoverflow.com/a/6010218):
http://jsbeautifier.org/
https://beautifier.io/

A review and how to combine the power of multiple obfuscators:
http://techyzilla.blogspot.com/2012/09/better-javascript-obfuscating-method-to-protect-your-code.html

Code Protection and Packaging for Node.js Projects with JXCore:
http://flippinawesome.org/2014/04/21/code-protection-and-packaging-for-node-js-projects-with-jxcore/

JS & CSS Minifier:
https://www.websiteplanet.com/webtools/jscssminifier/

Links:
http://javaencrypt.com/
http://m.cg/post/18769268750/why-javascript-obfuscation-is-not-just-pointless-but
http://www.mcdonaldland.info/2008/07/03/writing-a-javascript-obfuscator
http://stackoverflow.com/questions/522064/what-is-the-best-javascript-obfuscator
http://stackoverflow.com/questions/194397/how-can-i-obfuscate-javascript
http://www.codeproject.com/Articles/863295/Hack-proof-your-Javascript-using-javascript-Obfusc
http://dean.edwards.name/
https://codebeautify.org/

Feel free to share your tools/opinions in the comments!

Jquery Turn on/off Lights Effect

I found the script to create simple turn on/off lights effect for web pages here: http://www.emanueleferonato.com/2009/10/12/jquery-powered-lights-off-effect/
It use jquery to achieve the effect. The idea is to create a css as the light which covers the page.
However, the original script has several problems:
1. The light can only cover the screen, not the full page.
2. Links and texts are not selectable.
3. Embeded swf will be covered.

The solution to the first problem: http://stackoverflow.com/questions/2852276/make-div-overlay-entire-page-not-just-viewport
For the second, there is a fix in the comments below there. And the third one, for swf, I defined a new css which will not be covered (higher z-index) and use jquery to change its background to black when turning off the lights.

The final enhanced version:
Demo
Source Code
(Scroll down to the bottom of page, click Lights off/Soft lights/Lights on to see the effect, right click to view source.)

Links:
http://jquery.com/

Ken Silverman's GROUFST2 Terrain Raycaster Ported to AS3

Ken Silverman's GROUFST2 Terrain Raycaster - wonderfl build flash online

Simple nice heightmap terrain raycaster, a good start for your own voxel engine.
Fork it here:
http://wonderfl.net/c/7d41
or
http://flaswf.googlecode.com/svn/trunk/GROUFST2/
==========
Update: April, 4，2011
GROUFST2 Ported to HaXe(Supporting targeting swf and cpp both):
Source Code: https://flaswf.googlecode.com/svn/trunk/GROUFST2/Groufst2HXNME
==========
Update: 11, 11，2011
Add HTML5 support:
Source Code: https://flaswf.googlecode.com/svn/trunk/GROUFST2/Groufst2HXNME/Groufst2NME_HTML5/
DEMO:  https://flaswf.googlecode.com/svn/trunk/GROUFST2/Groufst2HXNME/Groufst2NME_HTML5/Export/html5/bin/index.html (Very, very slow.)
==========

Original source code can be found at Ken's website:
Qbasic: http://www.advsys.net/ken/voxlap.htm (GROUFST2.BAS)
EVALDRAW: http://www.advsys.net/ken/download.htm (evaldraw.zip\demos\groufst2b.kc)

And

Happy Coding 2011!