
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.


#appengine (2)