How to get started with AI

AI means Artificial Intelligence, this two words explain everything about the argument.
Artificial System is a program can execute different operations, Intelligence is the part of the program can take a decision by himself without Human intervent.
The main difference beetween Ordinary program and AI Program is the ability to take a decision without human.

Basically there are two AI systems:

  • AI System can learn from the experience.
  • AI System that can take decision by hard coded instruction.

Now it’s time to see How to get started with AI.

How can you get start?

When you are realizing an AI project, you have to think about some points, ai software has to abstract the real environment and make some calculation.

So what you have to ask to yourself is:

  • Which kind of problem i’m encountering?
  • What’s the entities of the problem?
  • How that kind of entities are related each others?
  • What are the variables of the entities on that specific context?

Example of situation

Suppose you want realize a system about a ball taken by a man in a videogame.

When you are going to encounter this situation you have to define the entities, the variables of the entities and how the entities comunicate and interact each others to create an AI software.

So in this kind of situation the entities of AI system are:

  • The room
  • The man
  • The Ball

After defined the entities compose our AI System, we have to define the variables of the entities related to the situation, so the man have to take the ball.

The necessary variables to define this situation is:

  • Size of room, height and width.
  • Direction of the man and his position.
  • Direction of the ball and his position.

Now we have to define which kind of operations have to be done from the entities of the AI problem.

The basic interaction is:

  • Man movement, the man can move inside the room only.
  • The man can take the ball.
  • The ball can move to any direction.
  • The man have to move in same direction of the ball to take it.

Why i defined this three points in this order? Bacause i’m software developer and in any project you have to think in this way to create the basis of the software, AI System too.

How to get started AI with programming language

Now it’s time to show how to implement an AI system in a real project.

For this example i use this languages and platform:

  • Html
  • Jquery
  • Css

I taken the decision to use this three elements because now a lot of people can understand very well this powerful and intuitive languages.

This example is a real example for understand how to get started with ai.

The software we are going to realize, belongs to hard coded category, our ai is not going to learn from experience. On top of the article i distinguished the two types of AI System, is very important to understand this distinction.

Prepare the graphics elements

Now we are going to prepare the graphics entities on our html page, if you want, you can download my project directly to study the code: download how to get started with ai.

I got the png files to use in my project from iconfinder, so you have to pick a ball and a man pictures to use in html project.

This is the link for man picture: https://www.iconfinder.com/icons/2716080/male_man_standing_warehouse_warehouseman_icon.

This is the picture of the ball: https://www.iconfinder.com/icons/1271427/ball_game_golf_play_sport_sports_icon.

Save the two pictures in a one directory and call the ball as ball.png and man as man.png, we are going to include these png images to our html project.

I didn’t take a picture to represent the room, because in our AI Project the room is the web page space.

After downloaded the pictures, we are going to create a very simple html page to include our ai system, open and editor and paste the code i will show you below, in the end save the file and call it ai_get_started.html.


<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img src="man.png" style="float:left;" id="man" />
<img src="ball.png" style="float:right;" id="ball" />
</body>
</html>

If you did everything in right way, after open the saved file ai_get_started.html, you will see this screen:

Screen shot of man and ball for AI

On the screen you will see the man and the ball, this is the first step of the project, we used the entities defined before, when we was analyzing the project.

Define AI System entities in Javascript

After created the graphics element to work on, it’s time to define the entities in javascript code, so we are going to include the tag <script></script> inside the html code, we insert inside this tags the necessary code to represent the objects.

Now your new html code have to look like as:


<html>
<head><script src="https://code.jquery.com/jquery-1.10.2.js"></script></head>
<body>
<img src="man.png" style="float:left;" id="man" />
<img src="ball.png" style="float:right;" id="ball" />
<script>
$(function(){});
</script>
</body>
</html>

In this code we inserted the istruction $(function(){}), that means to execute our operations after page loaded.

Now is time to define man picture as an object in our code:

<html>
<head><script src="https://code.jquery.com/jquery-1.10.2.js"></script></head>
<body>
<img src="man.png" style="float:left;" id="man" />
<img src="ball.png" style="float:right;" id="ball" />
<script>
$(function()
{
	/* Define man object with height, width and position on the virtual room */
	var man = new Object();
	man.height = $("#man").height();
	man.width = $("#man").width();
	man.position = $("#man").position();
});
</script>
</body>
</html>

We have the defined a JavaScript object to represent the man on the screen and give some essential informations like height, width and position of the man inside the room.

Now it’s time to replicate the same way to define the man, we are going to do this for the ball, here is the code to insert after man.position:

var ball = new Object();
	ball.height = $("#ball").height();
	ball.width = $("#ball").width();
	ball.position = $("#ball").position();
	ball.move_right = 0;
	ball.starting_top = ball.position.top;

We are storing all ball informations we need to move it on web page space, infact we have stored position, move_right(indicate move from right position of ball) and starting top, necessary when the ball collide with the man, this information will be change.

Define AI object interactions and actions

We have created the graphics and we have defined the entities with the essential variables on javascript, now is time to define the actions and interaction of the objects, we have just defined the point and the “example of situation” paragraph.

Now we want the ball move on the screen, from the right to left to man direction, for this we have to use setInterval, a function on JavaScript that execute an operation every seconds defined by us.

This is the code on Javascript to use for move the ball to the man


ball.move_me = setInterval(function()
{

ball.move_right += 20;
$("#ball").css({ "margin-right": ball.move_right + "px" });
}, 50);

This code increase 20x the movement of the ball every 50 milliseconds, that’s nice right? But we need AI hard coded function can take a decision when the ball reach the man, so now we have to introduce new function:

 


ball.move_me = setInterval(function()
{
ball.move_right += 20;
if($("#ball").position().top != ball.starting_top)
{
ball.move_right = 0;
$("#ball").css({ "top": "0 px" });
ball.starting_top = $("#ball").position().top;
}

$("#ball").css({ "margin-right": ball.move_right + "px" });
}, 50);

By this variant of code, you can see a condition inside the code where we check if the top of the ball is the same of his starting top stored information at the beginning, this value change every time the ball collide with the man, so when this happen we teached to our program by code which action have to be done. In this case tha action to be done is repositioning of the ball on the right of the screen.

Add a Comment

Your email address will not be published. Required fields are marked *