Challenges faced

My application's modules,

1. Race game
2. Cows and Bulls
3. Bubble break

Challenges faced:

1.Race game:

• Animation done using setInterval is not optimized. It lead to slower processing. Overcome by using animation frames, an option provided by all major browsers to optimize animations in canvas.
• Cross browser compatibility in event handling . Used jquery initially to overcome this problem. But then I knew that using external libraries is always an overhead. So used addEventListener function which works well in all major browsers.
• What to render? Every object in the game world if rendered may pull down the game speed. Overcome by writing a function to find objects which are in current canvas view.
• Realism: to bring realism to the game, lot of factors like acceleration, top-speed, lateral steering movement, aftermath of collision have to be considered which is challenging.  
• Event queue maintenance: the very idea of processing events is challenging. Improper way to process may bog down the performance. Event queue is maintained to overcome this problem. 
• Collision detection: For every loop detection algorithm has to be run in optimized way to find any collisions.
• Gamestate and dashboard: Since pausing the game was also included the gamestate to be maintained became complex. In addition to this, when displaying time in dashboard these game states had to be kept in mind which was really a challenge.

2.Cows and bulls:

• Dictionary words only: The guesses have to be validated against dictionary words. But the dictionary words should be loaded into the application dynamically. Overcome by using AJAX request to local dictionary file.

3.Bubble break:

• Writing event driven code: Since i was using nowjs and nodejs everything needs to be written in a event driven way. Using callbacks and stuff which was really challenging initially.

Bubble breaker game

1.Game description:
Its a multiplayer game played over network. It keeps track of number of bubbles popped by each user. The scoreboard shows scores of every player to every other player playing the game.

2.Rules:
Bubbles are automatically generated at the rate of one bubble per 2 seconds.
On clicking a bubble it pops/breaks. One point is added for popping one bubble.

3.Implementation:
Server is written using node.js
Event driven programming approach is used.
Now.js library is also used. It allows calling of server side functions from clients and vice versa.

Cows and bulls description

1.Game description:
Aim of user is to find the target word set by the computer by guessing. Each guess will be responded by number of cows and bulls.
If an alphabet in your guess is present in the target but not in the current position then you get a cow.
If the position also matches exactly you get a bull.

2.Game rules:
There are three difficulty levels/word length (3,4 and 5).
For word length ,
3 --> no of guesses allowed is 10
4 --> 15
5 --> 20
Only dictionary words are allowed. Alphabets cannot repeat in target or guess.

3.Implementation:
Main process is,

• get word from user
• validate
• display number of cows and bulls

Validation involves,

checking for character repetition, checking for correct length and checking if the word exists in dictionary.

I load dictionary into my application using AJAX request and then use it rest of the time.

My race game description

1.Race game description :
Aim of user is to take his car to finish line in least time/position possible .

Controls:
up --> accelerates the car
down --> brake
left -->steer left
right --> steer right
space --> pause the game

Rules:

• User car starts always at last position
• Car has a health of 100. Each collision reduces health by 25
• On health becoming 0 user car explodes and game finishes
• Collision with other cars result in explosion of those cars. This also reduces user car speed by half.

Other details:

• Steering left and right is free when speed of car is low. It becomes more constrained at higher speeds
• Car cannot accelerate beyond top speed.
• Steering away from road is not possible.
• Braking produces drastic speed reduction when compared to stopping acceleration

2.Main parts of Source code:

Classes:

Car , road divider, trees are all functions , which acts as classes to generate objects

set functions:

The set functions initialize attributes of objects and other elements.

eg: setCanvas function initializes canvas, gets context etc...

draw functions:

The draw functions are called during rendering part of game loop. 

eg: drawObstacles will draw other cars in the updated position.

event handlers:

Interaction with the game is only possible because of these event handlers.

window. addEventListener() function is used to add event handlers for key down , key up events.

Then in the handlers, the events are just pushed to the event queue. No state change or drawing is done here.

process events:

Brain of the game ! For each instance of gameloop one event is popped out and is processed. For example, if key down is the event and the key pressed is right arrow , then the flag which says the car is moving right is set to true and that's it. Drawing is not done here too! draw function sees this variable/state change and moves car position to right accordingly.

state variables:

Game state is maintained and updated using variables. For eg, gamestate = "paused" 

The Game Loop:

Here lies the heart of the game. This loop runs at the rate of 60 fps. Its done using setInterval. For optimization requestAnimFrame is used.

Game loop does the following,

• process events
• updates state variables
• clears the canvas
• draws objects

3.The dash board:
Apart from canvas there is a table showing game details , pretty much like dash board.
Contents of dashboard are,

• Distance covered -> based on pixels , updated for every gameloop
• Position --> based on how many cars have been overtaken. Updated for every gameloop.
• Speed --> based on car speed. Updated for every game loop.
• Health --> based on number of collisions. Updated once a collision is detected.
• Time --> updated every second.

The racing game

In today's post i will tell about the racing game i am creating. The game is almost complete. I will now explain what are the features i added and how it came out. 

Objects everywhere !
If you wanna learn Object oriented programming, start developing a game. It comes naturally. Its always easy to identify objects in game. For example in my game, car,obstacles,trees,road dividers are objects. It's easy to implement this way instead of having global variables for every thing(its almost impossible to do it that way!). So most of the time my refactoring process would include making the code more object oriented and reusable. Main advantage of doing that is the flexibility you gain. In games many times you need to scale up and down variables. Unless you go for a modular , object oriented approach you would certainly fail.

Event Handling --> look out for cross browser compatibility
In any game human computer interaction is done using some event handling mechanisms. In Javascript you can perform event handling in lot of ways. Most of the times it will not work in all browsers in the same way you expected.
-->One simple solution is to use jquery library to handle events. The compatibility issues are taken care by jquery function itself.
-->Next solution is make your event handlers work somehow. For me adding event listeners in the following way worked like a charm in all browsers,

window.addEventListener('keydown',doKeyDown,true);

then you write doKeyDown function as,

function doKeyDown(event)
{}

To find the key which has been pressed down you do,

event.which

it gives the keycode of the key pressed.
For example,
if(event.which==32)
{
    alert("you pressed spacebar");
}

Processing events
Handling events is just the beginning of a very important job called processing events. After a key is pressed you may wish to do something. For example, after pressing left arrow you may wish to turn your car left.
What beginners mostly do is( i say this because that's what i did quite a few times before knowing the right way to do it) do all the processing inside the event handle function itself. Games doesn't work that way at all !!
The correct way to process events is to, 

• add events to an event queue 
• in every instance of gameloop remove an event from the event queue and process it

Unless you do this kind of implementation, some events wont be caught and it may ultimately affect the performance of the game.

The canvas 

Canvas is the place where you will show your game. That's where you can draw stuffs , put images etc... While developing the game i developed it using constant height of 500px. I used 500 in my calculations everywhere. But after the game came out well, it looked small. 

The way to proceed is to expand the canvas in CSS. You give more height to the canvas in CSS it automatically expands the canvas to that size. However number of pixels still remain the same.

In this way you can save processing power too :P

Some browsers do anti-aliasing themselves when we expand canvas like this.

More concepts in posts to come ! see you in next post.

HTML 5 gaming

Few people around me were working with HTML 5. After seeing those cool stuffs it was irresistible to start working in it. Canvas element is the most attractive part of HTML5 according to me. Using it we can develop very cool stuffs like animations and games!
I decided to develop a game. I was playing Road Fighter ( classic nes game, which makes me nostalgic whenever i play it now ) yesterday night. So i thought of developing a similar game.
Games require lot of intelligent coding. I was introduced to game development basics by a colleague. So i don't use while(1) for looping infinitely anymore.
I started of with a simple gameloop for which i set an interval of 1000/60 . Which means the loop runs again and again after 1000/60 milliseconds. (ie)  1/60th of a second. This gives us 60 frames per second speed in which our game runs.
Inside the game loop i called functions to drawlines and then clear the canvas.
By drawing lines vertically and moving it down for every loop i had a road movement like effect.
Next i placed mycar at the bottom of the canvas.
Used jquery to capture key press and moved the car left and right based on keys i press.
Finally made another car to come in opposite direction.
Still lot of things left to be complete, but before moving any further i thought of refactoring my code.
At this point i came across requestAnimFrame function which gives smooth animations in html5.
It took some time to figure out how to use the Animation frame. It works like this, our gameloop has to be given as a callback function to the requestAnimFrame event of windows. Inside the function which gets called when we request a animation frame, we setInterval of 60fps and call our gameloop after getting a new animation frame each time. I don't know how exactly it speeds up my animation/game. But i will research and tell you soon.
Stay in touch. See you in next blog.

Cows and Bulls : back to JavaScript

No ROR today. My aim for the day was to develop cows and bulls game. Sadly many friends of mine didn't know about the game! Its a very popular time pass game in school.

http://en.wikipedia.org/wiki/Bulls_and_cows

check this link to know the rules of the game :)

What i did is basically a word game. The word to be guessed correctly can be a 3 or 4 or 5 letter word . User's can adjust word length.
So the major problem here is , the words chosen by computer and words given by users as guess should be all proper English words.
To solve this problem,

• i downloaded a text file containing all dictionary words
• made a new file containing words of length only from 3 to 6 using grep command
• from inside the webpage sent a xmlhttp request (AJAX request) to the local file
• fetched the words and loaded them into array
• used this array to check if the word entered by user is a proper english word

The solution worked perfectly on Firefox. Chrome didn't allow AJAX request to be sent to some local file. Seems like they are strict with security issues associated with accessing resources in local system.

I have to find some workaround for making the game work in Chrome.

To add more spice to the game, i implemented a scratch pad kind of thing ( using tables) which has all 26 English alphabets. Users can mark them red/green so that they can easily track what alphabets are rejected(red) and what alphabets are present(green).

It looked like a small application when i started coding. But it took one full day to fix all bugs and make it work smoothly in a user friendly way.Wrote the game from scratch using pure JS and html.

I shall share the code with you soon.

See you in next post with more interesting applications :)

ROR strong and steady

My experience:
Today opened my project again and decided to do a bit of refactoring. The command
rake routes
was very helpful. I saw the route name there and modified my redirect to statements. Code became more readable and clear.
Then came the devise problem. Controller of devise was nowhere to be seen ! After sign out i wanted users to be redirected to home page. But how do i do it without the controllers of devise. (for those who don't know devise,.. its a gem which helps in implementing authentication in your application) After a bit of googling i found that everything i needed to know about devise is in wiki page of devise in github itself!
by implementing the following private method in application_controller i was able to control the redirection.


  def after_sign_out_path_for(users)
    home_path
  end


in routes i have written this,
 get "/home/index", :to=>"home#index", :as=>"home" 
so everything works nicely as expected !
after the user signs out , action: index of controller: home is called.

ROR more concepts

Control over caching:
ActiveRecord comes in handy for doing lot of operations on associated tables and models.
For example, consider the following scenario

class Person <ActiveRecord::Base
    has_many: accounts
end

class Account <ActiveRecord::Base
   belongs_to: person
end

in the above case , the following association is made,
a person has many accounts and each account belongs to one person.

This association creates many methods automatically with the help of meta programming!
one such method is 'accounts',a instance method for Person class.
we can do,
@person1.accounts
this will fetch all accounts of person1.
next we do,
@person1.accounts.size
this will tell number of accounts of person1. Normally people would expect that the above statement will run some query again to find the size. But its not the case. During first statement itself @person.accounts is cached. Next time when we do, @person.accounts.size the cached copy is only used, thus saving lot of time !
What if we specifically require to fire a new query for finding size (since some other application could have changed the database in meantime). There is a way to achieve it.
@person.accounts(true).size
will fetch the current size after executing a new query instead of using cached version of orders.

My experience today:
Probably many might not have heard about collaborative story writing . There are few websites for the purpose though. It means user's registered in the website can start writing a story and also contribute to  stories written by other users. I took up this application for learning Rails. Today is my first day. I implemented sign up,sign in and other authentication stuffs using devise gem.
Its a very neat and efficient gem for doing all sort of functionality like "forgot password" , "remember me" etc..
I designed the basic schema of my application and started coding.
I implemented "edit profile" functionality for users. It would seem very less for a day. But as i mentioned in my previous post learning curve of rails is very steep. I will be able to speed up once i get hold of Rails :)
See you in next post with more interesting stuffs! stay in touch.

ROR day ??

I implemented an authenticating system for my sample rails project. Learnt more about controllers . Will update more info in future !

ROR - things i think u must know!

database.yml
Although rails follows 'convention over configuration' you need to configure things like database before working on a project. database.yml is the database configuration file for any Ruby on Rails project. It is present under the config directory of your project root folder.
So what is yml ? its a file extension of YAML files.
YAML --> YAML ain't markup language. Yes , it is a recursive acronym :)
However when it was being developed YAML meant yet another markup language. It was then changed to current name to stress the importance of data rather than markup.
In nutshell its just a human readable data serialization format. NOTE: it uses strict spacing. I missed a space and managed to fix the error only after an hour !

RESTful way!
In rails we do applications that are RESTful.
A resource is generally associated with entities which can be created,read,updated,deleted ( CRUD operations ).
I will explain what is RESTful with an example,
suppose you have a website (www.vehicles.com) that deals about different vehicles.
Now,
www.vehicles.com/lorry/wheels/2
This is RESTful. It clearly means you are accessing the 2nd wheel of a lorry.
the same can be implemented as,
www.vehicles.com/getvehicleaslorry/parts/getpart?id=2
It looks horrible and it is certainly not RESTful.

In Rails RESTful way comes naturally. You tend to have a controller for a resource and actions like create,destroy follow.

Models and ActiveRecords.
Every model inherits from ActiveRecord::Base.
Understand that ActiveRecord is a module. Its like a namespace. Base is a class inside it.
The ActiveRecord::Base class gives methods to access the records/fields of the table corresponding to that model using objects of that model itself.
For example, we have a users table which has the field name.
Now in the model User.rb,
user=User.new(:name=>"raj") 
will create an object user.
user.save
will save the object as a record in the users table.
Instead of two separate statements you can do
User.create(:name => "raj")
It will save create a record in user table having name "raj"

ROR falling deeper , hoping i could climb up

I feel am learning something about Rails continuously. But at the end of the day the clarity is missing. I would now tell one thing which i understood , which i feel everyone must know before learning rails.

The MVC architecture. Rails allows you to build applications that follow MVC architecture.

M--> Model --> contains business logic and database interactions

V--> View --> contains code for front end

C--> Controller --> contains the flow of the application. Links view and models.

So what happens when a HTTP request arrives??

• First it hits the routes.rb file where we have our routes specified
• After reaching routes it knows which action of which controller to hit. It hits that action.
• The controller then interacts with model if necessary and then view corresponding to that action is hit. View is rendered and displayed to the user !

More about rails in future posts !

ROR day 2

The amazing thing i was mentioning in last post is "Scaffolding" . Not just scaffolding, but how it adjusts so nicely .
I used,

rails generate scaffold stickynotes

what Rails did is create Stickynote.rb as model and stickynotes_controller.rb as controller. I was wondering how did it automatically made the model as singular. I decided to experiment and did this,

rails generate scaffold bus
and i half expected it to create a model called bu. But it made the model as bus.rb and the controller as buses_controller.rb. Great work pluralizing!!

It also underlines one important point. In rails its all about conventions. 
Into my second day in learning rails i feel the learning curve is pretty steep. And the reason for that according to me is the stress on conventions. There are lots and lots of conventions adopted and to be followed. 
Will post more about concepts in posts to come !

ROR introduction

Today was consumed in installing rails and making it to work. Was amazed by the power of Rails framework ! Will tell the reason for my amazement tomorrow. Stay in touch.

Ruby final day

No sessions today. Just more and more reading about Ruby's syntax and few concepts. Went through tutorials here, http://ruby.learncodethehardway.org and finished 41 exercises.
Will post more about ruby if i come across anything interesting and worth mentioning.
See u in next post! 

Ruby -metaprogramming,send,self and stuff !

Function overriding and overloading:

Function overloading

I will tell how the interpreter sees this code,

• inside the class we have a function called 'f' defined in line 2
• now the same function is defined again at line 5. So the previous definition of function 'f' gets overridden completely.. in the sense the previous definition is lost !! Note that this happens even if the number of parameters vary! In C both functions will exist.
• In line 8 the function 'f' is redefined once again . So obviously the previous definition (in line 5) is forgotten or lost. 
• So when you call f from your main program, the 'f' defined in line 8 gets executed.

Wondering how a.f() in line 15 got executed??

That's because 'f' in line 8 has a default parameter . When you have a default parameter you can call the function even without passing any value for that parameter. However if you specify some value the value you sent will override the default value.

so line 15 produces "raj" as output and line 16 produces "kumar" as output.

Ruby doesn't support function overloading like C++. However Ruby has the following implementation which is similar to function overloading,
def fun(*args)
end
this function can be called using any number of arguments and any type of arguments.
args is an array which holds these arguments. In a way this is function overloading.
Function overriding happens the same way as in other languages like C++ or Java.

Self object explained:

self object in ruby

self is always unique at a given point of program execution. It holds the current object of execution. Understanding self object clearly will give you deeper insight on ruby itself. Without sound knowledge about self it is difficult to understand how a completely object oriented language like Ruby works. self is analogous to this keyword in C++. I wrote above program to see the value of self at various places in a simple ruby program.

Output of self object demo

From this output we can see that, inside a class the self object can be a the class itself or the particular instance depending upon where it is used.

Inside an instance method self is the instance object

Inside class method or body of class it is the class itself(here A)

In the main program and methods outside classes, self is main object.

Send method in Ruby: 

send method and opening a class

send is a way of calling methods. It takes the method name as the first parameter and the method's arguments as remaining parameters.

In the above example, function 'f' is called using send.

Tip: self.class.send can be used to call the class method from an instance!

Output of send demo

Meta programming:

method_missing --> a function which gets called when a method is not available in the class. For this to work for class methods define method missing as class method . 

In the code i have shown above i have defined method_missing both as class method(using self keyword) and instance method.

In the instance method, method_missing , dynamically new methods are created!

In this example,

• mul_3(4) in line 16 will pass the control to method_missing in line 5
• now a new lambda is created which does the multiplication
• define_method is called using send in line 10, which defines a method of name m and block l.
• finally the created method is called in line 11 using send. a is the argument passed.

Note: define_method is an inbuilt method which is used to dynamically create methods. It can be used as class method only and not as instance method

Ruby deeper insight

Had a busy day exploring ruby. All my explorations in next post! 

Ruby - more concepts

Module:

Simple module implementation

Here both the module and main program is in same file. In almost all cases they won't be !! Modules are like libraries. You will be having it in separate file and including it whenever you require that functionality. To include a module you need to use 'require' keyword. 

require filename_with_correct_path

where filename is the file which contains the module you are including.

Arrays and Hashes:

Arrays,hashes and looping through them

Arrays -- same as arrays in other programming languages. Heterogeneous in nature.

Hash -- Key value pair. Key and values are separate arrays! Its also heterogeneous. 

The above program shows various ways of accessing contents of arrays and hashes. Output is given below.

Output of arrays hashes program

Looping techniques:

Looping techniques

For C programmers, Ruby's looping techniques may seem complex. But its not the fact. They are very simple and powerful once you get hold of it. Above program shows you various simple looping techniques applied commonly.

Collection,mapping and array initialization:

Collect,map and arrays

Collect and map are very similar, except the fact that collect returns an array while map returns enumerator. Initializing an array is also demonstrated and it can be painless unlike in C or C++. 

Output of collect,map

Class and inheritance:

Class,inheritance

@varname - varname is a instance variable => accessible through instance of class only

@@varname - varname is a class variable => accessible through class only using scope resolution operator

unless you specify accessor or write methods of your own inside class the instance variables remain inaccessible outside the class. 

class A < B =>class A is inheriting from class B => B is superclass of A

super calls the method of superclass having the same name as the method inside which super is used.

Output of class,inheritance

Blocks:

Simple code demonstrating the use of blocks

Output of the above block program

Proc and lambda:

Sample program demonstrating how proc and lambda work

The above program helps in understanding how to use proc and lambda. Using it in optimal way depends on programming logic of the user.

There are 2 main differences between lambda and proc. They are,

1. Proc acts as inline function. So a return statement inside proc would mean returning from the calling function itself.A return inside lambda however returns control to the calling function
2. A proc can work without throwing any error even if the number of arguments doesn't match. A lambda will throw an error saying wrong number of arguments.

In the code i have given above , remove the commented lines and try understanding the errors thrown for better understanding.

Ruby day-2

I need to make clear the difference between dynamically typed and a dynamic language.
Both are different. A dynamically typed language allows operations like adding number to a string etc... whereas a dynamic language allows you to add functionality that static languages allows you to add only before compile time.

Today i saw more tutorials on Ruby. Learnt about file operations like opening,reading,renaming,closing files in Ruby. Syntax is absolutely simple and easy when compared to other languages like Java. Learnt a little bit about modules too.

Will be posting more soon.

  

Ruby Introduction

Ruby is an object oriented , dynamic programming language which is designed in a way to use it easily. It's created with an aim of making programmers more productive by allowing them to concentrate on logic rather than implementation and syntax.
By object oriented i mean everything is object in Ruby. Even primitive data types of other languages like numbers are objects in ruby.
For example, you can actually do,
5.to_s
It returns "5" which is a string. 'to_s' is a method which acts on the number(object) 5 and returns a string!!
You can verify what am saying by typing the following command,
5.class
It returns the class name of 5, which is 'Fixnum'
"hello".class would return class name as 'String'

By the way did i tell you to use irb(interactive ruby shell) for trying out these commands? 
It's very helpful in exploring ruby as a beginner.
There are tons of websites providing you tutorials on Ruby.

Most programmers are strong only with the syntax of C. Sadly , Ruby's syntax is very different from C's. Today i was just trying out variable initialization, getting and setting values, arrays, loops, conditional statements in Ruby. It will take some time for getting used to the syntax. I will work with some interesting program and keep posting more about Ruby in coming days.
See you in next post! 

Javascript more concepts

Javascript engines:
    I hope you have read my post about browser engines earlier. Modern browsers have separate javascript engine(for rendering Javascript)  and rendering engine (for rendering html content).
Latest Javascript engines are,

• Carakan -- used with Presto , developed by Opera for its browser
• V8 -- used with webkit in Chrome, developed by Google
• Nitro -- used with webkit in Safari, developed by webkit developers and apple
• SpiderMonkey --used with Gecko in Firefox developed by Mozilla

IE has always lagged behind in its performance when compared with other browsers. It had no separate JS engine before release of IE9 which uses a JS engine called Chakra.
It is to be noted that each engine’s implementation varies and it directly affects the speed and performance of the browser. Read more about browser wars. They are very interesting.

Objects in Javascript:
    You might have used arrays,strings,date in Javascript. Those are built in javascript objects. Javascript supports object oriented programming. But it is somewhat different from other object oriented programming languages. Here i will explain the reason with a simple program, see the picture below for code.

Code demonstrating basic object usage

• The function Human is like a class
• Parameters passed to the function are like parameters to constructors.
• name,age,sex are data members of the class
• show is a method of the class

Note:

• Human is an object and human1, human2 etc are instances of the object
• In the above example we can declare an instance of an object even without specifying parameters. For example, human3=new Human(); Now name,age,sex will be undefined for this instance.
• You need to associate a method to an object (Here look at the code, this.show=show )
• You can access datamembers and menmber functions using dot operator (for example, human1.age=40 )
• The keyword “this” refers to the owner of the particular object/function.

Timers:
    Events can be executed based on timing in javascript. This is a core functionality of javascript.
we have two functions helping us out,

1. setInterval(function,time in milliseconds)
2. setTimeout(function,time in milliseconds)

first one executes the given function after every time interval you have given.
second one executes the given function only ONCE after the time interval you have specified.
Stopping a timed event is pretty simple.
    clearInterval(timerVariable)
    clearTimeout(timerVariable)
timerVariable is the variable in which return value of setInterval or setTimeout is stored.
For example,

myTimer=setInterval(function{ alert(“hello”);} , 1000); //alerts ‘hello’ every second

clearInterval(myTimer); //stops alerting

JS libraries:
First i will list some popular JS libraries

• jquery (the most popular one !!)
• prototype
• script.aculo.us
• MooTools
• underscore.js
• backbone.js

A JS library has collection of functions (written in javascript.. understand that the libraries are nothing but JS files!!) which help you achieve some complex task(when you code it yourself in JS..) easily.

jquery has many functions that allow you to decorate your page or make it more fancy
backbone.js allows you to implement mvc architecture in large javascript files
backbone.js uses underscore.js
underscore.js has many functions which allows you to write functional code in JS very easily.

Usage of these libraries should be avoided whenever possible, because they make your code slow.. you can’t tweak little things and i personally think it makes you feel that you are not in control of your own code.
Always remember that native javascript functions can achieve whatever you have done using some JS library.
See you in next blog!

Javascript solutions to day2's questions

Today i would discuss about the solutions i came up with for the 3 problems i discussed in previous blog,
Crashing a browser:
The first idea i got is to write a simple recursion and crash the browser. This technique works great for C programs. But it never worked for me in crashing browsers. May be the javascript engines were too clever to avoid crashing!
Then i tried infinite loop .. which worked well in crashing the browser. In case of firefox the browser crashed, whereas in chrome only the tab running the code crashed. Other tabs were working fine. This is because chrome uses different threads for each tab.
However both firefox and chrome gave me the option to stop the script running as it is crashing the browser !!

Pattern:
Animation using sprites ! I have coded that already and that seemed a perfect answer for pattern problem. In addition to that i tried working with ‘canvas’ which is a new functionality added in html5.
It allows you to draw beautiful patterns.
What i decided to do was allow the user to draw his own pattern in the canvas.I used event handlers to find the mouse position and then draw line tracing the pointer. Event handling is an area which has many cross browser compatibility issues. It took some time to find suitable functions that worked well both in chrome and firefox.
Finally i put the animation and this canvas on the same page and did little coding which makes the animation to stop whenever the user draws and resumes when user stops drawing and comes out of canvas.

My own programming language:
It turned out to be my most favorite question after i finished it. I decided to create a language similar to assembly language. Remember x86 language? which uses instructions like mov,add,sub etc...
I used js object which allows you to store key-value pairs for storing variables and their values.
I consciously put effort to improve code-reusability and modularity. But then realised that without conscious efforts too, i would have done the same refactoring. I still firmly believe designing code is all about the programmers instincts. Good programmers do it in a better way !
will upload codes in a separate post.
See you in next post !

Solutions (programming language)

File: proglang.html

<!DOCTYPE html>
<html>
<head>
<title>My programming language</title>
<link rel="stylesheet" type="text/css" href="proglangstyle.css"></link>
<script type="text/javascript" src="proglangscript.js"></script>
</head>
<body>
<div id="codearea">
<h3>Enter your code here</h3><br>
<textarea id="code" rows=10></textarea>
</div>
<div id="outputarea">
<h3>Output</h3><br>
<textarea id="output" rows=10></textarea>
</div>
<div>
<input type=button id="run" value="Compile and run"></input>
<input type=button id="check" value="check variable values"></input>
<input type=button id="clear" value="Clear all"></input>
</div>
<div id="rules">
<h4>Syntax rules</h4>
<p>
More like assembley language.<br>
Data types<br>
number --> integer<br>
text --> single word surrounded by single quotes<br>
<br>
Note:<br>
Variables automatically get declared if not declared already when used in destination field (eg: add a,10 //creates a variable a and stores 10 in it)<br>
Spacing is strict. only one space in a statement and it is placed between keyword and arguments.<br>
adding texts leads to concatenation<br>
<br>
Instructions:<br>
mov dest,src //dest=src<br>
mov variable,number<br>
mov variable,text<br>
mov variable,variable<br>
<br>
add dest,src //dest=dest+src<br>
add variable,number<br>
add variable,text<br>
add variable,variable<br>
<br>
similarly sub,mul,div works<br>
<br>
show varlist<br>
varlist --> variables separated by commas (eg:show a,b,c)<br>
It prints values of the variables listed<br>
</p>
</div>
<div id="sampleprogram">
<h4>Sample Program</h4>
<p>
mov a,10<br>
add a,20<br>
mov name,'raj'<br>
add name,'kumar'<br>
mov b,2<br>
mul c,8<br>
div c,b<br>
show a,b,c,name<br>
</p>
</div>
</body>
</html>

File: proglangscript.js


window.onload=initAll;
var vartable;
var output;

function initAll()
{
initialize();
document.getElementById("run").onclick=getCode;
document.getElementById("check").onclick=checkVarValue;
document.getElementById("clear").onclick=clearAll;
}

function initialize()
{
vartable={};
output="";
}

function clearAll()
{
document.getElementById("code").value="";
document.getElementById("output").value="";
}

function checkVarValue()
{
var varname=prompt("Enter variable name:","");
if(varname)
alert(vartable[varname]);
}

function getString(str) //returns string after removing quotes
{
return str.substr(1,str.length-2);
}

function whatIs(x) //returns whether x is a number or variable or text
{
var textpattern=new RegExp("\'.*\'");
if(isNaN(x))
{
if(vartable[x])
return "var";
else if(textpattern.test(x))
return "text";
}
else
return "num";
}

function move(movstmt) //code for processing move statement
{
var param=movstmt.split(",");
var dest=param[0];
var src=param[1];
switch(whatIs(src))
{
case "num":
vartable[dest]=parseInt(src);
break;
case "text":
vartable[dest]=getString(src);
break;
case "var":
vartable[dest]=vartable[src];
break;
}
}

function show(showstmt) //prints variables given
{
var variables=showstmt.split(",");
for(var i=0;i<variables.length;i++)
{
output+=variables[i]+" : "+vartable[variables[i]]+"\n";
}
document.getElementById("output").value=output;
}

function operate(stmt,operator) //code for processing div statement
{
var param=stmt.split(",");
var dest=param[0];
var src=param[1];
switch(whatIs(src))
{
case "num": //source is a number
if(vartable[dest]) //checking if source exists
{
if(isNaN(vartable[dest]))
{
alert("cannot handle number operating on text");
break;
}
switch(operator)
{
case '+':
vartable[dest]+=parseInt(src);
break;
case '-':
vartable[dest]-=parseInt(src);
break;
case '*':
vartable[dest]*=parseInt(src);
break;
case '/':
vartable[dest]/=parseInt(src);
break;
}
}
else
{
vartable[dest]=parseInt(src);
}
break;

case "text":
if(operator=='+')
{
if(vartable[dest])
{
if(!isNaN(vartable[dest]))
{
alert("cannot add text to number");
break;
}
vartable[dest]+=getString(src);
}
else
{
vartable[dest]=getString(src);
}
}
else
alert("not possible");
break;

case "var":
if(vartable[dest])
{
switch(operator)
{
case '+':
vartable[dest]+=vartable[src];
break;
case '-':
vartable[dest]-=vartable[src];
break;
case '*':
vartable[dest]*=vartable[src];
break;
case '/':
vartable[dest]/=vartable[src];
break;
}
}
else
{
vartable[dest]=vartable[src];
}
break;
}
}

function process(instructions) //main code for processing each statement
{
for(var i=0;i<instructions.length;i++)
{
var stmt=instructions[i].split(" ");
var keyword=stmt[0];
switch(keyword)
{
case "mov":
move(stmt[1]);
break;
case "add":
operate(stmt[1],'+');
break;
case "sub":
operate(stmt[1],'-');
break;
case "mul":
operate(stmt[1],'*');
break;
case "div":
operate(stmt[1],'/');
break;
case "show":
show(stmt[1]);
break;
default:
alert("something wrong with the keyword at line "+(i+1));
}
}
}


function getCode() //gets text from text area and splits them into instructions for processing
{
initialize();
var code=document.getElementById("code").value;
code=code.trim();
var instructions=code.split("\n");
process(instructions);
}

File: proglangstyle.css

body{
background-color:#EEEEFF;
}
#codearea{
float:left;
width:45%;
margin:5px;
}

#outputarea{
float:left;
width:45%;
margin:5px;
}

#rules{
width:45%;
float:left;
margin:5px;
background-color:#EEEFF5;
}

#sampleprogram{
width:45%;
float:left;
margin:5px;
background-color:#EEEEF5;
}
input{
float:left;
width:25%;
margin:3px;
}

textarea{
width:90%;
height:90%
}