What is real?

What connects “Rene Descartes”, the Renaissance Philosopher with Nick Bostrom,the 21st Century Scientist?

It’s the notion of Simulated Reality.

Simulated reality is the hypothesis that reality could be simulated—for example by quantum computer simulation—to a degree indistinguishable from “true” reality.

Nick Bostrom,the Philosopher has dealt with this logic that the world we might be living in is actually a simulation.

This seems to be a nightmarish situation straight from the cult film The Matrix,isn’t it?

Well,in this case there are convincing arguments on both sides of the claim.

According to Bostrum, at least one of the following statements is very likely to be true:

  1. Human civilization is unlikely to reach a level of technological maturity capable of producing simulated realities or such simulations are physically impossible to construct.

  2. A comparable civilization reaching aforementioned technological status will likely not produce a significant number of simulated realities.

  3. Any entities with our general set of experiences are almost certainly living in a simulation.

4.We are living in a reality in which post-humans haven’t developed yet and we are actually living in reality.

The very fact that we’ve made replicas,if not exact of “Worlds” in our video games and we’ve simulated our Solar System(see Universe Sandbox), speaks volumes about the technological advancement humans might someday attain.

Universe Sandbox

 

There are also counter-arguments to this fact. The sheer amount of memory and processing power needed to simulate an entire Universe is exceedingly high.This theory also doesn’t account for the fact that till now, we haven’t got any solid experimental proofs of this fact.

So,are we really living in a simulation? This question is still open to debate and it might well take years before we could reach a desirable conclusion.

 

Advertisements
pp-logo

Compression

The other day, I was watching Silicon Valley on HBO where they were talking about Compression. As the fans will recall, Richard Hendricks invented a compression algorithm so powerful that it can compress your data to the extent where you can access them “instantly” on any device with the most primitive network connections – thus, making the world, a better place. The compression algorithm, named Pied Piper, is said to have a Weissman Score of 2.9 in Season 1 and later improved to a score of 5.2 on Season 3. So what is all this? Let’s examine.

silicon-valley-s1-meme

Compression Algorithms

Compression can be defined as the process of reducing the number of bits required to represent a data. How can this be achieved? Let us take an example. Say we have the following text –

 ABBBCCBABAABCCAABA

This data can also be represented as –

A2B1CBAB1AB1C1ABA

The original string was 18 characters long and the new string is 17 characters long. So that is a compressed string. We can translate the compressed string back into the original string by substituting the numbers appearing before a character the number times with the character. For example, 2B becomes BBB and so on. Although this is not of much use to us, it provides a good understanding of what a compression algorithm tries to achieve.

However, data is not always structured and does not always exhibit repetative patterns. The best compression algorithms on the market prey on just that – repetative patterns in the data. But compression of data varies depending upon what the data represents too. For instance, an algorithm designed for text compression cannot be expected to provide good image compression because the two types of data differ by a wide margin.

When we deal with compression, we classify algorithms into 2 broad categories:

  1. Lossy Compression – Whereby the original data is not guaranteed to be kept exact throughout the compression/decompression cycle, i.e, a part of the data may be lost. This is mostly used in images where an average color of a block of pixels may be applied to all the pixels in the block thereby reducing the file size but also (almost unnoticeable) losing the pixel data from each pixel in the block (ex. JPEG).
  2. Lossless Compression – Whereby the original data is retained to the bit throughout the compression/decompression cycle. Usually used in text compression.

So let’s get down to the various data compressions –

Top 10 Compression Algorithms –

  1. BZIP2 – The BZIP2 program is a free and open-source general purpose single-file compression algorithm developed and maintained by Julian Seward. This program offers a better compression ratio at the cost of speed. It may as well be the slowest among the top existing text compression algorithms. Read more
  2. DEFLATE – This is a lossless data compression algorithm first developed and introduced in PKZIP v2.0 by Phil Katz. This compression algorithm compresses the raw data into blocks with 3-bit headers. While this achieves a lower compression ratio as compared to BZIP2 accross multiple test cases, it does have much higher compression speed. Read more
  3. LZMA – The Lempel-Ziv-Markov chain Algorithm is a lossless data compression algorithm for general purpose use that was first introduced in the popular free compression tool 7-Zip. This offers a comparable compression ratio to BZIP2 while also keeping the decompression speed comparable to that of DEFLATE. Read more
  4. LZHAM – The LZMA compression tool was good. But it made a decent tradeoff in terms of speed for achieving higher compression ratios. The LZHAM compression tool optimizes this tradeoff for a notably fast decompression speed. Read more
  5. GZIP – This is by far the most widely used compression algorithm for all web apps on the internet. The main reason for this is that it has the fastest compression/decompression speed although a little short on compression ratio among all the existing general purpose compression programs. It is also found to be the most reliable compression algorithm. Read more
  6. ZLIB – The ZLIB Compression algorithm is lossless data compression algorithm that holds much similarity to the GZIP compression algorithm. However, it achieves greater compression ratio essentially by stripping off the unnecessary headers and footers in the GZIP compression. It is also a part of the three HTTP compression standards but is not widely used due to faulty support in Internet Explorer. It is however, used by gaming consoles like PS3, Wii U, Xbox 360, etc. Read more
  7. PAQ – The PAQ is a series of compression algorithms that have achieved massive benchmark compressions over the years. While these remain very resource intensive, they also offer an equally astonishing compression ratio. A notable of a PAQ algorithm (PAQ6) was in the KGB Archiver compression/decompression tool by Tomasz Pawlak. Read more
  8. CMIX – This is a new lossless data compression tool that aims to achieve benchmark compression ratios at the cost of high CPU/Memory usage. Developed and maintained by Byron Knoll, so far it has achieved great success. Read more
  9. Zopfli – Developed and maintained by Google, the Zopfli compressor achieves a great compression ratio by combining existing DEFLATE, GZIP and ZLIB compression algorithms at the expense of compression time. This can be thought of as an optimal mix of benchmark compression algorithms and fast compression algorithms. More recently, Google announced a new data compression algorithm that surpasses Zopfli. Read more
  10. Brotli – While Zopfli was a mix of existing data compression tools, Brotli is a whole new tool built from the scratch. It fares better than most existing general purpose compression algorithms achieving optimal scores in all aspects. Google even released a benchmark test between Brotli and the other top compression algorithms which you can view here. Google plans to integrate this compression standard in the web platform. Read more

The Weissman Score

Throughout the series, Silicon Valley, the characters use the Weissman Score to judge the compression algorithm. But, what is this Weissman Score? Is that really a thing? Turns out it is. It was formulated by  Tsachy Weissman, a professor at Stanford, and Vinith Misra, a graduate student, under the request of the producers of Silicon Valley.

As you now may understand, no one compression algorithm can be called “The best” because it always boils down to a tradeoff between speed and compression ratio. However, in order to convey this to a general audience, we need a term of art. The Weissman Score is just that. It factors in both the compression ratio and the speed to determine which of two compression algorithms are better and by how far. While I cannot vouch for it’s validity, it does provide a better way to explain to the audience how awesome “Pied Piper’s compression” is.

weissman-score-formula

With the help of 7-zip, Zopfli and ptime, I was able to calculate the Weissman score of some of the top compression algorithms. Taking the Zip compression as the standard for comparison and alpha as 1.0, this is a table of my results.

Format

r

T (in seconds) W
Zip 1.842955 0.413 1.000000
7-Zip 1.772706 0.603 1.681566
GZip 1.960958 0.554 1.593201
BZip2 2.055101 0.395 1.061615
Zopfli DEFLATE 2.001594 2.046 -1.341592
Zopfli GZip 1.982632 1.958 -1.415829

As is clear from the table, the limitation of this scoring is clearly apparent. Although the standard defines any value for alpha can be used, choosing a value of 1.0 or more can result in negative values of score as in the table above. This limitation is listed on it’s Wikipedia Page in the following words –

Although the value is relative to the standards against which it is compared, the unit used to measure the times changes the score (see examples 1 and 2), and the multiplier also can’t have a numeric value of 1 or less, because the logarithm of 1 is 0 (examples 3 and 4), and the logarithm of any value less than 1 is negative (examples 5 and 6); that would result in scores of value 0 (even with changes), undefined, or negative (even if better than positive).

A detailed description of my test results can be found here.

If you like this post, please comment and share. Thank you for reading.

Are you doing PageSpeed tests? Because you should.

How often do you open up a blog that has good contents but shitty loading time? Not very often. The content you provide to your readers is as much important as how fast you can deliver it. The competition knows that all too well. That is why we have techniques like code minification, data compression, etc. To minimize the loading time. To that effect, Google introduced a beautiful tool in it’s online app store called PageSpeed Insights, and we all should learn how to use it.

PageSpeed is among some of the best analysis tool a developer can utilise to evalute the web content. It gives insights on multi-tier issues like Javascript, CSS, Media, DOM, HTTP Headers, you name it. A site that performs well with PageSpeed usually delivers contents faster. Much of this involves tweaking your code to minimize the amount of data you need to send the end user in order to display the same web content as before, but faster. Although, some of it also deals with “best practices” to avoid bloating of content and other such issues on devices unsuitable for your code (like customising the viewport).

You can download PageSpeed from the Chrome Store using the link:

https://chrome.google.com/webstore/detail/pagespeed-insights-with-p/lanlbpjbalfkflkhegagflkgcfklnbnh

Let’s see a demo of what we can do using PageSpeed. Let’s create a test.html and a test.css file.

test.html

 

<!DOCTYPE html>
<html lang="EN">
 <head>
 <title>Chrome Test</title>
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="./test.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css" />
 https://code.jquery.com/jquery-3.2.1.js
 </head>
 <body>
 
A div
Another div
Yet another div
</body> </html>

And test.css

 div{
 font-size: 22pt;
 }
 #aDiv{
 background-color: pink;
 text-align: center;
 color: blue;
 -webkit-user-select: none;
 -moz-user-select: none;
 }
 #anotherDiv{
 background-color: violet;
 text-align: right;
 color: white;
 }
 #yetAnotherDiv{
 background-color: maroon;
 text-align: justify;
 color: green;
 }

If you open up Chrome and press F12 key to bring up developer tools and navigate to Network Section and then open this page, you will find something like this:

results-1

You can see that the Load time is quite high – 2.34s

So now we turn to PageSpeed for suggestions. Open the PageSpeed tab on the Developer Console and press the Analyze button once it appears. This will reload the page and give you a list of things you should do to improve your score. Let’s see what we got for this demo.

pagespeed-result-1

The suggestions were:

1. Minify Javascript

Notice that we included JQuery uncompressed version. That is why we got this message. We can get rid of this by using the minified version of JQuery. Change the script tag to:

https://code.jquery.com/jquery-3.2.1.min.js

 

 

2. Defer parsing Javascript

There is a possibility that the javascript content changes the DOM Structure of the page, so the browser has no way to know for sure if this will happen and hence, is forced to load the entire javascript code before display a web page. In a Progressive Web App, we must make the assumption that no Javascript runs beforehand. This assumption does not come without some limitations on what we can achieve but it makes a web page faster and more responsive. Therefore, to avoid a blocking of memory and resources due to a script, PageSpeed recommends that we add the script tags towards the end of the document (preferably, at the end of the body).

Another, perhaps more efficient way to achieve non-blocking script execution is using the async attribute. Changing the script tag to:

https://code.jquery.com/jquery-3.2.1.min.js

Tells the browser to continue loading the DOM while parallely downloading the script.

3. Leverage Browser Caching

Caching requests are sent as HTTP Headers from the Web Server to inform the browser what static content our site will be using every time it is loaded. For example, JQuery can be cached so that it need not be downloaded by the user every time. Similarly, other scripts can also be cached into the user’s memory for future use. Caching has grown much from it’s root origins, special thanks to the new Web Cache API that lets sites control and manage cached resources. This is particularly helpful when you have a large content, a part of which you change periodically, while the rest of it remains the same. Using the Cache API, you can let the browser compare the version of the file the user has and the version you are currently serving so that it can update only the necessary parts of the page without reloading the entire page. Read more at Google Developer’s Docs.

4. Minify CSS

Just like Javascript, CSS Minification can also go a long way towards saving data and thus ensuring smaller loading times. By changing to a minified version in our example i.e, loading Bootstrap Minified version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

We expect to see a drop in the load time.

However, there is another issue that needs our attention. While CSS minification helps, we must also try to make our web page progressive. For instance, we might preferably want our viewers to see a checkbox like this:

style-checkbox

However, we can settle for atleast something that looks more or less like this:

checkbox-default

What we can do here is have 2 CSS files, a base CSS declaration and an advanced formatting CSS file. By placing the base CSS file in the head and the advanced CSS file at the end of the body, we ensure that the DOM Content Loading is not blocked due to the CSS formattings. For a typical user with faster connection, he won’t even know the difference. However, one with a slower connection need not be blocked from viewing the actual content due to styling.

So after all this struggle, let us see where PageSpeed landed us.

The results are:

final-result

Here we see a divergence from the trend of the previous result. The loading time has grown much smaller, we can all see that. But what’s even more intriguing is that the DOM Loading time (242ms) is now much smaller than the actual Loading time (627ms). This means that the screen was rendered way before all the content was loaded and thus we have achieved better performance. So PageSpeed does help quite a bit, don’t you think so ?

These are also some of the fundamentals of Progressive Web Apps which are growing popular by the day due to their versatility and design that delivers prettier UX without compromising with contents.

Keeping all that in mind and with PageSpeed at your side, you can make your web page way faster than you imagine and perhaps even increase your SEO Ranking dramatically.

Thank you for reading. I am a little late on my other AI discussion but it will be arriving soon, so stay tuned.

nes-racer

How to make a NES-style game in HTML5

Most of you must have played cool MMORPGs or other browser based games at some point in your life. Speaking of games, remember the Nintendo GameBoy games back in the good ol’ vintage-filtered days? Since we will be learning how we can create a game, why not try and make one of those games? How about “Racer” ?

nes-racer

(Almost) the classic NES Racer

Design of the game

Let’s break the game down a bit, shall we?

  1. We have pixels, not our screen pixels but the game pixels (which, as you can see, are quite larger).
  2. We have 2 states for each pixel: OFF and ON. The pixels defining the racer cars are in ON state while all others are in OFF state.
  3. We have a racer who is controlled by buttons (or additionally, keyboard).
  4. We have randomly generated bad guys.

Now while I personally would love to see you define a racer by code (i.e, draw the active pixels using Canvas API), I will leave that bit out and use pre-packaged PNGs. Why? Because I already tried rendering the elements by hand. It was slow! And resource intensive. Infact, I researched a bit and found that sometimes, it’s better to just use pre-made sprites instead of drawing them every frame. So, we need some assets.

Gathering Assets

You can download the boilerplate here.

Make a folder named ‘nesracer’ in your localhost root. Extract the zip (racer.zip) into the folder. The structure of your folder should look like this:

  • root
    • nesracer
      • sprites
      • racer.html
      • LCD_Solid.ttf

Open up racer.html inside the folder in your favorite text editor. We need a function to draw our Sprites in every frame:

function Sprite(img, width, height){
this.img = img;
this.width = width;
this.height = height;
}
Sprite.prototype = {
draw: function(ctx, x, y){
ctx.drawImage(
this.img,
0,
0,
this.width,
this.height,
x,
y,
this.width,
this.height
);
}
};

We don’t want our player going out of the screen. So we will create a function to prevent this from happening.

<br />function calcBounds(x,y){
cx = (x > (canvas.width-50))?(canvas.width-50):(x < 0)?0:x; cy = (y > (canvas.height-50))?(canvas.height-50):(y < 0)?0:y;
return [cx,cy];
}

For the collision detection function, we are going to use a function by Joseph Lenton with a bit of minor change. Credits to the original author. But if you want something a bit more sophisticated, you can always use Ninja Physics or some other physics engine.

/**
* @author Joseph Lenton - PlayMyCode.com
*
* @param first An ImageData object from the first image we are colliding with.
* @param x The x location of 'first'.
* @param y The y location of 'first'.
* @param other An ImageData object from the second image involved in the collision check.
* @param x2 The x location of 'other'.
* @param y2 The y location of 'other'.
* @param isCentred True if the locations refer to the centre of 'first' and 'other', false to specify the top left corner.
*/
function isPixelCollision( first, x, y, other, x2, y2, isCentred )
{
// we need to avoid using floats, as were doing array lookups
x = Math.round( x );
y = Math.round( y );
x2 = Math.round( x2 );
y2 = Math.round( y2 );

w = first.width,
h = first.height,
w2 = other.width,
h2 = other.height ;

// deal with the image being centred
if ( isCentred ) {
// fast rounding, but positive only
x -= ( w/2 + 0.5) << 0
y -= ( h/2 + 0.5) << 0
x2 -= (w2/2 + 0.5) << 0
y2 -= (h2/2 + 0.5) <= xMax || yMin >= yMax ) {
return false;
}

xDiff = xMax - xMin,
yDiff = yMax - yMin;

// get the pixels out from the images
pixels = first.data,
pixels2 = other.data;

// if the area is really small,
// then just perform a normal image collision check
if ( xDiff < 4 && yDiff < 4 ) {
for ( pixelX = xMin; pixelX < xMax; pixelX++ ) {
for ( pixelY = yMin; pixelY < yMax; pixelY++ ) {
if (
( pixels [ ((pixelX-x ) + (pixelY-y )*w )*4 + 3 ] !== 0 ) &&
( pixels2[ ((pixelX-x2) + (pixelY-y2)*w2)*4 + 3 ] !== 0 )
) {
return true;
}
}
}
} else {
/* What is this doing?
* It is iterating over the overlapping area,
* across the x then y the,
* checking if the pixels are on top of this.
*
* What is special is that it increments by incX or incY,
* allowing it to quickly jump across the image in large increments
* rather then slowly going pixel by pixel.
*
* This makes it more likely to find a colliding pixel early.
*/

// Work out the increments,
// it's a third, but ensure we don't get a tiny
// slither of an area for the last iteration (using fast ceil).
incX = xDiff / 3.0,
incY = yDiff / 3.0;
incX = (~~incX === incX) ? incX : (incX+1 | 0);
incY = (~~incY === incY) ? incY : (incY+1 | 0);

for ( offsetY = 0; offsetY < incY; offsetY++ ) {
for ( offsetX = 0; offsetX < incX; offsetX++ ) {
for ( pixelY = yMin+offsetY; pixelY < yMax; pixelY += incY ) {
for ( pixelX = xMin+offsetX; pixelX < xMax; pixelX += incX ) {
if ( (( pixels === undefined ) ||
( pixels2 === undefined )) ||
(( pixels [ ((pixelX-x ) + (pixelY-y )*w )*4 + 3 ] !== 0 ) &&
( pixels2[ ((pixelX-x2) + (pixelY-y2)*w2)*4 + 3 ] !== 0 ))
) {
return true;
}
}
}
}
}
}

return false;
}

And finally, we write down our code. I have explained each step of the code as comments so you must be good to go. But, you can always ask me for more details in the comments.

/**
* @author Sagnik Modak - www.staying.me/nintendo/racer.html
*
* @param px The pixels of NES in OFF state
* @param rx The image of the user-controlled racer
* @param re The image of the bad guys (basically, inverted racer)
* @param background The background pattern from px data
* @param canvas Reference to the Canvas Element
* @param ctx 2D Context of the Canvas
* @param meX X position of player
* @param meY Y position of player
* @param timerfeel To store the last time any enemy moved (so it feels like NES)
* @param lastrateupdated The last time the rate of enemy movement was increased
* @param rate The current rate at which enemies move (increases slowly)
* @param lost Boolean value for player status. Initially 'false', if lost, set to 'true'
*/
var px = new Image();
px.src = 'sprites/racer-px.png'; //the off pixels on the screen
var rx = new Image();
rx.src = 'sprites/racer.png'; //the racer
var re = new Image();
re.src = 'sprites/racer-enemy.png'; //the enemies
var background, racer, badGuys = []; //storing the patterns makes it efficient
var canvas = document.getElementById('game-canvas'); //reference to the canvas
var ctx = canvas.getContext('2d'); //2D context of canvas

var meX = 80, meY = 140; //intial position of player
var timerfeel,lastrateupdated; //so that the FPS feels like NES
var rate = 10; //the rate at which enemies progress towards you.
var lost = false; //Cannot afford to lose before you start to win right?
px.onload = function (){
createBackground(); //create background once off pixel loaded
}
rx.onload = function (){
createRacers(); //create racer once racer image loaded
}
re.onload = function(){
createBadGuys(); //create bad guys once bad guys image (WTF?) loaded
}
window.onload = function (){
startGame(); //like it says, duh?
}
function createBackground(){
background = ctx.createPattern(px,"repeat"); //create a pattern by repeating px
drawBackground(); //draw the background
}
function drawBackground(){
ctx.rect(0,0,canvas.width,canvas.height); //clear the canvas
ctx.fillStyle = background; //set pattern as fill style
ctx.fill(); //fill it
}
function createRacers(){
racer = new Sprite(rx,50,50); //racer sprite
racer.draw(ctx,80,140); //draw the racer
document.addEventListener("keydown",function (event){
redrawRacer(event); //when user presses any key, redraw racer
});
}
function createBadGuys(){
badGuys[0] = new Sprite(re,50,50); //create the bad guys
badGuys[1] = new Sprite(re,50,50);
badGuys[0].draw(ctx,0,165); //draw the bad guys
badGuys[1].draw(ctx,50,0);
badGuys[0].x = 0, badGuys[0].y = 165; //initial position of bad guys 1
badGuys[1].x = 50, badGuys[1].y = 0; //initial position of bad guy 2
}
function redrawRacer(e){
if(e.which == 37){
meX-=10; //user pressed Left Arrow Key
}else if(e.which == 39){
meX+=10; //user pressed Right Arrow Key
}else if(e.which == 38){
meY-=10; //user pressed Up Arrow Key
}else if(e.which == 40){
meY+=10; //user pressed Down Arrow Key
}else{
meX = meX, meY = meY; //no point in changing anything, just included for clarity
}
c = calcBounds(meX,meY); //see if the new position is within bounds and if not, stop at max or min allowed value.
meX = c[0];
meY = c[1];
}
function redrawRacerButtons(code){ //same as redraw racers, but this time with buttons in NES controller.
if(code == 4){
meX-=10;
}else if(code == 2){
meX+=10;
}else if(code == 3){
meY-=10;
}else if(code == 1){
meY+=10;
}else{
meX = meX, meY = meY;
}
c = calcBounds(meX,meY);
meX = c[0];
meY = c[1];
}
function redrawBadGuy(){ //draw the bad guys
badGuys[0].draw(ctx,badGuys[0].x,badGuys[0].y);
badGuys[1].draw(ctx,badGuys[1].x,badGuys[1].y);
}
function advanceBadGuys(rate){
for(i=0;i 300){ //to loop the bad guys around
cy = 0;
cx = Math.floor(Math.random()*13)*15; //random x position for bad guys
}else{
cy = y;
cx = badGuys[i].x;
}
badGuys[i].y = cy;
badGuys[i].x = cx;
if(isPixelCollision(badGuys[i],badGuys[i].x,badGuys[i].y,racer,meX,meY))
lost = true; //the racer collided with the bad guys, you lost
}
}
function redraw(){
if((Date.now() - timerfeel) > 1000){
advanceBadGuys(rate);
if((Date.now() - lastrateupdated) > 30000){
rate+=10;
lastrateupdated = Date.now();
}
timerfeel = Date.now();
}
drawBackground();
racer.draw(ctx,meX,meY);
redrawBadGuy();
if(!lost){
window.requestAnimationFrame(redraw);
}else{
gameOver(); //whoops, try again?
}
}
function startGame(){
lastrateupdated = timerfeel = Date.now();
redraw();
}
function restartGame(){
meX = 80, meY = 140;
timerfeel,lastrateupdated;
rate = 10;
lost = false;
createBackground();
createRacers();
createBadGuys();
startGame();
}
function gameOver(){
drawBackground();
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.font = '32px LCDPixels';
ctx.fillText("Game Over",canvas.width/2,canvas.height/2);
ctx.font = '16px LCDPixels';
ctx.fillText("Press Start to begin",canvas.width/2,(canvas.height/2)+20);
}

And there you have it. Save the file and open it in your browser (with localhost, ofcourse).

You can see the entire source code at –

www.staying.me/nintendo/racer.html

And that’s all for today, folks. Thank you for reading. If you want to learn how to code a game AI for a complex game, stay tuned till Monday. If you have any comments or queries, go ahead and tap it out in the comments down below. A rating would go a long way.

Yours truely,

Sagnik

Learn to code a Game AI in Python in under 10 minutes – Part I

Today I will show you how you can create create a game AI in under 10 minutes. All you have to do is bear with me for 10 minutes.

This tutorial assumes that you have only basic knowledge of programming and are familiar with at least one procedural language (because we are going to use Python). If not, no worries. You can learn it later too. Let’s focus on the aim of this tiny endeavor.

Open AI

Open AI is an Open Source project on Artificial Intelligence providing a workspace for programmers (such as yourself) to experiment with AIs without much hassle on your behalf. Designing a Game AI required you to design a Game first. Well, we don’t have time for that… What we are interested in is the AI and not the game. The OpenAI Gym project provides us a set of utilities to incorporate our AI into any supported Games. At the moment, let’s just use a Retro-style Arcade game. Gym comes prepackaged with a set of environments based on Arcade Games but you can install fancier environments later.

Installing Open AI Gym

On Linux (tested on Ubuntu 17.10)

  1. Installing Python: We will be using Python 3 for this project. So, even though most Linux environments ship with Python 2.7 installed, we have to do a clean installation of Python 3. Open Terminal and type –
    sudo apt-get install python3
  2. Making sure pip is installed: Pip is the python command line package management tool which should be installed by default but it’s safe to check.
    sudo apt-get install python3-pip
  3. Installing OpenAI Gym: There are several instructions for installing Gym for several supported systems. Head over to Gym’s Github Page to see the specific instruction for your system. If required you might have to install linuxbrew too.
  4. Installing Python Idle: IDLE is a Python IDE developed by it’s creators. This enables us to run an interactive shell for Python. Let’s install this to check out our cool new playground. Open Terminal (if not already open) and run this code:
    sudo apt-get install idle

On Windows (tested on Windows 10)

  1. Installing Python: This is easy as pie for Windows users. Python now provides GUI Installations for your system. Go to their Releases Page and download the correct executable installer for your System Architecture (x86 if 32-bit and x86-64 if 64-bit) and install. While installing be sure to check the Set PATH variable box.
  2. Installing Gym: Open a command prompt window and type in
    pip install gym

Let’s get started

Now you should be locked and loaded to fire up your first OpenAI environment. Open a new Terminal on Linux and type in “`idle“` and hit Enter. It should open up an IDLE prompt.

On Windows, open up a Command Prompt window and type in “`python“` to open an interactive shell.

Put the following code. (Note: Python  IDLE might show a multiline detected error if you copy and paste the code so you have to type it in manually, no shortcuts 😛 ).

import gym

env = gym.make('MountainCar-v0')

state = env.reset()

env.render()

You should see a screen like this:

Screenshot from 2017-12-05 21-46-21

Environment running on Linux

slide

Same one on windows

The goal in this game is to get this car to the top of that mountain with the Yellow Flag on it. The rules of the game are:

  1. You can only push the car to the left (state 0), not at all (state 1) or to the right (state 2).
  2. There is no penalty for going left
  3. Each step you make gives you a -1 point. So, you have to complete it in the minimum number of steps.

The variables for any environment in OpenAI Gym can be categorised into 2 sections:

  1. Observation Space: The data you get from the state of the environment (e.g.,  current position and velocity)
  2. Action Space: The data you put into the environment (e.g., push direction)

For this game the observation space returns you a list of 2 values.

  1. The first one is a measure of your displacement.
  2. The second one is a measure of your velocity.

You can perform an action by specifying a single variable having a Discrete value 0,1 or 2. A value of 0 means a push to the left, 1 means no push and 2 means a push to the right. By learning to co-ordinate the pushes, your AI must overcome the hurdle of climbing the hill. First let’s use a dummy method to achieve our goal. Open a new file named test.py and paste the following code into it and save:

<pre>import gym

env = gym.make('MountainCar-v0')

env.reset()

state, reward, done, info = env.step(2)

vel = state[1]

accl = vel

for _ in range(1000):

 env.render()

  if(accl >= 0 or state[0] > 0):

    state, reward, done, info = env.step(2)

  else:

    state, reward, done, info = env.step(0)

  if(state[0] >= 0.5):

    break

  accl = state[1] - vel

  vel = state[1]



print('Solved')</pre>

This will do the job. Open a Terminal and type in “`python3 test.py“` and you can see the car in action. But this is just a fix for a particular game. There are several paths you can take from here. For instance, you can apply a Neural Network to simulate more than one episodes and at each state, update the nodes until your NN figures out the problem. Or you can implement a Reinforcement Learning Algorithm like I’ll be showing in the next tutorial to improve this AI. If you are familiar with the basics of AI algorithms, implementing one should not be a problem.

Further Reading

Here is a list of resources for learning AI algorithms:

  1. Reinforcement Learning – Wikipedia

  2. Neural Network – Wikipedia

  3. PyBrain

  4. General Game AIs in Industry

P.S., if you have not already seen it, now might be a good time to check out my earlier post about the several Optimization Algorithms. You can also see my Python implementation of such algorithms and try to implement it here. Stay tuned for the next Part to learn how to implement a proper algorithm for such games. Good luck exploring !

If you like this post please do share it and subscribe. If you have a query or would like to add to this post, please comment down below. Thanks for reading.

Our future in the hands of AI

It’s been all over the news. About 3 and a half months before this post, a massive feat was accomplished in the history of AI research, or rather, a popular feat. The Open AI DOTA 2 Bot beat two of the world champions in their own game – 1v1 champ Syed Sumail and Artour Babaev. Now for those of you (including myself) who are not a hardcore DOTA fan, you must be thinking – “Well, ok. What’s the big deal?”. Remember when Deep Blue AI beat Gary Kasparov at Chess? Well, it’s that big a deal. DOTA 2 is one of the world’s toughest MOBA games till date – some would argue it’s “the” toughest. I had a go at it but failed at the basics. It’s just too complex. Mastering the game takes painstakingly long practices. And how would you feel if years of your practice was surpassed by a week-long trained AI ?

Turning now and looking back to the last decade, we have to ask ourselves where we stand today. With things like IBM Watson, Open AI and others, what future are we looking forward to? Is it a dark-deep cataclysmic world full of mindless metal bots hunting for humans, or is it like in Astro Boy? That, only time will tell.

Needless to say, we have been assured that we are not in danger. And in my humble personal opinion, I don’t think we are. Because today, AI research has become very domain specific. While Open AI is a community to further the existing knowledge we have about Artificial Intelligence, IBM Watson (a coginitive platform) is more about the commercial application of that knowledge and integrating it into a business model for better outcomes. We also have Siri, Cortana and Google Assistant which are more focused on personalizing your data using Machine Learning techniques. And after all, none of these are programmed to kill, are they (except, maybe that DOTA2 bot) ?

“Why didn’t you guys just hand the world over on a silver platter?”

“Maybe we did”

I, Robot (2004)

While I agree that we should not hand the world over on a silver platter or a motherboard, it is a fact that most of us today depend heavily on machines to automate our tasks for us – at home, at school and even while searching for a news. I mean, when was the last time you heard something went down and went over the newspaper to find the news? We just don’t have time for that anymore. No, we can just type it in Google and bring up what we need. The only time I wrote a letter was in high school for my English exam. Personal letter just doesn’t exist, substituted completely by e-mails. So just maybe, we did. Has it been a bad experience for us? I don’t feel that way.

The only being capable of destroying humanity, is human himself.

And we are already doing it. We don’t feel the need for an AI to do it for us. Do we? Let me know in the comments down below. And thanks for reading.

P.S. Stay tuned till tuesday for my next post where I will show you how you can create your very own game AI in under 10 minutes.

If you like this please comment and share.

Top 5 Presentation Creation Tools for your website

Developers, type no more! There are tools on the market that you probably didn’t know about that let you create awe-striking slides and carousels with just a few clicks. While Bootstrap Carousels would be in every designer’s toolbox, these plugins and apps seem to work just as well and maybe even better. This list of the Top 5 Slide Creation Tools will give you a real headstart into your app development.

RevealJS

Reveal JS Home

Being innovative has never been easier on the web. With this presentation framework, you can build One-Page-Wonders. Forget about the tradition carousels and slider- this gives you a whole new level of smooth. Don’t take my word for it. See it to believe it. It also features a bunch of other capabilities like exporting to PDF, sharing on slides.com and using Markdown contents. Read more on Github

 

CSS Slider

CSS Slider App Demo

Create beautiful sliders with the CSS Slider app

Are you very picky about your plugins? Or simply want a purely CSS-based library? Either ways, this is the right choice. This helps you create seamless CSS Slides without a pint of coding (Yes, you heard me right!). Downloadable for Windows and Mac Platforms, this lets you customize your slider bottom up using a WYSIWYG interface. And to add icing to the cake, it also supports Retina-display for better resolutions. So fret no more. Download today!

Slicebox

Slicebox demo

Slicebox 3D rotate effect

While 2D gets the job done quite well, sometimes you need a 3D plugin to build a great design. Slicebox JQuery Plugin is the way to go. It’s small, it’s free and it’s Open Source! Read their docs over a Github and download the code.

MaterializeCSS Slider

MaterializeCSS Slider Demo

Right-aligned MaterializeCSS Fullscreen slider

MaterializeCSS is a beautiful CSS/JQuery framework for material design popularized by Google. Are you a fan of material design? Do you want a carousel tailored to your site’s material blocks? MaterializeCSS understands. It provides you one of the richest material 3D carousel experience. They also have a plain slide feature in case you wanna keep it clean. You are missing out if you haven’t tried it yet.

SlidesJS

SlidesJS Standard Demo

The standard SlidesJS demo

Want something simple but elegant? You are bound to fall for this eye-catchingly simple slideshow plugin for JQuery. Download the code at www.slidesjs.com and start creating beautiful sliders.

If you find this post helpful please dont forget to like, share and comment. Thanks for reading.