mobeamer

About BDPA

2011-06-21T06:09:00.001-07:00

For those of you interested in knowing more about the BDPA organization, check out this great T.V. interview with its founder.

http://vimeo.com/25390274

FYI: The National Convention is coming in August.

Free Code

2011-06-03T08:41:00.000-07:00

Just a quick post..I'm slowly posting my playground work to my "lab" site.

www.mobeamer.com/lab

Consider it all open source, please provide a link back to this blog or mobeamer.com if you use in a production site.

Free Training - Sign Me Up!

2011-02-18T10:14:00.000-08:00

BDPA Charlotte had their monthly meeting in a new location last night. We were at Metrotek which is located across from Microsoft. It was one of the best meetings I've ever attended with our group.

A fellow named Larry Edwards gave a presentation on Project Management and Six Sigma. How they are alike, how they are different and how they be leveraged for one another. I thought it was very informative and a good introduction into those two disciplines.

A lot of great folks turned out, we had folks from Wells, Bank of America, AT&T and a few other companies as well.

And then there was the great give-away. Metrotek gave everyone in attendance access to their Microsoft Project Certification Course free of charge. They are also going to do a drawing for all those that attended and give away additional training. If that is not some great ROI on an hour spent mingling with IT folks, I'm not sure what you are looking for.

For those of you who do not know, Charlotte is currently giving away $2,000,000 in training. If you are NOT employed, you need to contact Metrotek today and ask about their program. The training can be done virtually or self paced. The opportunity is knocking at your door.

Oh, and there was free food. (Quizno's...I love a good sandwich).

If you are in Charlotte, look us up, and join us, http://www.bdpacharlotte.org.

Markus Beamer

Building a Pipeline of American Talent

2011-02-12T07:13:00.000-08:00

I was sitting with some folks last week, after watching Wayne Hicks recieve recognition at the Microsoft Charlotte campus. We had a very interesting conversation which struck a cord with me. We were talking about the need to create a pipeline, a steady stream, of high quality minority talent. Specifically for companies looking to hire this talent.

Now, this idea is not all mine, so I certainly won't take credit for it, but I thought I'd discuss it a bit.

The realization was that, maybe, just maybe, the BDPA SITES program is allready setup to deliver just such a pipeline.

Think about it from a hiring companies perspective. They need to find top talent for junior level technical positions. Typically they would service this need by going to College Events and other well known HR practices.

But how do they find those really talented kids. The ones that have a 4.0 but also have real world experience. Those talented "Lebrauns", "Kobes" and "Shaqs" of the IT world.

I know that we (BDPA) know who those students are, I personally can tick off 4 in the last two years. It's those students who have gone through our Youth Technology Camp then gone on to our "High School Computer Academy" and then followed up on our collegiate program the "IT Showcase". It's students who have had in-depth conversations and mentorship by real working IT Professionals, year after year.

So when you find one of these students, you know you have found an individual who:

Excels at technology
Understands technology
Is able to develop and deliver real world solutions
Is capable of functioning appropriately in a company environment
Has excelled academically and professionally

Put simply, these companies would find that they have a student who is ready to work and able to learn how to perform the job quicker and easier than your normal college graduate.

A reliable, flexible and productive employee is a very solid ROI (Return on Investment). One might even say it is the most import measure for an HR department. BDPA has the ability to offer those candidates on a platter.

As a hiring manager, you want to get your new higher to produce as soon as possible and you want your new hire to be flexible to the nuances of your business. BDPA students deliver on both fronts.

So what does BDPA ask in return, just a few things:

First: Cash. It costs to get the right equipment, to market to the right youths, to give the youths experiences that will prepare them for the work force. It simply takes money.

Second: Internships. You can only get experience by working. I've found that most of our students stand out as interns. Even when our high-school students are interning with college students. We encourage companies to setup high-school and college internships, both paid and unpaid, where our students can learn and contribute.

Third: On the job Advancement. Once on the job, evaluate theirperformance, advance them as needed. They will shine, but you must give them opportunity to do so. Doing so will allow them to find other good employees to join your company.

All in all, it was an interesting conversation. It definitely needs some polish. I'd like to put a deck together illustrating this concept in simpler (fewer) words.

But sometimes it's more important to simple capture the thought.

Please keep in mind, these are my personal thoughts and opinions and not necessarily the opinions of BDPA at a national level.

Thoughs? Comments?

Technical Debt

2011-01-31T06:16:00.000-08:00

"Myrtle the Turtle told me it would take him 3 months to make my app, but Speedy Slim told me he could do it in 3 weeks? WTF?" my friend complains to me. I wince. This is not going to be easy to explain.

As with most things in life, both Speedy and Turtle are right but for different reasons. At the root of it is the Technical Debt that my friend is about to signup for.

Technical Debt is the "cost" of scaling, debugging and enhancing your application over its lifetime. Minimizing these cost up-front takes time. Sometimes a lot of time. Myrtle the Turtle is all about minimizing these costs.

An analogy that most laymen will understand

Over the entire life of your application there is a cost and the very first item that effects that cost is Speedy and Turtle. You can get this application built on cash, and pay upfront, and pay less. Or you can gt this application on credit and pay less up-front. The choice is really yours to make.

With a cash buy, you are paying every thing upfront. It's going to "hurt" more but once you get over that first build its relatively down hill from there, you will find that scaling, bugs and enhancements have a minimal cost.

With credit, your paying a little up-front but it hurts less...initially. As time passes on you'll be making continue payments to the debt of this purchase. You'll find that scaling, bugs and enhancements will cost you a fair amount of money. Inevidably, you'll pay more this way then you would from a build by Turtle. This is because of the interest on your technical debt.

What's the cost of using Speedy and receiving a "quicker" delivery?

Speedy is going to deliver exactly what you specify
Enhancements are going to take longer because Speedy will have to "re-work" a lot of code.
When more users start to use the app or more data gets into the system, the app will start to slow down and eventually will die
Speedy's going to get tired of working on the bad code in the app.
When you ask a "new" programmer to pickup the code up, you'll find that they tend to have to re-write the entire thing from scratch.

All of these are reasons that are not apparent in the initiall 3 to 6 months of the applications lifetime. They only become apparent down the road.

I want to point out:

Even the most well built and thoughout applicaiton build can fall to the points above.
There are developers out there who take 6 months but still deliver the equivalent of Speedy's work.
It's not an easy thing to build a scalable, bug free, flexible application.
Scaling, Bugs and Enhancements are NEVER free in any app. It's about minimizing the cost on these items.

When do I personally take Speedy up on his offer?

I'll take Speedy over Turtle when I know that what I want is a proto-type or proof of concept. I'll take Speedy when I "have" to have something done by a given date, and there is hard dollars tied to that date. I'll take Speedy when I don't know exactly what I want built yet, but I have a vague idea.

Everytime I take Speedy, I'll write down Turtle's name because I'm going to need him to build the real deal when the short need is done.

Are you a Speedy Slim or a Turtle Tim? Can a developer be both "on demand"? Which developer bills higher?

More about Jarvis the Chat Bot

2011-01-27T12:00:00.000-08:00

I mentioned that I created a chat bot named Jarvis. Since then I've been asked a few times what goes into creating Jarvis. I thought I'd take the time and explain what is going on behind the scenes.

First off Jarvis sits on top of database with the following tables.

word - A library of known words he found online
keywords - collections of words that Jarvis thought went together
responses - Response that can be given to a user

There are other tables, but that is the core ones.

Now I loaded Jarvis with the library that ELIZA the original chat bot used. That system had a number of keywords and responses to those key words. For example: If the user had typed "Hi", there were 3 possible responses. "How are you?", "Hello", "Welcome".

Jarvis would randomly pick one of those.

I also hand entered in some other "choice" keywords and phrases.

The next step was to have him learn from input. So when ever Jarvis puts out a response that includes a question (question mark), he would wait for the response and tag it as a possible "answer" to that question. That way when another user asked the question of Jarvis this was in his possible responses.

So for example, Jarvis might start off with a memory like the following:

Key: How are you?
Possible Responses: "Good", "I'm sad" or "I'm happy".

Let's say he had the following conversation with user 1.

Jarvis: Hi
User 1: Hello Jarvis
Jarvis: How are you?
User 1: I'm good, I had bacon this morning.

Now Jarvis' memory looks like the following:

Key: How are you?
Possible Responses: "Good", "I'm sad" or "I'm happy" or "I'm good, I had bacon this morning"

So when user 3 comes along the conversation looks like this...

Jarvis: Hello
User 3: Hi Jarvis, How are you?
Jarvis: I'm good, I had bacon this morning
User 3: That sounds good
Jarvis: how are you?
User 3: Hungry

Jarvis used the first users answers and he also learned a new answer to the question "How are you?"

Key: How are you?
Possible Responses: "Good", "I'm sad" or "I'm happy" or "I'm good, I had bacon this morning", "Hungry"

Curiosity
At first I built him so that any response that was a question was given priority. But that lead to Jarvis asking to many questions. So Jarvis now has a curiosity factor. The more curious he is, the more likey that he will give a response that is in the form of a question. This sponsors more responses for him.

You can increase or decrease curiosity by typing "moreCurious" or "lessCurious" into the text box.

Peeking into Jarvis Brain
There is a checkbox "Peek into Brain". Clicking this will let you see into Jarvis process. It shows you the following:

Words gathered from your input
Last 5 words learned (popularity is in parens)
The Keywords or phrases that were triggered based on your words
Selected/Best Keyword is highlights in bold
The Responses triggered from the best keyword
The last 5 learned keyword phrases
The last 5 learned responses

Scoreing
Jarvis tracks each chat session and gives it a score. Keep in mind each possible response is scored. Anytime Jarvis uses an response with a score higher than 0, he adds one to the session score.

This should lead to interesting sessions having a higher score, but I have not thoroughly tested that.

Jarvis can be found at http://www.mobeamer.com/lab/jarvis

Randomness

There are two places where Jarvis uses randomness.

First: Sometimes after finding all the keyphrases from the users input. Multiple keypharases have the same score. In this case, Jarvis will randomly select one of them.

Second: Sometimes after finding all responses from a keyphrase, mulitple responses have the same score. In this case, Jarvis will randomly select one.

The random function uses php's in-built rand() function. Which is not 100% random but close enough for me.

Jarvis - A chatterbot

2011-01-24T10:28:00.000-08:00

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

Charlotte BDPA - 2011 Kickoff

2011-01-21T07:21:00.000-08:00

We had the Charlotte BDPA 2011 kickoff meeting last night. I think it went very well. A little recap of what I remember off the top of my head.:

Diondre, with IBN Consulting, is interested in teaching folks a number of IT topics, his business has an office downtown and has been training folks for a few months now. Definitely want to keep in touch with this guy.

Sheila (spl?) - The Urban League has a new program, they are giving CISCO certifications to 11th and 12th graders. The programs are held at Phillip O'Berry. Sounds like there are some nice perks with the program as well. (Laptop, software and such). She needs IT professionals to come by and speak about the career. I told her to count me in. If you know of anyone or are interested, reach out to me.

2 BDPA members recently moved to new roles within thier current companies. You know I love to hear news like this.

The Charlotte BDPA 2011 calendar is full of education and training opportunities for adult professionals. A bit of a change in focus for our chapter but a refreshing one.

Charles - With APEX has a few development, PM and BA job opportunities for anyone who is looking.

All in all, it was a good meeting and better networking. I'm looking forward to our next meeting in Feb.

Hope you are starting the year off right.

5 Ways to be Lucky and Successful

2010-07-14T10:02:00.001-07:00

Quite often I find myself talking about these rules during our weekly programming training classes (BDPA - HSCC).

Luck and success is all around you. But you have to be open to it. There is a mindset to being lucky and being successful. The following are some rules that help me to be lucky and successful:

Rule 1. Roll with the Changes
Change is going to come. We all make plans and life promptly crushes them. But when everything is falling apart, take the time to look around. Somewhere in the madness is an opportunity.

Grab it, catch it, put it in your back pocket, clean up your life, get back on track, then pull the opportunity out of your pocket and explore it.

Rule 2. Walk with open eyes
The simple act of noticing will bring luck to you. We don't always have to rush. Take the time to stroll and look around. You never know...
See that lady with the screaming four year old? She might have the job you've been looking for. Maybe you should have stopped and helped her.

Did you see that billboard about the master's degree? They might have a grant with your name on it.

See that flyer on the wall, don't you recognize that face? It's an old co-worker looking for a partner to start their next business.

3. Be Bold
Take risk, you don't have as much to lose as you think. Really has rejection ever killed anyone. Put yourself out there, so someone can pick you up. Keep in mind that if you let yourself, you will talk yourself out of everything that was meant for you.

4. Know when to quit
Because you are now taking risks and being bold, you will find a lot of things going on in your life. This is good, you're enjoying life. But at some point it will be too much. I know when I reach this point because I start to habitually avoid doing things. So, the time has come to trim to fat and let something go. Choose carefully, but admit and realize that something has to go.

On the other hand, be honest about your efforts are they profitable, monetarily or emotionally. If you ain't getting no satisfaction its a good sign that it's time to cut it loose. Life is to short to spend it on the un-enjoyable.

5. Make "me" time
Leave time to do nothing. I repeat nothing. Pretend that you're going to sit on your butt and do...wait for it...nothing. You'll find that this is the most enjoyable time you have. You will look forward to this time. You will crave it. The day just won't seem right without it. Why?

Because your nothing time turns into the time you do the thing you absolutely 100% enjoy doing above anything else. You have no obligations, you can do anything you want. You will naturally do what you like the most. Surprisingly you will find that this activity will change week to week. Your brain's appetite is large, once you allow it to join the buffet.

Now, don't go crazy, you can't have "me" time all of the time. Then the pleasure of it goes away, not to mention that the rest of your life will go sideways on you.

So there you have it. 5 simple rules that I live by. They help me be lucky and successful,. They can definitely help you.

What rules would you add?

Intro to Data Warehouses

2010-07-12T08:14:00.000-07:00

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

5 min Intro to PHP

2010-05-17T06:48:00.000-07:00

If your interested in learning or playing with PHP. Here is a short introduction to get you started. I expect that you have some basic programming skills already. (or the will power to stay and play for a while)

Download It

If your using a window OS you will want an "XAMP" installation. It installs Apache, PHP and MySQL on windows. Most of them are simple: download, unzip and click the "start" executable. I like to use Uniform Server. I won't go into debugging apache in this article, but I will suggest that you shut off any program that uses the web server ports. (Visual Studio, IIS, Skype).

Alternatively you can play on any website you have, most will have php enabled.

Basic Things to know

Save your page with a .php extension
Surround your code with <?php ...code.... ?>
You can use <? ...code.... ?> but that is non-standards compliant
All statements in php must end with ";"
Variables start with $. IE: $username, $today, $yesterday, $i
Variables "live" to the end of page, but do not carry over into functions
Single line comments use //
Multi line comments use /* .... */
To add strings use "." (IE: $firstName . " " . $lastName)
To add numbers use "+" (IE: $age + 10)
Use print to print (IE: print "Hello " . $username)
Use echo to print (IE: echo "Hello " . $username)

If statements

if( boolean )
{
//...some code
}
elseif( boolean )
{
//...some code
}
else
{
//...other code
}

Loops

for($i=0;$i<10;$i++)
{
//...code
}

while( boolean )
{
// ...code
}

Variables, Sessions and Forms

Normal Variable: $username;
Session Variable: $_SESSION["username"]
Form Post Variable: $_POST["username"]
Form Get Variable: $_GET["username"]

Kill a session variable: $_SESSION["username"] = "";

Database

PHP normally uses mySQL, but each of the functions below have an equivalent function for most database systems.

$db_host = "localhost";
$db_user = "user";
$database = "dbname";
$db_passwd = "pass";
mysql_connect($db_host, $db_user, $db_passwd);
$q = mysql_query("select * from user");

while($row = mysql_fetch_object($q))
{
print $row->username;
}

Alternativly you can use mysql_fetch_row($q)...this will get an array of the field values and you can access them by $row[0], $row[1]....etc.

As with most high level languages, php has a number of functions available to it. You can search the very friendly documentation at www.php.net

Objects and Classes
Class DateUtils
{

function DateUtils()
{
//...constructor
}

function getToday($format)
{
return date($format);
}
}

And here is how to use the class

$util = new DateUtils();
print $utils->getToday();

What else would you like to know?

CSS: Tabbed Menu

2010-04-26T06:56:00.001-07:00

Free Code. This comes directly from this site http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml

Creates rounded menus.

You will need the following four images:

- Right Tab

Left Tab

Right Tab Hover

Left Tab Hover

Code


<html>

 <style>
  #navigation a
  {
  color: #000;
  background: #ffa20c url(left-tab.gif) left top no-repeat;
  text-decoration: none;
  padding-left: 10px
  }

  #navigation a span
  {
  background: url(right-tab.gif) right top no-repeat;
  padding-right: 10px
  }

  #navigation a, #navigation a span
  {
  display: block;
  float: left
  }

  /* Hide from IE5-Mac \*/
  #navigation a, #navigation a span
  {
  float: none
  }
  /* End hide */

  #navigation a:hover
  {
  color: #fff;
  background: #781351 url(left-tab-hover.gif) left top no-repeat;
  padding-left: 10px
  }

  #navigation a:hover span
  {
  background: url(right-tab-hover.gif) right top no-repeat;
  padding-right: 10px
  }

  #navigation ul
  {
  list-style: none;
  padding: 0;
  margin: 0
  }

  #navigation li
  {
  list-style: none;
  float: left;
  margin: 0;
  }
 </style>



<body>
<h1>Tabbed Menu Test</h1>

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>

</body>
</html>

Javascript - 2D Map Library

2010-04-23T07:33:00.000-07:00

This article is a wrap up of a series of articles in which I walk through building a simple 2d top down map library. Below are the articles that build this library:

For those of you that want the code, scroll past the explanations, it's at the bottom.

Style.css.
While testing and playing I usually will include the style in one page, for the ease of editing, but it's always a good idea to separate the style sheet from the main body of code. This allows an artist to come along and play with the look and feel of the site without screwing with your brilliantly created code.

Map.js.
All the general re-usable functions for mapping. If you ever finish coding a function and think, man I'll never have to touch this again, its so perfect and I'll use it all the time! First, slap yourself, cause we all know it's going to have a bug in it at some time. Second realize that the function in question, is prime material to go into a library of sorts. The functions in map.js are generic and can be kept from game to game as you build different things. At least that is my hope.

TileClicked()
I left tile clicked in the main body of the page because the actions you might want to take when a tile is clicked will change from game to game. Thus it is not library material.

DestReached()
This is a new function that was not discussed in other articles. Once a unit is done moving to it's destination of location, this function is called. I figured game builders might want to change this function depending on the game.

Play()
This is the heart of your game, if you want enemies to run around randomly, here is where you put that stuff. This function will call itself every few milliseconds, the more code in this function the slower your game is going to run.

ObjectsCollided()
This function is called when ever two units combine. The unit that moved last and did the collision is passed along with the id of each unit that is involved in the collision. You'll want to customize this function.

The Body Tag
The body tag calls the buildMap and addUnit function. I'd expect that you will want to change that.

Div Elements
There are two divs in the html one to hold the map and another to hold the score. You can move those around, but they must be somewhere in the page for the library to work.

Map.js Function List

BuildMap(width, height)
Builds a map of width and height. It will also add walls to all edges of the map, so units don't wonder off it. Comment out the "addBorders()" line if you don't want this.

AddBorders()
Ummm, it adds borders...nuff said

addWall(x,y)
Turns tile x,y into a wall. Sets tile's flag = -1, sets the background color

addUnit(unitID, x, y)
Adds a unit with that ID to the map at tile location x, y. Multiple units can be added. If unitID is 1000 it is given the css class "unit". Otherwise the class is "enemy"

setWalkableFlag(x, y, flag)
Sets tile x, y "flag" variable to the flag passed.

jumpUnit(unitID, tileDestX, tileDestY)
Moves a unit directly to that tile, no animation at all...unit just jumps to location.

move(unitID, dir)
Move a unit one tile in the direction specified. Valid directions are N, E, S, W. This is an animated move (one pixel at a time). This uses the moveUnit() function.

moveUnit(unitID, tileDestX, tileDestY)
Moves a unit to the tile passed in. If at anytime the unit hits a none walkable tile, the unit will move back to last position. (no route finding). Calls DestReached() when completed.

isWalkable(x,y)
Returns "Y" or "N" if pixel x, y is walkable

isWalkableTile(x,y)
Returns "Y" or "N" if tile x, y is walkable

getTop(obj)
Return the top pixel (y) of the object. Could use some optimization

getLeft(obj)
Return the left pixel (x) of the object. Could use some optimization

translateTileX(x), translateTileY(y)
return the tileX that pixel x is located within

getTileX(unitID), getTileY(unitID)
return the tile x and tile y that the unit is located on

Here be code!

Style Sheet (style.css)


.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
}

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

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

Map.js (the library)



var originX = 0;
var originY = 0;
var tileSize = 16;
var mapHeight = 0;
var mapWidth =0;
var score=0;
var playSpeed = 1000;
var numUnits = 0;
var maxNumUnits = 40;


function buildMap(width, height)
{
mapHeight = height;
mapWidth = width;

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("flag","0");
d.setAttribute("onclick","tileClicked(" + x + "," + y + ")")
document.getElementById("divMap").appendChild(d);
}

addBorders();



}

function addBorders()
{
for(x=0;x<mapWidth;x++)
{
 addWall(x, 0);
 addWall(x, mapHeight-1);
}


for(y=0;y<mapHeight;y++)
{
 addWall(0, y);
 addWall(mapWidth-1,y);
}
}

function addWall(x,y)
{
 var tile = document.getElementById("tile_" + x + "_" + y)
 tile.setAttribute("flag","-1");
 tile.style.background = "#777"
}


function addUnit(unitID, x,y)
{
 var d = document.createElement("DIV");
 var tile = document.getElementById("tile_" + x + "_" + y)
 if(unitID == 1000)
 {
  d.className="unit";
 }
 else
 {
  d.className="enemy";
 }
 d.setAttribute("xVel", 0);
 d.setAttribute("yVel", 0);
 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;
 d.setAttribute("currTileX",x);
 d.setAttribute("currTileY",y);
 d.setAttribute("priorTileX",x);
 d.setAttribute("priorTileY",y);

 setWalkableFlag(x, y, unitID);

 document.getElementById("divMap").appendChild(d);
}

function setWalkableFlag(x, y, flag)
{
 var tmpTile = document.getElementById("tile_" + x + "_" + y)
 tmpTile.setAttribute("flag", flag);

}

function jumpUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 unit.style.left = getLeft(tile);
 unit.style.top = getTop(tile);
 //
 //mark the current tile as UNwalkable
 //
 setWalkableFlag(unit.getAttribute("currTileX"), unit.getAttribute("currTileY"), "0");

 //
 //mark the old tile as WALKABLE
 //
 setWalkableFlag(unit.getAttribute("priorTileX"), unit.getAttribute("priorTileY"), "0");

 unit.setAttribute("currTileX",x);
 unit.setAttribute("currTileY",y);
 unit.setAttribute("priorTileX",x);
 unit.setAttribute("priorTileY",y);

}



function move(unitID, dir)
{
 x = getTileX(unitID)
 y = getTileY(unitID)
 
 if(dir == "N")
 {
  y--;
 }
 
 if(dir == "E")
 {
  x++;
 }

 if(dir == "S")
 {
  y++;
 }
 
 if(dir == "W")
 {
  x--;
 } 
 
 
 if(isWalkableTile(x, y) == "Y")
 {
  moveUnit(unitID, x, y);
 }
 
 
}


function moveUnit(unitID, tileDestX, tileDestY)
{
 
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 unit.setAttribute("priorTileX",getTileX(unitID));
 unit.setAttribute("priorTileY",getTileY(unitID));

 if(!tile)
 {
  alert("no tile found");
  return;
 }
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;

 if(x > destX) newX--;
 if(x < destX) newX++;
 if(y > destY) newY--;
 if(y < destY) newY++;

 if(isWalkable(newX, newY) == "Y" && isWalkable(newX+tileSize-2, newY + tileSize-2) == "Y")
 {
  unit.style.left = newX;
  unit.style.top = newY;

  if(newX != destX || newY != destY)
  {
   setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);
  }
  else
  {
   destReached(unitID, destX, destY);
  }
 }

}

function isWalkable(x,y)
{
 var tile = document.getElementById("tile_" + translateTileX(x) + "_" + translateTileY(y))
 if(tile.getAttribute("flag") >= 0) return "Y";


 return "N";
}


function isWalkableTile(x,y)
{
 var tile = document.getElementById("tile_" + x + "_" + y)
 if(tile.getAttribute("flag") >= 0) return "Y";


 return "N";
}

function getTop(obj)
{
 if(obj)
 {
  return parseInt(obj.style.top.replace("px",""));
 }

 return 0;
}

function getLeft(obj)
{
 if(obj)
 {
  return parseInt(obj.style.left.replace("px",""));
 }

 return 0;
}


function translateTileX(x)
{
 return Math.floor(x/tileSize - originX);
}

function translateTileY(y)
{
 return Math.floor(y/tileSize - originY);
}


function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getTop(unit));
}

function getTileX(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getLeft(unit));
}

function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = Math.floor(getLeft(unit)/tileSize - originX);
 y = Math.floor(getTop(unit)/tileSize - originY);

 return y;
}

Basic HTML page (index.html)


<html>
<link type="text/css" href="style.css"rel="stylesheet" />
<script language=javascript src="map.js"></script>

<script language=javascript>
function tileClicked(x,y)
{
  //called whenever a tile is clicked
 moveUnit(1000, x, y);
}

function destReached(unitID, x, y)
{
 //called when ever the unit is done moving to a spot

}


function play()
{
 //once called, this will loop forever, checking the game state and other things
 setTimeout("play()",playSpeed);
}


function objectsCollided(unit, unitID, enemyID)
{
 //called whenever two objects collide

}

</script>

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

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

<div id="score" style="font-family:verdana;size:14px; background:green;position:absolute;top:5px;left:350px; width:100px height:15px;border:5px solid green;">
 Score: 0
</div>


</body>
</html>

Stock Guessing - Programatically

2010-04-22T12:55:00.000-07:00

I've always been interested in stock analytics. Mostly because I have this un-reasonable dream that if I can program a stock "machine" which will trade stocks for me and make me richer than my wildest dreams.

*Watches as you fall on the floor laughing*

So now that you are done laughing....I started a blog about a year ago on creating such a program. If your interested it's here. I don't think I'm going to post to it anymore and it..."wonders"...a bit.

Last night, I fired up the old program I wrote and tinkered with it for a little while. Tormenting myself with that dream I mentioned. To my surprise, I found something interesting...

The program is setup to run once a day, pick a few stocks and then invest $1,000 into it. It then examines it's buys every day and sells the stock. There is a lot of other stuff going on, but that's the important part.

If I had $10,000 to invest over the past 60 days and I had done ever trade and sell recommended by the program. I'd have gained $3,679.02.

I'd have done 33 trades, assuming a $10 commission on each buy and sell, the commissions would cost me $660.

The program churns through around 3,500 stocks (NYSE and NASDAQ) looking for good trades. It's a lucky day when it finds two picks in a given day.

For those who are interesting..here are the last 10 or so picks it spit out.

I'm at a loss on how to further test the program to ensure this is not some coincidence. Any suggestions?

Code: Simple 2D Javascript Map - Part 6

2010-04-05T10:43:00.000-07:00

This code will create a map grid, when you click the grid the green box will move to the tile you clicked. Red boxes will "fall" from the top down at random intervals. If the green box hits a red box, the red box disappears and starts to fall again. Think of it as a catching game.

This was built to demonstrate one form of collision detection.In my mind there are two ways you can do collision detection. The first method is what most systems and algorithms perform:

Calculate the new position of the unit
Cycle through all other units to see if one of them occupies the new position
If no one is occupying then move the unit

The second method is to make tiles as walkable as a unit steps on the tile. Then rather then cycling through all the units, you just check the tile the unit is moving to.

Calculate the new position of the unit
Check to see if that tile is occupied
If no one is occupying then move the unit

The second method means that it "cost" more to move a unit. However it cost less than cycling through all units, every time there is any movement on the screen.

How did I implement? First, I had to edit the buildMap() function so that each tile has a flag for who is standing on it. So I added the following line inside my buildMap() loops:


      d.setAttribute("flag","0");

I then needed a function to set and unset this flag. If you un comment out a few lines, it will change the background of the tile, so that you can see which tiles get marked as unwalkable.


function setWalkableFlag(x, y, flag)
{
 var tmpTile = document.getElementById("tile_" + x + "_" + y)
 tmpTile.setAttribute("flag", flag);

 /*
 if(flag > 0)
 {
  tmpTile.style.background = "yellow";
 }
 else
 {
  tmpTile.style.background = "#BBB";
 }
 */
}

I also need the unit to "remember" what tile they are on (currTile) and what tile they were on (priorTile). To do this, I add the following code to the addUnit() function:


 d.setAttribute("currTileX",x);
 d.setAttribute("currTileY",y);
 d.setAttribute("priorTileX",x);
 d.setAttribute("priorTileY",y);
      setWalkableFlag(x, y, unitID);

Again, I needed a few "wrapper" functions. One translates a pixel point X to a tile X. To keep things clean I changed the getTile function to use the new translate function. Again, there is plenty of room to optimize.


function translateTileX(x)
{
 return Math.floor(x/tileSize - originX);
}

function translateTileY(y)
{
 return Math.floor(y/tileSize - originY);
}


function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getTop(unit));
}

function getTileX(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getLeft(unit));
}

Now we get to the meat and potatoes of coding. The move unit function is where all the collision detection takes place. Reading through the logic of this function reads as follows:

Grab the unit object and the destination tile object
If the destination tile does not exist, stop
Move 1 pixel closer to the destination
Get the tile located at the center of the new position. (Center of the unit)
If that tile is not flagged or if it is flagged as this unit
Move the unit to the new location
Set the priorTile and currentTile values
Flag the new current tile as walkable
Flag the old prior tile as unwalkable
If we still have not found our destination, repeat in 5 milliseconds
If there is a collision (back at #5), call the collide function


function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 unit.setAttribute("priorTileX",getTileX(unitID));
 unit.setAttribute("priorTileY",getTileY(unitID));

 if(!tile)
 {
  return;
 }
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;

 if(x > destX) newX--;
 if(x < destX) newX++;  if(y > destY) newY--;
 if(y < destY) newY++;   checkX = newX + tileSize/2;  checkY = newY + tileSize/2;   var newTile = document.getElementById("tile_" + translateTileX(checkX) + "_" + translateTileY(checkY))  if(newTile.getAttribute("flag") == "0" || newTile.getAttribute("flag") == unitID)  {   unit.style.left = newX;   unit.style.top = newY;    unit.setAttribute("currTileX",getTileX(unitID));   unit.setAttribute("currTileY",getTileY(unitID));    if(unit.getAttribute("priorTileY") != unit.getAttribute("currTileY") || unit.getAttribute("priorTileX") != unit.getAttribute("currTileX") )   {    //    //mark the current tile as UNwalkable    //    setWalkableFlag(unit.getAttribute("currTileX"), unit.getAttribute("currTileY"), unitID);     //    //mark the old tile as WALKABLE    //    setWalkableFlag(unit.getAttribute("priorTileX"), unit.getAttribute("priorTileY"), "0");   }    if(newX != destX || newY != destY)   {    setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);   }  }  else  {   //   //we collided   //snap back to last tile   //   objectsCollided(unit, unitID, newTile.getAttribute("flag"));    }    }

In our game, if the user/player manages to collide with an enemy we will pop the enemy back up to the top for them to start over.



function objectsCollided(unit, unitID, enemyID)
{
 var tmpTile = document.getElementById("tile_" + unit.getAttribute("priorTileX") + "_" + unit.getAttribute("priorTileY"))
 unit.style.top = getTop(tmpTile);
 unit.style.left = getLeft(tmpTile);

 if(unitID == 1000)
 {
  x = Math.floor(Math.random()*9);
  y = 0;
  jumpUnit(enemyID, x, y);
 }

 if(enemyID == 1000)
 {
  x = Math.floor(Math.random()*9);
  y = 0;
  jumpUnit(unitID, x, y);
 }

}

One last change, I had to make was in the jumpUnit() function. I found that I needed to flag and unflag the tiles as the unit jumped.


function jumpUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 unit.style.left = getLeft(tile);
 unit.style.top = getTop(tile);
 //
 //mark the current tile as UNwalkable
 //
 setWalkableFlag(unit.getAttribute("currTileX"), unit.getAttribute("currTileY"), "0");

 //
 //mark the old tile as WALKABLE
 //
 setWalkableFlag(unit.getAttribute("priorTileX"), unit.getAttribute("priorTileY"), "0");

 unit.setAttribute("currTileX",x);
 unit.setAttribute("currTileY",y);
 unit.setAttribute("priorTileX",x);
 unit.setAttribute("priorTileY",y);

}

And that's the entire change I made...the following is the entire code set:


<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
}

.enemy {
background:red;
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;
var mapHeight = 0;
var mapWidth =0;
function buildMap(width, height)
{
mapHeight = height;
mapWidth = width;

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("flag","0");
  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"

 moveUnit(1000, x, y);
}

function addUnit(unitID, x,y)
{
 var d = document.createElement("DIV");
 var tile = document.getElementById("tile_" + x + "_" + y)
 if(unitID == 1000)
 {
  d.className="unit";
 }
 else
 {
  d.className="enemy";
 }
 d.setAttribute("xVel", 0);
 d.setAttribute("yVel", 0);
 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;
 d.setAttribute("currTileX",x);
 d.setAttribute("currTileY",y);
 d.setAttribute("priorTileX",x);
 d.setAttribute("priorTileY",y);

 setWalkableFlag(x, y, unitID);

 document.getElementById("divMap").appendChild(d);
}

function setWalkableFlag(x, y, flag)
{
 var tmpTile = document.getElementById("tile_" + x + "_" + y)
 tmpTile.setAttribute("flag", flag);

 /*
 if(flag > 0)
 {
  tmpTile.style.background = "yellow";
 }
 else
 {
  tmpTile.style.background = "#BBB";
 }
 */
}

function jumpUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 unit.style.left = getLeft(tile);
 unit.style.top = getTop(tile);
 //
 //mark the current tile as UNwalkable
 //
 setWalkableFlag(unit.getAttribute("currTileX"), unit.getAttribute("currTileY"), "0");

 //
 //mark the old tile as WALKABLE
 //
 setWalkableFlag(unit.getAttribute("priorTileX"), unit.getAttribute("priorTileY"), "0");

 unit.setAttribute("currTileX",x);
 unit.setAttribute("currTileY",y);
 unit.setAttribute("priorTileX",x);
 unit.setAttribute("priorTileY",y);

}



function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 unit.setAttribute("priorTileX",getTileX(unitID));
 unit.setAttribute("priorTileY",getTileY(unitID));

 if(!tile)
 {
  return;
 }
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;

 if(x > destX) newX--;
 if(x < destX) newX++;
 if(y > destY) newY--;
 if(y < destY) newY++;

 //if(newX < 0)    newX = 0;
 //if(newX > mapWidth-1)  newX = mapWidth-1;
 //if(newY < 0)    newY = 0;
 //if(newY > mapHeight-1)  newY = mapHeight-1;

 checkX = newX + tileSize/2;
 checkY = newY + tileSize/2;

 var newTile = document.getElementById("tile_" + translateTileX(checkX) + "_" + translateTileY(checkY))
 if(newTile.getAttribute("flag") == "0" || newTile.getAttribute("flag") == unitID)
 {
  unit.style.left = newX;
  unit.style.top = newY;

  unit.setAttribute("currTileX",getTileX(unitID));
  unit.setAttribute("currTileY",getTileY(unitID));

  if(unit.getAttribute("priorTileY") != unit.getAttribute("currTileY") || unit.getAttribute("priorTileX") != unit.getAttribute("currTileX") )
  {
   //
   //mark the current tile as UNwalkable
   //
   setWalkableFlag(unit.getAttribute("currTileX"), unit.getAttribute("currTileY"), unitID);

   //
   //mark the old tile as WALKABLE
   //
   setWalkableFlag(unit.getAttribute("priorTileX"), unit.getAttribute("priorTileY"), "0");
  }

  if(newX != destX || newY != destY)
  {
   setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);
  }
 }
 else
 {
  //
  //we collided
  //snap back to last tile
  //
  objectsCollided(unit, unitID, newTile.getAttribute("flag"));


 }



}


function objectsCollided(unit, unitID, enemyID)
{
 var tmpTile = document.getElementById("tile_" + unit.getAttribute("priorTileX") + "_" + unit.getAttribute("priorTileY"))
 unit.style.top = getTop(tmpTile);
 unit.style.left = getLeft(tmpTile);

 if(unitID == 1000)
 {
  x = Math.floor(Math.random()*9);
  y = 0;
  jumpUnit(enemyID, x, y);
 }

 if(enemyID == 1000)
 {
  x = Math.floor(Math.random()*9);
  y = 0;
  jumpUnit(unitID, x, y);
 }

}


function getTop(obj)
{
 if(obj)
 {
  return parseInt(obj.style.top.replace("px",""));
 }

 return 0;
}

function getLeft(obj)
{
 if(obj)
 {
  return parseInt(obj.style.left.replace("px",""));
 }

 return 0;
}


function translateTileX(x)
{
 return Math.floor(x/tileSize - originX);
}

function translateTileY(y)
{
 return Math.floor(y/tileSize - originY);
}


function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getTop(unit));
}

function getTileX(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 return translateTileY(getLeft(unit));
}

function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = Math.floor(getLeft(unit)/tileSize - originX);
 y = Math.floor(getTop(unit)/tileSize - originY);

 return y;
}


var playSpeed = 1000;
var numUnits = 0;
var maxNumUnits = 5;
function play()
{
 if(numUnits < maxNumUnits)
 {
  unitID = 1001+numUnits
  x = Math.floor(Math.random()*9);
  speed = Math.floor(Math.random()*3);
  addUnit(unitID,x,0);
  var unit = document.getElementById("unit_" + unitID);
  unit.setAttribute("xVel", 0);
  unit.setAttribute("yVel", speed+1);
  numUnits++;
 }

 for(i=0;i<numUnits;i++)
 {
  unitID = 1001+i;
  var unit = document.getElementById("unit_" + unitID);
  x = getTileX(unitID) + parseInt(unit.getAttribute("xVel"));
  y = getTileY(unitID) + parseInt(unit.getAttribute("yVel"));

  if(y >= mapHeight)
  {
   x = Math.floor(Math.random()*9);
   y=0;
   jumpUnit(unitID, x, y);
  }
  moveUnit(1001+i, x,y);
 }

 setTimeout("play()",playSpeed);
}


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

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

</body>
</html>

Question: How would you go about adding a score indicator?

Code: Simple 2D Javascript Map - Part 5

2010-04-05T07:58:00.000-07:00

This code will show how to create enemies and move them around the screen. It's going to randomly create 5 red boxes which will "fall" from the top of the grid to the bottom. The user can click a tile and the green box will move to the tile clicked. There is no collision detection...yet. I'm keeping this as simple as possible so in this example, "enemies" will drop from the top of the screen. Your job is to dodge them.

The play function will get called every one second (playSpeed). It will add a new enemy until it has added 5 enemies. It chooses a random location at the top of the map, places the unit there.

It will then pick a random speed and set the y velocity (think downward speed) equal to this random speed value.

The second piece has the magic. It cycles through all enemy units and sets their next location to 3 spaces below where the unit currently is. Notice that this where our new functions get called.


var playSpeed = 1000;
var numUnits = 0;
var maxNumUnits = 5;
function play()
{
 if(numUnits < unitid =" 1001+numUnits" x =" Math.floor(Math.random()*9);" speed =" Math.floor(Math.random()*3);" unit =" document.getElementById(" i="0;i= mapHeight)
  {
   x = Math.floor(Math.random()*9);
   y=0;
   jumpUnit(unitID, x, y);
  }
  moveUnit(1001+i, x,y);
 }

 setTimeout("play()",playSpeed);
}

Other changes

Again, we have some plain Jane functions to get the tile location (x and y) of where our units is located. Make a note to yourself, there is plenty of room to optimize this code. It's dog slow.


function getTileX(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = getLeft(unit)/tileSize - originX;
 y = getTop(unit)/tileSize - originY;

 return x;
}

function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = getLeft(unit)/tileSize - originX;
 y = getTop(unit)/tileSize - originY;

 return y;
}

We also need to create a style for our enemy units. So I added this to the style.


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

Since we are moving random objects around, we need to start tracking the map height and width. So I changed the build map function.


var mapHeight = 0;
var mapWidth =0;
function buildMap(width, height)
{
mapHeight = height;
mapWidth = width;

for(x=0;x<width;x++) y=0;y<height;y++);x++)

Again, because we are moving enemies around randomly, need a bit of error catching added to the move function. If we try to move to a tile that does not exist, just stop moving.


function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile)
      ......

Finally, I needed a function which will take an existing unit and "jump" them to a specific place on the map. This means they don't "move" one pixel at a time, but instead are immediately placed at that location:


function jumpUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 unit.style.left = getLeft(tile);
 unit.style.top = getTop(tile);
}

Last but not least, we have to call our new play function from within the body tag.


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

Finally, the entire 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
}

.enemy {
background:red;
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;
var mapHeight = 0;
var mapWidth =0;
function buildMap(width, height)
{
mapHeight = height;
mapWidth = width;

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"

 moveUnit(1000, x, y);
}

function addUnit(unitID, x,y)
{
 var d = document.createElement("DIV");
 var tile = document.getElementById("tile_" + x + "_" + y)
 if(unitID == 1000)
 {
  d.className="unit";
 }
 else
 {
  d.className="enemy";
 }
 d.setAttribute("xVel", 0);
 d.setAttribute("yVel", 0);
 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);
}


function jumpUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 unit.style.left = getLeft(tile);
 unit.style.top = getTop(tile);
}



function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 if(!tile)
 {
  return;
 }
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;

 if(x > destX) newX--;
 if(x < destX) newX++;
 if(y > destY) newY--;
 if(y < destY) newY++;

 unit.style.left = newX;
 unit.style.top = newY;

 if(newX != destX || newY != destY)
 {
  setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);
 }

}


function getTop(obj)
{
 if(obj)
 {
  return parseInt(obj.style.top.replace("px",""));
 }

 return 0;
}

function getLeft(obj)
{
 if(obj)
 {
  return parseInt(obj.style.left.replace("px",""));
 }

 return 0;
}

function getTileX(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = getLeft(unit)/tileSize - originX;
 y = getTop(unit)/tileSize - originY;

 return x;
}

function getTileY(unitID)
{
 var unit = document.getElementById("unit_" + unitID);
 x = getLeft(unit)/tileSize - originX;
 y = getTop(unit)/tileSize - originY;

 return y;
}


var playSpeed = 1000;
var numUnits = 0;
var maxNumUnits = 5;
function play()
{
 if(numUnits < maxNumUnits)
 {
  unitID = 1001+numUnits
  x = Math.floor(Math.random()*9);
  speed = Math.floor(Math.random()*3);
  addUnit(unitID,x,0);
  var unit = document.getElementById("unit_" + unitID);
  unit.setAttribute("xVel", 0);
  unit.setAttribute("yVel", speed+1);
  numUnits++;
 }

 for(i=0;i<numUnits;i++)
 {
  unitID = 1001+i;
  var unit = document.getElementById("unit_" + unitID);
  x = getTileX(unitID) + parseInt(unit.getAttribute("xVel"));
  y = getTileY(unitID) + parseInt(unit.getAttribute("yVel"));

  if(y >= mapHeight)
  {
   x = Math.floor(Math.random()*9);
   y=0;
   jumpUnit(unitID, x, y);
  }
  moveUnit(1001+i, x,y);
 }

 setTimeout("play()",playSpeed);
}


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

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

</body>
</html>

Code: Simple 2D Javascript Map - Part 4

2010-04-02T07:44:00.000-07:00

What's that you say, you want to move the character around the screen.

OK, ok, ok...here we go.

Because we will need to get the exact position of the div objects, I use the following two functions (In all fairness there are better, faster, more accurate ways to get the position of a div tag, but this has worked for me and is simple enough for my simple mind to grasp.)

You pass them an object and they give you back the position of the object.


function getTop(obj)
{
 if(obj)
 {
  return parseInt(obj.style.top.replace("px",""));
 }

 return 0;
}

function getLeft(obj)
{
 if(obj)
 {
  return parseInt(obj.style.left.replace("px",""));
 }

 return 0;
}

A bit boring, nothing to fascinating in those functions. However here is where things get a bit more exciting. The following function will move any unit object to the desired Tile position.

We pass in the unitID we want to move, and the TILE x and y we want to move to. The function will:

Get the unit's and the tile's position
Compare the two positions and move the unit closer to the tile by one pixel.
At the very end of the function, if we have not reached our destination, we call the same function in 5 milliseconds.


function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;



 if(x > destX) newX--;
 if(x <> destY) newY--;
 if(y < left =" newX;" top =" newY;">

Now that moves the unit around, but no one is actually calling this function so



Full Code:

<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"

 moveUnit(1000, x, y);
}

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);
}

function moveUnit(unitID, tileDestX, tileDestY)
{
 var unit = document.getElementById("unit_" + unitID);
 var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
 x = getLeft(unit);
 y = getTop(unit);
 destX = getLeft(tile);
 destY = getTop(tile);
 newX = x;
 newY = y;



 if(x > destX) newX--;
 if(x < destX) newX++;
 if(y > destY) newY--;
 if(y < destY) newY++;

 unit.style.left = newX;
 unit.style.top = newY;

 if(newX != destX || newY != destY)
 {
  setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);
 }

}


function getTop(obj)
{
 if(obj)
 {
  return parseInt(obj.style.top.replace("px",""));
 }

 return 0;
}

function getLeft(obj)
{
 if(obj)
 {
  return parseInt(obj.style.left.replace("px",""));
 }

 return 0;
}


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

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

</body>
</html>



For giggles, I used this quick function to test play it. The function adds a number of units and randomly moves them around the screen. My desktop (Intel 2 Duo 2.2GH with 2GB Ram) can handle about 20 units in firefox, before it gets a bit odd.


var playSpeed = 3000;
var numUnits = 0;
var maxNumUnits = 5;
function play()
{
 while(numUnits < i="0;i

Code: Simple 2D Javascript Map - Part 3

2010-04-02T07:36:00.001-07:00

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

2010-04-02T07:25:00.000-07:00

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

2010-03-29T12:47:00.000-07:00

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

2010-03-19T09:45:00.000-07:00

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:

Search it’s Long term memory for a random data variable
Use this data and feed it to a all Evaluators except for “the best”.
Any evaluator that understood the data gets a chance to process it
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

2010-03-19T09:43:00.000-07:00

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

2010-03-19T09:41:00.001-07:00

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

2010-03-19T09:37:00.000-07:00

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

2010-03-12T13:32:00.000-08:00

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)