
I recently built a [JavaScript game](https://veerasundar.com/suzhi) for which I needed a way to visually show the player's health. The game already had a HUD where the health information was displayed. But I wanted a better way to inform about the amount of health left and I chose to implement this like a meter widget.

Below is the final result (also you can see it in live in the [game](https://veerasundar.com/suzhi)):

[![Visualizing Player health](https://veerasundar.com/assets/img/lifeline.png)](http://jsfiddle.net/3ubs9mz6/3/)

This post explains how to convert the player health, which is in percentage to a circle to draw in HTML5 canvas.

##Drawing circles in Canvas:

Canvas offers a method `arc()` to draw circles. This method's signature is:

```javascript
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
```

In that, `startAngle` and `endAngle` is what we are interested in. By converting the health percentage to start and end angles, we can draw a arc that correlates with the percentage.

### Function to convert degrees to radians:

`startAngle` and `endAngle` accepts their values in *radians*. But I persoanlly feel one can easily understand *degrees* instead of *radians*. So, we need a function that converts *degrees* to *radians*.

```javascript
function rad(deg){
    return (Math.PI/180)*deg;
}
```

### Function to convert percentage to radians:

Now that we have our degree-to-radian converter in place, we can move to next step of converting percentage to radians.

```javascript
function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}
```

In the context of Canvas arc API, 0 degrees starts at circle's east end, 90 degrees is south, 180 degrees is west and 270 degrees is north. Since I wanted my arc/circle to begin at top/north, I am adding that to percentage calculation. If you want your arc to start at different end points, you can add respective degrees to the above formula.


### Combining all - drawing percenate as circle in canvas

```javascript
function rad(deg){
    return (Math.PI/180)*deg;
}

function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}


var ctx = document.getElementById('lifeline').getContext('2d');
function draw(x,y, percent){

    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.strokeStyle ='rgb(221,221,221)';
    ctx.arc(x,y, 45, rad(270), percentToRad(100), false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = 'rgba(255,65,54,.8)';
    ctx.arc(x, y, 45, rad(270), percentToRad(percent), false);
    ctx.stroke();


    ctx.beginPath();
    ctx.fillStyle = 'rgb(57,204,204)';
    ctx.arc(x,y, 40, 0, 2*Math.PI, false);
    ctx.fill();
}

draw(50,50, 0);
draw(200,50, 60);
draw(50,200, 44);
draw(200,200, 100);
```


Here's the [Fiddle](http://jsfiddle.net/3ubs9mz6/3/) where you can play around with the code and see the results for yourself and here's the [JavaScript game](https://veerasundar.com/suzhi) where this has been implemented.
```


HTML5 Canvas game - Visualizing player health


I hope some of you might remember the application [Twikural that I built](https://veerasundar.com/blog/open-sourcing-twikural-an-app-engine-project/) a while ago. I recently rebuilt the entire application from scratch using Play framework. This post explains why.

Back then, I was looking for a platform to quicky build and deploy a Java application. App Engine was easily the platform of choice because it was free to start and its Eclipse SDK was awesome. All you had to do is download the SDK, write your code following the set rules, click a button to deploy to cloud and viola! your application is up and running.

Apart from the easy to use tools, App Engine gave me additonal features such as Emailing and scheduling cron jobs, which I needed both for Twikural. Hence I built the [first version of Twikural](https://veerasundar.com/blog/twikural-how-it-works/) in App Engine.

The application stayed in that shape for a quite long time, untouched, undisturbed and sometimes forgotten :). However, I wasn't happy with [the code](https://github.com/vraa/twikural-old) I wrote for the first version of Twikural. It was crude, messy and in templates I used lot of scriptlets (guilty!). Also, with App Engine, I kinda felt that I was never in full control. So, I always had a item in my todo list to redo the application, but never had the time to sit and do it until now.

In past couple of years, I learnt to setup and run a Linux box on my own (I use Linode, btw). Also, while building [Feedmerang](http://feedmerang.com) I got a pretty good experience with [Play framework](https://www.playframework.com/).

So, there it is: A Linux machine, just sitting idle (most of the time) and pretty good Java web application framework waiting to be played! Finally decided to mix them both and the end result is, **Twikural is now running on my own machine** (ah! the feeling of happiness).

<a href="http://twikural.veerasundar.com">
  <img src="http://i.imgur.com/h54rKlR.png" title="Twikural" />
</a>

Working with Play framework is an awesome experience because of its 'Hit Refresh workflow'. You would never beleive that you are developing a Java web application, which tends to be slower because of constant redeployments. But with Play, you make changes, refresh the browser and your changes are there. As if you are writing a JavaScript application!

Now just the boosted productivity, the Play framework itself is enjoyable to work with - easy to learn folder structure, inetgration with CoffeeScript and LESS css and its stateless architecture. It has become my first framework of choice for my every projects.

So, enough with my ramblings. Here's the [source code](https://github.com/vraa/twikural) - it's completely open source. If you are interested in contributing to this project, just fork and send me a PR.


Rewriting Twikural from scratch in Play framework


It's been few months since I started the [twikural][1] service. For the people who didn't know about Twikural;

[1]: http://twikural.veerasundar.com/ "Twikural - Daily thirukural"

[Twikural][2] is a web service that sends two couplets from the well known *[Thirukkural book][3] *everyday to its subscribers. People can subscribe to the service via either [Twitter][4] or [Facebook][5].

I have already open sourced the [code behind twikural][6]. If you like to browse the source code, you are welcomed to do so in [Github][7].

[2]: http://twikural.veerasundar.com/ "Twikural - Daily Thirukural"
[3]: http://en.wikipedia.org/wiki/TirukkuÃ¡¹€ºaÃ¡¸· "Thirukkural"
[4]: https://twitter.com/twikural "twikural"
[5]: https://www.facebook.com/twikural
[6]: https://veerasundar.com/blog/open-sourcing-twikural-an-app-engine-project "Open sourcing Twikural"
[7]: https://github.com/vraa/twikural "Twikural source code in Github"

In this post, I'm going to explain the details behind the project and how the entire thing works. Lets begin.

## The Big Picture

[![][9]][9]

[]: http://twikural.veerasundar.com

The site runs on **Google App Engine **and built using **Java 7**. The Java code does not use any fancy frameworks - it's all plain old Servlets and JSPs. But in the front end, I am using **Twitter Bootstrap** to ease the designing task and supporting different screen sizes. To interact with Twitter, I'm using **Twitter4j**.

There are two *cron jobs *that scheduled to run at 9 AM and 6PM respectively and sends out the tweets and Direct messages to the subscribed users. Then twitter takes care of updating the Facebook status of Twikural page.

As you can see in the above picture, the site talks only to Twitter, even though it supports Facebook as a subscription channel. This made possible by using the Facebook integration feature that Twitter provides. Using this, whenever there's a tweet is published, Twitter will automatically update the connected Facebook page status.

Users can subscribe via either [Twitter][9] or [Facebook][5]. The advantage of subscribing via Twitter is that the user will get an direct message (and possibly an SMS if he'd enabled it).

[9]: https://twitter.com/twikural

So that's pretty much about what's happening behind Twikural at a higher level. If you'd like to read Thirukkural everyday, you should [subscribe to Twikural][10]. And feel free to share your feedback. The comments are always welcomed.

[10]: http://twikural.veerasundar.com/subscribe.jsp "Subscribe to Twitter"


Twikural - How it works?


**tldr; **

It all started when I asked the following question to my twitter friends:

> Juts checking: If there's a service that sends you a Thirukkural every day, would you be signing up for it?
>
> '€ Veera (@vraa) [January 31, 2012][1]

[1]: https://twitter.com/vraa/status/164394058238799873

My idea was simple: to send out Thirukural poems everyday to the people that are signing up for the service. Instead of sending it to email addresses, I decided to use Twitter and Facebook as my medium since that's where most of the people are hanging out these days.

There were few tweeples responding to it positively. Even though there are already few other alternative services available, I decided to move on and build it as I thought the new service will be different and be a learning experience.

It took a weekend to code the 80% of the site and I hosted it on App Engine platform. And the site is live for the past few weeks -

[![][3]][3]

[]: http://twikural.veerasundar.com

Now, the service has [31 followers in Twitter][3] and [37 Likes in Facebook][4]. It has already sent out 120 Thirukurals till date. ![:)][5]

[3]: https://twitter.com/#!/twikural
[4]: https://www.facebook.com/twikural
[5]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

And, I'm now open sourcing the code. The project is now [hosted @ Github][6]. You are welcomed to check it out and if you'd like to contribute, feel free to send a pull request / contact me.

[6]: https://github.com/vraa/twikural

I would like to thank my fellow tweeples - [@iGhillli][7], [@anandhame][8], [@mgobi_php][9]   for their continuous support to this project.

[7]: https://twitter.com/#!/iGhillli
[8]: https://twitter.com/#!/anandhame
[9]: https://twitter.com/#!/mgobi_php


#twikural (4)