Code: Simple 2D Javascript Map - Part 3

All right, let's put a character on the board!

It's not difficult, first we create a function that will add the character for us. So we know that we will need to know the following:

• A distinct ID for the unit (unitID)
• The x and y of where to place the unit.
  

Things to note:

• We have to get the tile at X, Y.
• We set the new div's tile to the Top and Left of the tile
• We give the div tag a distinct "ID"
• We give the new div tag a class of "unit"

function addUnit(unitID, x,y)
{
 var d = document.createElement("DIV");
 var tile = document.getElementById("tile_" + x + "_" + y)
 d.className="unit";
 d.setAttribute("ID","unit_" + unitID);
 d.style.top = tile.style.top;
 d.style.left = tile.style.left;
 d.style.width = tileSize;
 d.style.height = tileSize;
 document.getElementById("divMap").appendChild(d);
}

We've created a new css class "unit" so we need to add the following to our styles:

.unit {
background:green;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}

Finally, we actually add the unit to the map when the body is loading.

</script>
<body onload="buildMap(10,10); addUnit(1000,4,4)">

So the full page, looks like this...

<html>
<style>
.tile {
background:#BBB;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}

.unit {
background:green;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}
</style>
<script language=javascript>

var originX = 0;
var originY = 0;
var tileSize = 32;

function buildMap(width, height)
{
for(x=0;x<width;x++)
 for(y=0;y<height;y++)
 {
  var d = document.createElement("DIV");
  d.className="tile";
  d.setAttribute("ID","tile_" + x + "_" + y);
  d.style.top = originY + (y*tileSize);
  d.style.left = originX + (x*tileSize);
  d.style.width = tileSize;
  d.style.height = tileSize;
  d.setAttribute("onclick","tileClicked(" + x + "," + y + ")")
  document.getElementById("divMap").appendChild(d);
 }
}

function tileClicked(x,y)
{
 var tile = document.getElementById("tile_" + x + "_" + y)
 tile.style.background = "yellow"
}

function addUnit(unitID, x,y)
{
 var d = document.createElement("DIV");
 var tile = document.getElementById("tile_" + x + "_" + y)
 d.className="unit";
 d.setAttribute("ID","unit_" + unitID);
 d.style.top = tile.style.top;
 d.style.left = tile.style.left;
 d.style.width = tileSize;
 d.style.height = tileSize;
 document.getElementById("divMap").appendChild(d);
}

</script>
<body onload="buildMap(10,10); addUnit(1000,4,4)">

<div id="divMap"></div>

</body>
</html>

Code: Simple 2D Javascript Map - Part 2

So, we've built a map in javascript and displayed it. Quite impressive...or maybe not.

Now we want to make something happen when the user clicks on a tile. In this example, we will change the background. First we add a simple function which we will call whenever a tile is clicked.

function tileClicked(x,y)
{
   var tile = document.getElementById("tile_" + x + "_" + y)
   tile.style.background = "yellow"
}

Now, we will attach this function to all the tiles, so within our buildMap() function we add this line of code:

d.setAttribute("onclick","tileClicked(" + x + "," + y + ")")

That's it...now when you click a tile, it turns yellow. Why don't you try to change it so that the background has an image and the image changes as you click it?

Full Code:

<html>
<style>
.tile {
background:#BBB;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}
</style>
<script language=javascript>

var originX = 0;
var originY = 0;
var tileSize = 32;

function buildMap(width, height)
{
for(x=0;x<width;x++)
 for(y=0;y<height;y++)
 {
  var d = document.createElement("DIV");
  d.className="tile";
  d.setAttribute("ID","tile_" + x + "_" + y);
  d.style.top = originY + (y*tileSize);
  d.style.left = originX + (x*tileSize);
  d.style.width = tileSize;
  d.style.height = tileSize;
  d.setAttribute("onclick","tileClicked(" + x + "," + y + ")")
  document.getElementById("divMap").appendChild(d);
 }
}

function tileClicked(x,y)
{
   var tile = document.getElementById("tile_" + x + "_" + y)
   tile.style.background = "yellow"
}


</script>
<body onload="buildMap(10,10)">

<div id="divMap"></div>

</body>
</html>

Code: Simple 2D Javascript Map

A friend of mine asked me what is the quickest, simplest way to create a 2d map. Think top down, grid like map.

Here is 35 lines of javascript code that will do just that. Enjoy...

<html>
<style>
.tile {
background:#BBB;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}
</style>
<script language=javascript>

var originX = 0;
var originY = 0;
var tileSize = 32;

function buildMap(width, height)
{
 for(x=0;x<width;x++)
  for(y=0;y<height;y++)
  {
   var d = document.createElement("DIV");
   d.className="tile";
   d.setAttribute("ID","tile_" + x + "_" + y);
   d.style.top = originY + (y*tileSize);
   d.style.left = originX + (x*tileSize);
   d.style.width = tileSize;
   d.style.height = tileSize;
   document.getElementById("divMap").appendChild(d);
  }
}


</script>
<body onload="buildMap(10,10)">

 <div id="divMap"></div>

</body>
</html>

Artificial Intelligence - Dreaming and Learning

So last but most importantly, what does the Ai do when its sensors are detecting nothing?

It has two options.

Use Active/Aggressive sensors
The first is to turn on some active sensors. We can assume that some sensor it has can “roam” or find new views of it’s environment. Let’s say we have a web parsing sensor, it reads HTML and brings back links. This sensor would not be active unless there is nothing else going on. The Ai could decide to activate it. There could be an array of these type sensors.

Dream
The second option that it has is to dream. When dreaming the Ai will:

1. Search it’s Long term memory for a random data variable
2. Use this data and feed it to a all Evaluators except for “the best”.
3. Any evaluator that understood the data gets a chance to process it
4. Any evaluator that understood the data would get passed additional data elements that are “similar” to the original”

Doing this allows the Brain to evaluate if it’s truly has the best evaluator and sensor collaborated.

Artificial Intelligence - Memory Management Example

So, let’s image that its time to bring the Ai Online. We’ve built all the components and we’re ready to go.

Here’s how the first 1,000 interactions with if the Ai was only attached to a “Textbox” sensor.

Definitely take a look at the picture as it conveys a lot more but briefly:

“Hi” comes through the textbox sensor, the Ai stumbles through Evaluators till it hits the Language one, which say “I understand this data”, the Ai says ok and lets the evaluator do its thing.

The next time the textbox sensor fires off, the Ai gives it to the only Evaluator it knows Language, language handles things smoothly. This takes place 999 times.

However on interaction 1,000 along comes a math request “3+9”. The language evaluator says…Ummm, no I can’t do anything with this. Again the Ai stumbles around until it hits the Math evaluator, who says, yeah…I can do something with it.

Now when textbox fires off, the brain will randomly ask Math…Do you understand this stuff…If Math says yes, the Brain lets it handle the text. If the Math says “no”, brain turns to Language and passes stuff off.

Summary
This is not the most efficient way and if you notice it never actually pattern matches against what comes in on the textbox sensor.

However, if a different sensor is setup for math functions this approach would lead to an efficient Ai. Math coming across a speech/text sensor would be like being asked does this spell BLUE. Humans can do it, its just…odd, thus we are more likely to answer incorrectly.

Artificial Intelligence - Memory Management

Let’s talk Memory,

A Brain is going to have to recall things, store numbers, understand relationships and all sorts of stuff that deal with “recall”. This is where the memory module will come into play.

Memory will consists of 4 pieces. All parts of the memory are available to the Brain and the Evaluators. Memory is not available to sensors and or motors.

Short Term Memory
Short term memory is for swift, context based data. It will consist of a Sensor ID, the data, a timestamp, and number of times accessed counter. At first this will be a straight copy of the sensor stack. However it will change over time. The number of items/rows in short term memory will be dictated by the amount of time it takes to search it and retrieve a specific piece of data. For example, if a query against short term memory takes longer than 100 milliseconds, the memory handler will move the 10 least accessed memories to long term memory.

Long Term Memory
Long term memory will look just like short term memory. Sensor ID, data and timestamp for when it came in. However Long term memory will have a different requirement, when searching long term memory takes more than 10,000 milliseconds, delete 10 of the least access memories.

Note: This means that the Ai’s memory will only be as good as it’s architecture. The faster the searching the more memory that the Ai can have in it’s short term memory.

Action Memory
Action memory records the chain of events that occurred from the data coming in to the motor response. It’s purpose is to help the Ai choose which evaluator to send sensor data to.

Every time the Brain sends data to an Evaluator it will check to see if the sensor and evaluator exists in the Action memory:
If it does not the Brain will insert a new row
If it does, the Brain will increment the number of attempts


When an Evaluator receives data, during its processing it will:

• Increment the understood column for all rows where the same sensor and evaluator are specified
• If a row does not exist for the motor used, the evaluator will insert a new row with that motor in it.

The success rate is simply a calculation of attempts/understood.

Technical Note: The Action Memory table is not normalized (its flattened), this is intentional as the inserts will be few a frequent while the seeks or queries will be much greater. Thus this table needs to support quicker seeks. I will attempt to explain further later.
Memory Data
For storing variable or relationships or even more complex “thoughts” there is data memory. It’s just a key, data paring. Which seems too simple. However, I think it would be the responsibility of the Evaluator to make sense of the “dirty” nature of the memory. I must admit that there is most likely a better solution. However keep in mind that this memory bank has to server a variety of functions and Evaluators.

Summary
So all of this gives us the memory and storage of data. I would expect that storing this and accessing this would take up about 90% of the storage and processing capacity of our Ai brain.

Artificial Intelligence - The Brain

So this picture paints the whole picture, except for the most important part, which is in the next post. But let’s make sure we have it all covered.

Here’s how it works

• When the “brain” is ready to start a new tas
• It will remove the top item from the sensor stack
• It will determine the best sensor (this is the unexplained important part)
• The Evaluator will send commands to the motor stack
• It will also send memory objects and requests to Memory Handler

This continues till there is nothing to sense. We will talk about what the brain does when there is no data on the sensor, but not right now.

So, we have a little gray area, but the picture is getting clearer right?

Let’s continue…

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.