Thursday, July 29, 2010

Using Canvas in Firefox and Safari for Graphics in your Browser

Using the Canvas Tag

About the Canvas Tag

The canvas tag is a 2d "canvas" that can be used to draw various vector shapes. It has a fully integrated javascript API. It somewhat resembles the graphical aspects of flash. Since adobe and flash have taken some flack lately, we begin to wonder what is the future of web graphics programming APIs? Apple seems to be in a space where they want to drop support for flash. (See iPad discussions). A lot of people are behind this movement. Another example is android, which does support flash, however many people are reporting that performance is bad.

Why Not Use the Canvas Tag?

Well, we can't replace flash with canvas. Flash has many other aspects such as full networking libraries, native video playback, audio, etc. Some of these things are coming along as separate modules for each browser but since there is no unified front on these modules, it seems to be lagging behind in terms of features, and even being available in the first place.

Another problem is we are not seeing much support for canvas using internet explorer (one of the most widely used browsers at the moment). Firefox, Safari, Chrome and Opera all fully support it.

Personally I would like to see canvas more widely used. And I think market forces may give it a bit of a push in the near future.

Demonstration of using the canvas tag. Works in Firefox and Safari

Hi Everyone,

Today I am going to demonstrate the use of the canvas tag in order to output graphics. Here is our template we will use in order to get started. This is a short script that will draw a circle at coordinates 200, 200 with a radius of 50. Below that is this code at work. It should be drawing a large blue circle if its working properly.


<html>
<head>
<title>Canvas Test</title>

  <script type="application/javascript">
var ctx = null;

function draw() {
 //get our canvas element
 var canvas = document.getElementById("canvas");
 //create our context
 ctx = canvas.getContext("2d");
 //set out fill color, red = 0, green = 0, blue = 200, alpha = 0.5
 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 //begin our arc
 ctx.beginPath();
 //draw an arc, starting at 200, 200. 50 radius, angle starts at 0, and continues to 360 degrees (a cicle), and uses counter clockwise (false)
 ctx.arc(200, 200, 50, 0, (Math.PI/180)*360, false);
 //end our path
 ctx.closePath();
 //fill in the result
 ctx.fill();


}
  </script>

</head>

<body onload="draw()">
<style>
canvas,
body {
 margin: 0px;
 padding: 0px;
}
canvas {
 border: solid 1px;
}
</style>
<canvas width="800" height="600" id="canvas"></canvas>
</body>
</html>

Here is the example at work:

Please leave your comments below!

Wednesday, June 23, 2010

Lambda functions in Python

Using lambda functions in python. Defining a lambda function

Lambda functions in python can be somewhat confusing. Here is a brief introduction

Lambda functions are handy functions that can be defined in 1 line, and thrown away afterwards. Here is a small example of what the syntax for a normal function looks like, and what the syntax for a lambda function looks like:


def f(x): return x * x

And here is the same function using the lambda syntax:


f = lambda x : x * x

Lambda functions really come in handy when used with python functions such as filter(), map() and reduce(). Here are some examples.

First we have filter. It will return a copy of a list where the function you pass returns True. This example will return only even numbers (because any number mod 2 will be equal to 0 if it is even).


array = [1, 2, 3, 4, 5, 6] #create an array of integers
print filter(lambda x: x % 2 == 0, array)

Output:


[2, 4, 6] # a list containing all even numbers

Next we will show map. It is basically a mapping of one list to another using a function (or a lambda function):


array = [1, 2, 3, 4, 5, 6] #create an array of integers
print map(lambda x: x * x, array)

Output:


[1, 4, 9, 16, 25, 36] # a list containing squares of 1, 2, 3, etc

And finally we have reduce. What this will do is convert the list into a single value. Our function will add element 0 and element 1. That result is then added to element 3, that result is then added to element 4, etc. Eg. (((((1+2) + 3) + 4) + 5) + 6) = 21


array = [1, 2, 3, 4, 5, 6] #create an array of integers
print reduce(lambda x, y: x + y, array)

Output:

And that concludes our short tutorial on creating and using lambda functions

Python: Defining a function.

Defining a function in python

Python function definitions are simple. Defining a function in python is very similar to many other languages out there. Lets try it out:


def hello(x) :
     print "Hello", x

hello("Bill")

Output is as follows


Hello Bill

Notice we used print with a comma. This allows concatenation of strings in a single line statement.

An interesting property of functions in python is that you are able to assign them to variables.


variable1 = hello # assigns the variable "variable1" to the function we created above "hello"
variable1("Sarah")

Will output


Hello Sarah

That is all for now. Thanks and please add comments.

Monday, June 21, 2010

Technology Behind Facebook OSS Open Source

Facebook and OSS server software and hardware setup

The software and hardware behind facebook

Love it or hate it, facebook has some great, open source software behind it. It has also contributed to the open source movement quite a bit. Here is an article I found interesting.

http://royal.pingdom.com/2010/06/18/the-software-behind-facebook/

Monday, June 14, 2010

Facebook Chat in Empathy Ubuntu Linux

Using Facebook Chat in Ubuntu on Empathy

Facebook Chat Server Settings:

To set up the configuration:

Click edit->accounts, then click the Add button.

Account Type: Jabber

Reuse existing account

Create

Under Advanced - Server: chat.facebook.com

Then you are finished. Make sure SSL is disabled (which should be the default). Please leave some comments! Thanks!

Tuesday, April 20, 2010

Javascript foreach equivalent

Javascript has no foreach statement. Instead, we use the following syntax.


var letters = ["a","b","c"];

for(var i in letter) {
    alert(letters[i]);
}

Note the variable i, is an index into the array, and not a reference to the array element.

Javascript FOR loop

A for loop in Javascript

A for loop in java or javascript is similar to a Java or C for loop


for(i = 0; i < 3; i++){
   alert(i);
}

the variable i is the counter variable. It starts at 0. This loop runs, which will alert 0. Next it increments i, then returns to the start.

Programming Linux Games

Thursday, July 29, 2010

Using Canvas in Firefox and Safari for Graphics in your Browser

Using the Canvas Tag

About the Canvas Tag

Why Not Use the Canvas Tag?

Demonstration of using the canvas tag. Works in Firefox and Safari

Please leave your comments below!

Wednesday, June 23, 2010

Lambda functions in Python

Using lambda functions in python. Defining a lambda function

Lambda functions in python can be somewhat confusing. Here is a brief introduction

Python: Defining a function.

Defining a function in python

Python function definitions are simple. Defining a function in python is very similar to many other languages out there. Lets try it out:

Output is as follows

Will output

Monday, June 21, 2010

Technology Behind Facebook OSS Open Source

Facebook and OSS server software and hardware setup

The software and hardware behind facebook

Monday, June 14, 2010

Facebook Chat in Empathy Ubuntu Linux

Using Facebook Chat in Ubuntu on Empathy

Facebook Chat Server Settings:

Tuesday, April 20, 2010

Javascript foreach equivalent

Javascript foreach equivalent

Javascript FOR loop

A for loop in Javascript

A for loop in java or javascript is similar to a Java or C for loop

About Me

Blog Archive