More Interesting Javascript Libraries

JQuery - Spark Lines - http://omnipotent.net/jquery.sparkline/#s-about - free

Peity - Spark Lines - http://benpickles.github.io/peity/ - free

SigmaJS - Draw Graphs/Node Map - http://sigmajs.org/ - free (might be nice to draw an AI's node interface)

D3js - Just cool - http://d3js.org/

http://www.profitspi.com - Stock Analyser Site

Jquery Dashboard Library - http://cube3x.com/sdashboard-simple-jquery-dashboard-plugin/

JS Starfield

The following will create a flowing field of stars on a black background. Used the HTML5 Canvas element to create this effect:

<script>

var canvas = "";
var context = "";
var stars = new Array();



function loadStarfield()
{
canvas = document.getElementById("canvas_starfield");
context = canvas.getContext("2d");

addNewStars(100);

//stars[stars.length-1].starSize = 50;
//stars[stars.length-1].drawColor = "#333";
//stars[stars.length-1].position.x = -10;
//stars[stars.length-1].position.y = 150;
//stars[stars.length-1].velocity.x = 1;


starfieldLoop();

}


function starfieldLoop()
{
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);

for(var i=0;i<stars.length;i++)
{
drawStar(stars[i]);
stars[i].animate();
}

window.requestAnimationFrame(starfieldLoop);

}

function drawStar(star)
{
  var position = star.position;
  context.fillStyle = star.drawColor;
  context.beginPath();
  context.arc(position.x, position.y, star.starSize, 0, Math.PI * 2);
  context.closePath();
  context.fill();
}




function addNewStars(numStars)
{
for (var i = 0; i < numStars; i++)
{
stars.push(new Star());
}
}

function Star() {
  this.position = new Vector(randBetween(0,canvas.width),randBetween(0,canvas.height)); // Vector
  this.velocity = new Vector(randBetween(1,5),0);
  var c = randBetween(0,9);
  this.drawColor = "#FFF"; //"#" + c + "" + c + "" + c; // So we can tell them apart from Fields later
  this.starSize = randBetween(1,1);
}

Star.prototype.animate = function()
{
this.position.add(this.velocity);

if(this.position.x > canvas.width)
{
this.position.x = 0;
}
}



//////////////////////////////////////////////////////////////////////////////////////////////
//
// Utils
//
//////////////////////////////////////////////////////////////////////////////////////////////
function randBetween(min, max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}

function Vector(x, y) {
  this.x = x || 0;
  this.y = y || 0;
}

// Add a vector to another
Vector.prototype.add = function(vector) {
  this.x += vector.x;
  this.y += vector.y;
}

// Gets the length of the vector
Vector.prototype.getMagnitude = function () {
  return Math.sqrt(this.x * this.x + this.y * this.y);
};

// Gets the angle accounting for the quadrant we're in
Vector.prototype.getAngle = function () {
  return Math.atan2(this.y,this.x);
};

// Allows us to get a new vector from angle and magnitude
Vector.fromAngle = function (angle, magnitude) {
  return new Vector(magnitude * Math.cos(angle), magnitude * Math.sin(angle));
};

</script>

<canvas id="canvas_starfield" width="600" height="300"
style="
border:5px solid black;">
</canvas>
<script>
loadStarfield();
</script>

Jarvis - A chatterbot

If you didn't know AI (artificial intelligence) has become a bit of a hobby of mine. In an effort to explore the domain, I thought that I would throw together a little chat bot.

He's based off of the original chat bot, ELIZA.

I have/had a lot of thoughts of the direction I could take this in, but I wanted to get a version 1.0 all wrapped up and released before taking on other challenges.

You can chat with Jarvis at: www.mobeamer.com/lab/jarvis/

Some fun facts:

• Jarvis was named after the AI in Iron Man
• My 11 year old son, taught Jarvis a few key sayings
• Sometimes Jarvis is incredibly stupid
• Jarvis has a fully built out relationship model for words, key phrases and responses.
• Jarvis can learn from chatting with other users

Some thoughts on what to implement next:

• Allow Jarvis to "read" or learn from websites (Wikipedia)
• Allow Jarvis to formulate higher "concepts" where responses are all connected via a single word or key phrase.
  
• Allows users to chat with other users and Jarvis at the same time and ask them to spot Jarvis in the crowd
• Allow Jarvis to get happier the longer someone chats with him
• Add some type of visual representation of Jarvis
  

Intro to Data Warehouses

This is a recent presentation I gave on data marts and data warehousing techniques. This only scratches the surface and there are a loot of places to dive deeper.


Date Warehousing

Artificial Intelligence - Evaluators

So we discussed how the Ai will sense the world and we have discussed how it will interact with the world. How will it bridge the gap and make intelligent interactions based on what it has sensed?

Before we can cover that you have to understand that the Ai Brain is actually made up of a number of parts. Some folks would consider each of these parts as Agents or AI themselves. I will leave that debate to others that are wiser than me.

For my purposes I call them Evaluators. The Ai Brain consists of many of them. Each Evaluator is responsible for performing the following:

• It takes data in, the data will always be in a rawest form
• It attempts to understand this data
• It will understand the data if it knows an motor action that can be given performed based on the input
• Or it knows a memory object that needs to get created based on this action
• Or it knows another evaluator that will understand this data
• If it knows a motor action to perform based on the input, it will place the motor action on the motor stack
• If it knows a memory object that needs to get created it will create the memory object*
• If it knows another evaluator that will understand this data it will pass this “suggestion” along. **
  

Note that a sensor stack item may be sent to multiple evaluators. Some evaluators will be better at some things then others and usually there is a “best” evaluator for each type of data on the sensor stack. We will talk about this more later.

Example evaluators:

• Language evaluator - responsible for holding conversations
• Math Evaluator – responsible for performing calculations
• Image Evaluator – responsible for identifying an image
• Knowledge Evaluator – responsible for identifying relationships between objects

I would imagine that at some point the Ai brain may create its own evaluators by combining or altering existing evaluators. We will talk on this further as well.

* See memory creation post (tbd)
** See brain evaluator selection post (tbd)

Artificial Intelligence - Motors

So, we defined how the Ai will monitor and sense the world, how will it interact with it?

This happens almost in the reverse of what happens with sensors.

This time we start with the Motor Stack. The Ai places some data and a motor ID on the stack. As it “thinks” about additional task it keeps adding stuff to the stack.

Motors will continually do the same thing.

• Look on the stack for an action with their identifier.
• Take the data and perform their action.
• Repeat.

What can a motor do? Anything. The simplest of motors may be responsible for taking text and putting it in a textbox for a user to see. A more complex motor may take an filename and display the contents of the file to a user. An even more complex motor may take a formula and graph it over time, sort of like your old T1 calculator.

Artificial Intelligence - Sensors

Sensors

So without senses we, humans, would not be able to function. Much less be considered “intelligent”.

In the same fashion our Ai needs a way to sense changes in it’s environment.

Think of a sensor, as a program that sits outside of the Ai brain. They monitor the environment and then pass data from those changes to the brain. So, the Ai will have a number of these sensors that will monitor the environment. T

How it works:

Step 1: Some change takes place within the environment of the Ai. For Example: A text box has “Hi” typed into it.

Step 2: The sensor detects the change and gathers the data. For Example: “Hi” is saved as data

Step 3: The sensor sends the data into the Ai. This is where the data crosses into the Ai’s brain.

Step 4: The Ai, takes the raw data and the sensor ID and puts in on the bottom of the sensor stack. The sensor stack is a “list”/stack of data which the Ai has done nothing with yet.

Some Points to Ponder:

Sensor ID: Each sensor must have a unique identifier. This is essential for the Ai as it will learn to do different things with this sensor’s data. Now just because the sensor ID is constant does not mean the sensor has to watch the same point in the environment. In the above example, the sensor could go from textbox to textbox taking in the data.

Sensor Stack: The sensor stack has all data points from the sensors which the Ai has not processed yet. This is critical as the Ai may let data stack up till it all make sense to it.

The next post will discuss how the Ai will use the stack to decide on actions.

Artificial Intelligence - Take One

The next few posts will be about a proposal for an Artificial Intelligence (Ai) system. It’s based on many things I’ve read around the internet as well as my own general ideas on how such a system needs to be made.

My goal is to detail the system in a few articles and then attempt to build it. If given time, a thing I have precious little of these days.




This shows the basic concept of the AI. As you can see it’s made up of 4 components. We will talk about each component in depth but from a high level you have:

Sensors – Track and record changes in the environment. This would be the point at which data enters the Ai’s consciousness. An Example: A sensor may be responsible for tracking a single text box on a given web page.

The Brain – This is where all the interesting stuff takes place, stay tuned. An Example: The brain may decide that in response to text entered it should display a picture.

Motors – The brain will issue simple commands which the motors will execute on. Motors will perform actions on the environment. An Example: A motor may be responsible for displaying a picture to a webpage.

Memory – Pieces of data and how the brain acted upon this data are stored in memory. Later on I will go further in depth with what will happen here. An Example: The word “Hi” might be stored in memory as well as the fact that the brain responded “Hi” back to it.

Some things to keep in mind:
This is an all-purpose form of intelligence, it’s not what many would consider a knowledge based system, or built to be superb in a specific category. In fact, I predict that this brain will not be superb at anything, but rather much like the majority of humans, it will be sufficient at being adequately productive.

My goal is to build an Ai which can function in the same capacity as an average human. Think of the Turing test but including tasks rather than chat.

My measure of success: If the program can return/perform in such a fashion that I can’t tell the difference between it and a human, I will have succeeded.

Server and Client Communications (Sort Of)

In a typical gaming environment there is a "game server" which is responsible for tracking all the communications between players (clients) within the game. Communications can be considered anything from the chat function, to the location of bullets within the game. Pretty much any piece of data that one player needs to send to another goes through the game server.

(That was in its simplest form, it is more complicated than that...go google it)

With a PBBG it gets a little tricky because there is no game server in play, its all cron jobs and reactions to players. (This is due to web development being "stateless"....again go google it, its why web programming is "different")

I use the following code to send interactions between two or more players. Pretty much you have a table that translates the game commands to each player...however the client code (javascript) has to be a bit smarter to handle the "statelessness" of the content)

See it in Action (note, you will have to enable popups)

If you want to implement it, you will need to create the following two tables.

User Table: Hopefully you allready have one of these, if so just add lastCommID to it.

CREATE TABLE `lab_user` (
`userID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`userName` VARCHAR( 20 ) NOT NULL ,
`lastCommID` INT NOT NULL
) ENGINE = MYISAM ;

Command Table: "Meat of the code"

CREATE TABLE `lab_command` (
`commID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`userID` INT NOT NULL ,
`command` VARCHAR( 20 ) NOT NULL ,
`commandOptions` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM ;

You can download the source here.

Please keep in mind...USER IDs are HARD CODED in the source...you will need to config/play with that yourself.


For those that just like to "look". Here is some javascript....

var xmlHttpDivID = "";
var ajaxInUse = false;
var readyToSend = true;

function getXmlHttpObject(handler)
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

if(objXMLHttp == null)
{
alert("Your browser is not AJAX/Web 2.0 enabled");
}

return objXMLHttp;
}

//////////////////////////////////////////////////////////////////////////
//
//
// Sending the commands to the server
//
//
//
//////////////////////////////////////////////////////////////////////////
function mouseClicked(e)
{
if(readyToSend)
{
pos = getMousePos(e);
sendCommand("move", "player_|" + pos[0] + "," + pos[1]);
}
else
{
log("Waiting for a listener!");
}
}

function sendCommand(command, options)
{
if(!ajaxInUse)
{
ajaxInUse = true;

xmlHttp=getXmlHttpObject();
xmlHttp.onreadystatechange=commandSent;

url="commandHandler.php?action=sendComm";
url+="&userID="; //very bad, change this for testing...
url+="&command=" + command;
url+="&options=" + options;
url+="&cache_killer=" + Math.random();
xmlHttp.open("GET",url,true)
xmlHttp.send(null);
log("Command Sent");
}
else
{
log("Ajax is in use...try later");
}
}

function commandSent()
{
if (xmlHttp.readyState==4)
{
log("Command Sent and Done");
ajaxInUse = false;
}
}



//////////////////////////////////////////////////////////////////////////
//
//
// Reading Commands from the server
//
//
//
//////////////////////////////////////////////////////////////////////////
var commTimerID = "";

function startListening()
{
requestNextHttp=getXmlHttpObject();

url="commandHandler.php?action=start";
url+="&userID="; //very bad, change this for testing...
url+="&cache_killer=" + Math.random();
requestNextHttp.open("GET",url,true)
requestNextHttp.send(null);
//log("Ask for next command");
requestNextCommand();

}



function requestNextCommand()
{
requestNextHttp=getXmlHttpObject();
requestNextHttp.onreadystatechange=processCommand;

url="commandHandler.php?action=getComm";
url+="&userID="; //very bad, change this for testing...
url+="&cache_killer=" + Math.random();
requestNextHttp.open("GET",url,true)
requestNextHttp.send(null);
//log("Ask for next command");
clearTimeout(commTimerID);
}

function processCommand()
{
if (requestNextHttp.readyState==4)
{
str = requestNextHttp.responseText;

if(str != "")
{
log2(requestNextHttp.responseText);
performCommand(str);
}

commTimerID = setTimeout("requestNextCommand()", 3000);
}
}

function performCommand(str)
{
data = str.split("|");

if(data.length > 2)
{
commID = data[0];
sentByUserID = data[1];
command = data[2];

if(command == "move")
{
objID = data[3];
pos = data[4].split(",");
destX = pos[0];
destY = pos[1];
log("Moving " + objID + " to " + destX + "," + destY);
setDest(objID, destX, destY);
}
}
}



//
//add the event to the document
//
document.onclick = mouseClicked;
document.onload = startListening();

Tool - Popup builder

An very old bit of code, written before popups were considered a curse.

This tool will allow a user to build their own popup screen and handler.

Again bit old, but I thought I'd put it out there.

View the Tool

Tool - Creating Drop Down Menus

Another experiment for the lab. I got a bit tired of creating those drop down menus by hand, so I built this page to help me create them.

Looking back, I could have built a code snippet or macro to do the same thing, but this was more fun to build.

All HTML and javascript.

Feel free to use and modify for your own use.

Right click and "View Source" to get code.

Drop Down Builder

Code - Javascript Animation

Many moons ago, I wrote this small library package. It handles a number of interactive functions that one might use on a Web 2.0 site.

It's not fully tested but I use parts and pieces of it quite often.

I figure that if anyone else finds it useful they might like to look at it. Especially those new to programming.

The most interesting is an animation function which allows you to set the velocity of a div tag and then watch it zoom around the screen.

Most functions are multi-browser compatible, I think one if IE only though.

Feel free to use for any of your projects. A link would be nice but not mandatory.

Source Available

Path Finding in Javascript

I went back to the Lab (cause I needed to get my mind off the job). I decided to write a path finding algorithm in javascript.

I used my typical map setup. I found some pseudo-code for the A* path finder. I did the best I could (there was a heuristic in that pseudo code that I could not quite duplicate)

Anyway, it seems to work nicely. It does not find the shortest path, but it does find a path.


Feel free to use it for your own usage.

One Note: It uses a recurring function, I limited it to 40 loops. If you have a large map, you may need to up this a bit.

Take a Look

Source Code