Misconceptions about JavaScript arrays and keyval.js
Posted by scaraveos | Filed under Coding, Quick Guides
There are many occasions where I’ve found myself using a JavaScript object for associating key value pairs, that’s the only way in JavaScript to do this (or correct me if I am wrong). Arrays only store indexed values.
Common misconceptions
Imagine you want to store non-incremental numeric user ids as keys and the user information as the value. You might as well go and do this:
var arr = [];
arr[8372395] = {... user information properties here ...};
arr[5477842] = {... user information properties here ...};
arr[1264957] = {... user information properties here ...};
This will work and yield no error BUT, you just implemented a sparse array. An attempt to loop this array will be far more slower than that of a dense array:
for (var i = 0; i < arr.length; i++) {... will loop 8372395 times ...}
A more efficient way to do this is by looping through the properties of the array:
for (var i in arr) {...}
This, depending on how sparse is the array could be faster or slower. The reason is that the for … in loop will have to discover the properties one by one instead of just walking the array. Furthermore, it will access prototype inherited properties and methods that will trigger unwanted behaviour. To avoid that, the following check is required:
for (var i in arr) {
if (arr.hasOwnProperty(i) {...}
}
Unfortunately this will only add more overhead to your loop resulting to even slower iterations for large data sets.
Another misconception is trying to store string keys in an array:
var arr = []; arr['one'] = 1; arr['two'] = 2; arr['three'] = 3; console.log(arr.length) // 0
Now why the length is zero? As I wrote earlier, JavaScript arrays are indexed. Any attempt to store associative pairs will result in those pairs to be stored as object properties. You will now have to use a for … in loop to iterate through the array object properties. The result will be the same as previously said.
Solution
A solution to the problem described above when working with large data sets would be to define a minimal structure to handle the key value pairs.
One way to go with this would be implementing a doubly linked list for storing nodes (value containers) and at the same time maintaining an object for associating keys with the nodes. The linked list will be used when iterating, resulting in fast iterations, and the object will be used for directly accessing node values. The structure will also have a length property to reference.
keyval.js: a fast key value library
I implemented the above solution and I named it keyval.js. In the benchmarks I wrote the implementation was closely as fast as an array, and 5 to 15 times faster than an object when iterating.
You can find it on GitHub: https://github.com/scaraveos/keyval.js
Please fell free to submit any issues you found or fixes and improvements :]
Tags: array, javascript, key value, keyval.js, sparse
3d <foo>: a multiplayer 3D game prototype for the browser
Posted by scaraveos | Filed under Experiments
See it in action - Works with Chrome 9+ and Firefox 6+
Technologies
This experiment was build completely using JavaScript. Everything you see on your browser when playing is based on a new web standard, WebGL. The multiplayer part of the game is a robust client – server communication implementation developed using an other new web standard, WebSocket, and a custom Java game engine on the server side.
WebGL is based on OpenGL ES 2.0 and provides rendering capabilities by utilizing the hardware graphics card of your system. This is good because your CPU can focus on other tasks.
“WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket” – Wikipedia
Since WebSocket is not performing HTTP requests you get faster communication. At the same time, the browser doesn’t have to issue a server request to get information from the server; the server can communicate with the browser at any time. You can imagine the future of this in applications such as games and stock trading.
To make my life easier, I decided to use two frameworks that wrap those standards. The first one is three.js which is a JavaScript 3D engine and the second one is jWebSocket which is a framework for utilizing WebSocket with a Java server.
Game logic
The game is supposed to be a social game. You login using Facebook or Twitter. Every friend you have on that social network, if playing the game, will be on the same team as you are. The rest are enemies. You get points and more life per kill and you can’t shoot relatively weak players. In the future, I will be adding more features, most of them can be found here along with the source code: https://github.com/scaraveos/3dfoo#readme
Getting a working copy
The code found on the link provided above reflects the code that runs on the live version but, right now, simply cloning it won’t make it work. I plan on writing a build script in the future but until then, feel free to contact me if you want to get it working locally.
Tags: java, javascript, jwebsocket, python, three.js, webgl, websocket
tagspace: a tags visualization widget
Posted by scaraveos | Filed under Experiments
See it in action – Sorry Internet Explorer, you don’t support this
Description
The idea behind this is to create a different visual experience for displaying tag clouds (ie. as seen mostly in blogs).
Stars represent tags and the bigger their size the more articles they have associated with them.
Once a star is clicked, the star will move to the center of the canvas and orbits will appear. Orbits represent some important articles associated with the selected tag.
Finally, clicking an orbit will take you to that article.
The source code can be found here https://github.com/scaraveos/tagspace
Tags: canvas, javascript, space, tags, tagspace
WebGL scene with camera elevation and steep areas detection
Posted by scaraveos | Filed under Experiments
See it in action – Works with Chrome 9+ and Firefox 6+
Description
Playing around with WebGL, three.js and blender. I wanted to create a scenery and texture within blender and pass it over to three.js. The result is fine, but I am sure there are better ways to use textures.
I also implemented steep areas detection and prevented the user from moving forward if detected. Again, not as good as it should be but this is an early experiment :]
Instructions
Use buttons WASD on the keyboard and your mouse to move around.
Note: the 8MB texture might take some time to load depending on your connection.
Tags: blender, javascript, three.js, webgl
WebGL simple objects with movement
Posted by scaraveos | Filed under Experiments
See it in action – Works with Chrome 9+ and Firefox 6+
Description
My first WebGL experiment. Made while learning WebGL at http://learningwebgl.com/blog/
I put together a triangle and a square and movement using the keyboard :]
Tags: javascript, shaders, webgl
Solarsystem 2D
Posted by scaraveos | Filed under Experiments
See it in action – Works with Chrome and Firefox
Description
This is the test I took for the job I am currently employed.
It is using PHP to generate the coordinates and JavaScript for displaying the orbits and bodies.
Never worked before on canvas but Google and some tutorials I fell upon some months ago gave me all the insight I needed :]
Tags: canvas, javascript, php
A generic Go WebSocket server
Posted by scaraveos | Filed under Coding
Go is a relatively new programming language developed by Google. More about Go at http://golang.org/.
I needed a WebSocket server to build a messaging server and Go sounded like a nice new lang to play with. Plus it has a WebSocket package to make things easier.
The server is merging all connections in a connection pool. Upon message receipt it iterates the connections and sends the message to each connected client.
The up to date code can be found on Github.
Tags: go, golang, relay, websocket
Connecting to MySQL via SSH tunnel using the command line
Posted by scaraveos | Filed under Quick Guides
Open up your favorite terminal and type the following command to switch on the tunnel:
$ ssh -f -N -L 9999:mysql.host:3306 user@ssh.host
At this point the tunnel is ready.
Now you can execute the following command to connect to the mysql server
running at mysql.host:
$ mysql -h localhost -P 9999 -u user -p
Enjoy!
Some quick details about the commands:
Running the first command binds the port 9999 of your machine to the
port 3306 of the mysql.host hidding behind the SSH server at ssh.host.
The second command simply connects to the port 9999 at your machine
which is binded to the port of the MySQL server you are trying to access.
Running a “Hello, World” program with C++
Posted by scaraveos | Filed under Quick Guides
Depending on your operating system you may or you may not have C++ tools
installed already. Install them if not.
Use your favorite text editor, open an empty file and
paste the following piece of code:
#include <iostream>
int main()
{
std::cout << "Hello, World!\n";
return 0;
}
Now save the document as hello-world.cpp and using the command line
within the same directory you saved hello-world.cpp compile your code:
$ c++ hello-world.cpp -o hello-world
The above will create an executable named hello-world.
To run it simply type the following:
$ ./hello-world
You should be able to see the “Hello, World!” message.
Some quick details about the code:
Line 1: lines that begin with # are used to supply
instructions to the preprocessor.
This line instructs the preprocessor to include the
contents of iostream to your program.
Line 3: this is the entry point of your C++ application.
Each C++ application must have only one main method.
The keyword int at the beginning of the line is used to
specify that this method will return an integer value.
Line 5: a simple statement to send the stream of characters
specified to the standard output.
Line 7: you should return 0 at the main method to imply
successful termination of your program.
Tags: c++, cpp, hello, hello world, world
Setting up a simple python wsgi application on Fedora
Posted by scaraveos | Filed under Quick Guides
The first step would be to install httpd and mod_wsgi.
Install both by typing the following command:
$ yum install httpd mod_wsgi
Go to /etc/httpd/conf/httpd.conf or /etc/httpd/conf.d/wsgi.conf
and make sure that mod_wsgi is enabled.
You should be able to see the line below:
LoadModule wsgi_module modules/mod_wsgi.so
Now create the folder for your wsgi application:
mkdir /var/www/html/my-wsgi-app
Next we need to create the wsgi application itself.
Create a file called hello-world.wsgi and drop the following
contents inside it:
def application(env, response):
status = '200 OK'
output = 'Hello, world!'
headers = [('Content-type', 'text/plain'),
('Content-Length', str(len(output)))]
response(status, headers)
return output
Last step is to add a VirtualHost in /etc/httpd/conf/httpd.conf
<VirtualHost *:80> ServerName my.domain.name WSGIScriptAlias /hello-world /var/www/html/my-wsgi-app/hello-world.wsgi <Directory /var/www/html/my-wsgi-app> Order allow,deny Allow from all </Directory> </VirtualHost>
Start httpd:
$ /etc/init.d/httpd start
Finally, go to http://my.domain.name/hello-world and enjoy your wsgi application.
