An afternoon with canvas

   Today I returned to my hostel after a 2 week long Diwali Break. Well, since it was Diwali it was obvious that I wouldnot be doing a single bit of coding and I am not complaining, but the last 3 days at home were free so I thought of getting in the mood slowly. So I picked up an old painting application that i had developed.
   The previous one was a simple jQuery based application and did not have a feature to save your work so all the Davincis and Picassos out there could not show others their creations. So I thought of making the same app but on HTML Canvas element as it was very easy to save what you did!
   This time again it was very easy to make the JQuery code that was used to paint. While it took me a long time setting up the positioning of the objects.Let me share some code needed to get the canvas up and running.

HTML: 
<canvas id="can" width="500" height="500">

CSS:
#can
{
   border:1px solid black;
}


JQuery/Javascript
var dodraw = false;

	var size=15;
	var canvas = document.getElementById("can");
	var ctx = canvas.getContext('2d');
	ctx.StrokeStyle="blue";
	ctx.lineCap="round";
	$("#can").mousedown(		function(e){dodraw=true;
	ctx.lineWidth=size;
	ctx.beginPath();
	ctx.moveTo(e.PageX,e.PageY);
	ctx.lineTo(e.PageX-1,e.PageY-1);
	ctx.stroke();}});
	$("#can").mousedown( dodraw=false;)

$("#can").mouseover(function(e){
   if(dodraw==true)
  {
      ctx.lineWidth=size;
      ctx.beginPath();
      ctx.moveTo(e.PageX,e.PageY);
      ctx.lineTo(e.PageX-1,e.PageY-1);
      ctx.stroke();
  }});

This code should be enough to get your canvas be able to draw stuff. You can further add features and modify the code as required.
I have currently added eraser,brush,save, new and size +/- buttons to the page.
The demo is available here:Open World

Tweet   

Pixel Paint:what ,how and how much?

   Ever since I heard about jQuery, I wanted to use it,explore it and play with but due to some other reason(or in other words procrastination!) I was unable to do so. Finally, last Friday and set and learnt it from w3schools, the best available tutor I guess. Now, coming to the topic:
What?
Well Pixel paint is an under development painting tool that I have created and uploaded to OpenWorld . You can try it there. The painting stuff is completely based on jQuery as that is what I wanted to practise while creating this. I will be adding more features as and when I am able to develop them. Currently, because of poor internet connectivity I am unable to add the latest eraser tool that I just created but anyways, the current pen tool is just fine.I think the tool is the best explanation of what it is.

How?
Like I mentioned it above, I was learning jQuery and wanted to practise it. Coincidentally, Google+ came out the same week. With it's excellent UI and vibrant colors, it inspired me to add more color to what all stuff I made. I was thinking on what new animations could be done and suddenly light Bulb! The idea of an online painting tool just popped up to me.Making of the first version of Online Paint needed just 1 hour of jQuery designing and testing. A few more hours of designing and the first version was out! Coming to the next point:

How much?


As talked above, the version 0.2.3 had just dot painting facility, now the online version is 1.3.3 which has an addition of pen tool which enables you to draw lines. The one in my laptop is 2.4.3 which has the same UI but with an addition of eraser tool which is still a bit buggy, also one of the bugs of the previous versions have been removed. I wish to add a load more number of  features but I need to improve my skills and may eventually have to change the coding completely.

Anyways, that's all about Pixel paint that I can share with you right now. Will post more updates and will notify you people too!

Tweet   

My first C# project

I was very keen on jumping from writing console applications to applications having a better user-interface and being able to handle events such as a mouse-click. So I jumped over to C#. The guide that i was using turned out to be incorrect one and created a lot of confusion. But in the end I was atleast able to understand how to make a form(interface) and how to handle events.
So, I started meddling with things on my own.For starters I thought of an application that took some input and gave a corresponding output based on some formula . This, led to the project I am talking about.
Last year I had made a program that calculated the 'Daily Breathing Loss' based on a given formula. I just had to take the inputs,use a formula and print the output. Easy isn't it? So, I thought that I could use the code to explain how a simple C# program is made. Coders in VB might find it similar. I have attached, the .zip file and the.rar file. You can download as per your wish. In this code, I have not included any extra header file and have used the default template of the Visual Studio 2008 C# programs.

Tweet