## Having fun with HTML5 – Simple painting app using Canvas

It feels like a lit­tle while since I last played around with the <can­vas> ele­ment, so I spent some time over the week­end and put together a sim­ple paint­ing app using the can­vas and here is the end result.

Here’s some screenshots:

#### Spray Tool

One of the inter­est­ing things with this sim­ple paint­ing app is the spray tool, here’s what I did to achieve the effect:

`   1: var _intervalId,    // used to track the current interval ID`

`   2:     _center;        // the current center to spray`

`   3:  `

`   4: function getRandomOffset() {`

`   5:     var randomAngle = Math.random() * 360;`

`   6:     var randomRadius = Math.random() * radius;`

`   7:  `

`   8:     return {`

`   9:         x: Math.cos(randomAngle) * randomRadius,`

`  10:         y: Math.sin(randomAngle) * randomRadius`

`  11:     };`

`  12: }`

`  13:  `

`  14: this.startDrawing = function (position) {`

`  15:     _center = position;`

`  16:  `

`  17:     // spray once every 200 milliseconds`

`  18:     _intervalId = setInterval(this.spray, 10);`

`  19: };`

`  20:  `

`  21: this.finishDrawing = function (position) {`

`  22:     clearInterval(_intervalId);`

`  23: };`

`  24:  `

`  25: this.spray = function () {`

`  26:     var centerX = _center.X, centerY = _center.Y, i;`

`  27:  `

`  28:     for (i = 0; i < density; i++) {`

`  29:         var offset = getRandomOffset();`

`  30:         var x = centerX + offset.x, y = centerY + offset.y;`

`  31:  `

`  32:         drawingCxt.fillRect(x, y, 1, 1);`

`  33:     }`

`  34: };`

The start­Draw­ing func­tion is called when the mouse­Down or a sub­se­quent mouse­Move event is raised, it in turn sets up an inter­val event which is trig­gered every 10 mil­lisec­onds and draws one pixel using the cur­rently con­fig­ured colour within the radius of the mouse pointer.

When the mouseUp event is raised, the inter­val event han­dler is unbound.

#### Sav­ing the Can­vas to an Image

One of the cool things you can do with the <can­vas> ele­ment is the abil­ity to get a data:URL con­tain­ing a rep­re­sen­ta­tion of the image as a PNG file, which you can then use as the source for an <img> ele­ment so that the user can then save.

The code required to do this is as sim­ple as call­ing toDataURL() on the <can­vas> ele­ment and then use the returned value to set the src prop­erty on the <img> element.

#### Demo

You can try out the live demo at http://sketchy.theburningmonk.com or via the short­link http://lnk.by/fghis.

If you’re inter­ested in the source code, you can get it off github here.

Enjoy!

## Learning Python – Coding Style

• Use 4-space inden­ta­tion, no tabs

• Wrap lines so that they don’t exceed 79 characters

• Use blank lines to sep­a­rate func­tions and classes, and larger blocks of code inside functions

• When pos­si­ble, put com­ments on a line of their own

• Use doc­strings

• Use spaces around oper­a­tors and after commas

• Name your classes and func­tions con­sis­tently; the con­ven­tion is to use Camel­Case for classes and lower_case_with_underscores for func­tions and methods

• Always use self as the name for the first method argument

• Don’t use fancy encod­ings if your code is meant to be used in inter­na­tional environments

Nam­ing conventions:

Vari­ables / func­tions — use_lower_case_separated_by_underscore

Class names — UseCamelCase

Error classes end in Error, i.e. MyError

## Learning Python – Part 5

#### Fore­words

A while back I decided to try and learn Python for the hell of it as it seems like an inter­est­ing lan­guage and has some of the most con­cise and user-friendly syn­tax. Hav­ing spent some time going through a num­ber of dif­fer­ent learn­ing sources and mate­ri­als (like the offi­cial site python.org which has a very help­ful tuto­r­ial sec­tion) I have put together a set of notes I made as I was learn­ing and hope­fully they can be use­ful to you as a quick list of how-to code snippets.

All the code snap­shots I’m show­ing here are taken from the IDLE Python shell.

#### Input and Output

The repr() func­tion gen­er­ates rep­re­sen­ta­tions that can be read by the inter­preter, str() func­tion gen­er­ates a human-readable of the value:

If an object doesn’t have a par­tic­u­lar rep­re­sen­ta­tion for human con­sump­tion, str() will return the same value as repr(), e.g. lists and dictionaries:

You can use the string.rjust(), string.ljust() or string.center() func­tion to left-justify, right-justify or cen­ter a string of given width by padding it with spaces:

You can use the string.zfill() func­tion to pad a numeric string on the left with zeros:

You can use string.format() method to for­mat the string out­put of your code:

You can also use named argu­ments:

An optional ‘:’ and for­mat spec­i­fier can fol­low the field name to allow greater con­trol over how the value is formatted:

Pass­ing an inte­ger after the ‘:’ will cause that field to be a min­i­mum num­ber of char­ac­ters wide:

For a very long string, you could even ref­er­ence vari­ables to be for­mat­ted by name using a dictionary:

Or you could unpack the dic­tio­nary first:

You can use the open() func­tion to get a file object, to open a file for writing:

The first para­me­ter being the file name, the sec­ond the mode which can be one of the following:

To open a file and read its contents:

To read one line at a time

To read the lines in the file as an array of strings:

You can also read x num­ber of bytes at a time:

To write to a file:

You can only write string con­tents to a file, which means you’d need to con­vert other objects to string first:

To flush the file buffer and actu­ally write them to the file, use the close() func­tion, after which you’ll need to open the file again:

You can use the tell() func­tion to find out your cur­rent posi­tion in the file:

You can use the seek() func­tion to change the file object’s cur­rent posi­tion, seek(offset, from_what):

from_what can be one of three values:

• 0 — begin­ning of file (default)
• 1 — cur­rent position
• 2 — end of the file

It’s good prac­tice to use the with key­word when deal­ing with file objects, which ensures that the file is closed after its suite fin­ishes. (this works like the using key­word in C#).

To deal with com­plex types (or indeed any non-string types like int) you can use the pickle mod­ule to con­vert it to and from string.

The process of con­vert­ing a com­plex type to string is called pick­ling.

The process of con­struct­ing a com­plex type from string is called unpick­ling.

#### Excep­tions

try-except block:

You can han­dle more than one excep­tion if you name them in a tuple:

You can han­dle a list of excep­tions in a cer­tain pri­or­ity list and if you don’t spec­ify a par­tic­u­lar excep­tion type it’ll serve as a wildcard:

You can also spec­ify a else clause which fol­lows all except clauses, it’s use­ful for code that must be exe­cuted if the try clause does not raise an exception:

The use of the else clause is bet­ter than adding addi­tional code to the try clause because it avoids acci­den­tally catch­ing an excep­tion that wasn’t raised by the code being pro­tected by the try-except statement.

There’s also the optional finally clause which is intended to define clean-up actions that must be exe­cuted under all circumstances:

To throw an exception:

To re-throw an exception:

To define a cus­tom excep­tion:

The __str__() func­tion ensures that you can print the excep­tion instance directly:

When cre­at­ing a mod­ule that can raise sev­eral dis­tinct errors, a com­mon prac­tice is to cre­ate a base class for excep­tions defined by that mod­ule, and sub­class that to cre­ate spe­cific excep­tion classes for dif­fer­ent error conditions:

Some objects define stan­dard clean-up actions, for instance, the with state­ment always closes the file after the state­ment is executed:

(the same as the using state­ment in C#)

## Learning Python – Part 4

#### Fore­words

A while back I decided to try and learn Python for the hell of it as it seems like an inter­est­ing lan­guage and has some of the most con­cise and user-friendly syn­tax. Hav­ing spent some time going through a num­ber of dif­fer­ent learn­ing sources and mate­ri­als (like the offi­cial site python.org which has a very help­ful tuto­r­ial sec­tion) I have put together a set of notes I made as I was learn­ing and hope­fully they can be use­ful to you as a quick list of how-to code snippets.

All the code snap­shots I’m show­ing here are taken from the IDLE Python shell.

#### Classes

Some notable dif­fer­ences from the class mech­a­nism in C#:

• The class inher­i­tance mech­a­nism allows mul­ti­ple base classes
• Classes are cre­ated at run­time and can be mod­i­fied fur­ther after creation
• All class mem­bers are pub­lic by default
• All class mem­bers are virtual
• Classes them­selves are objects

Like many other lan­guages, most built-in oper­a­tors with spe­cial syn­tax (arith­metic oper­a­tors, sub­script­ing etc.) can be rede­fined for class instances.

Sim­ple class definition:

To instan­ti­ate a new class:

To define a con­struc­tor which takes in some parameters:

to instan­ti­ate this class:

When a class defines an __init__() method, class instan­ti­a­tion auto­mat­i­cally invokes this method for the newly-created class instance.

To access its attributes:

To access its docstring:

There are only two kinds of valid attribute names, data attrib­utes and meth­ods.

Data attrib­utes don’t need to be declared, they sim­ply spring into exis­tence when they are first assigned to. For instance, for the Per­son class defined above, we can add a new data attribute to an exist­ing instance:

note that the new data attribute belongs to the instance ref­er­enced by x, and doesn’t exist on any other instance of the Per­son class (think Javascript)

You can delete the data attribute after you’re done with it:

Data attrib­utes can be over­ride by users of an object, so to avoid acci­den­tal name con­flicts it’s best prac­tice to use some kind of con­ven­tion that min­i­mize the chance of con­flicts. E.g. cap­i­tal­iz­ing method names, pre­fix­ing data attribute names with a small unique string, or using verbs for meth­ods and nouns for data attributes.

It’s impor­tant to note that noth­ing in Python makes it pos­si­ble to enforce data hid­ing, it’s all based on convention.

NOTES: Dif­fer­ence between a func­tion and a method is that a method is a func­tion bound to a class.

To define a method on the class:

To call the method:

You may have noticed that in the method def­i­n­i­tion say_greeting takes a sin­gle para­me­ter self but it was called with none. This is a spe­cial rule which applies to meth­ods where the object is passed as the first argu­ment. The con­ven­tion is to call the first argu­ment of a method self.

It’s not nec­es­sary that the func­tion def­i­n­i­tion is tex­tu­ally enclosed in the class definition:

and you can still use it like before:

To call other meth­ods inside the class:

To find the class of an instance:

To cre­ated a derived class:

because we haven’t defined any new attrib­utes, every­thing will be inher­ited from Per­son includ­ing the __init__ method:

If a requested attribute is not found in the class, the search pro­ceeds to look in the base class and if still not found it pro­ceeds to look in the base class of that class, and so on.

You can also extend a base method instead of replac­ing it, to call a base class method:

Use isin­stance() func­tion to check if an object is an instance of a class or some class derived from it:

Use issub­class() func­tion to check if a class derives from another:

Every class keeps these built-in attributes:

• __dict__ : Dic­tio­nary con­tain­ing the class’s namespace.
• __doc__ : Class doc­u­men­ta­tion string, or None if undefined.
• __name__: Class name.
• __module__: Mod­ule name in which the class is defined. This attribute is “__main__” in inter­ac­tive mode.
• __bases__ : A pos­si­bly empty tuple con­tain­ing the base classes, in the order of their occur­rence in the base class list.

Python’s garbage col­lec­tor runs dur­ing pro­gram exe­cu­tion and is trig­gered when an object’s ref­er­ence count reaches zero.

You can imple­ment a destruc­tor, __del__() method, that is invoked when the instance is about to be destroyed.

Here’s a list of some of the meth­ods you can over­ride in your own class:

Python sup­ports mul­ti­ple inher­i­tance:

Whilst you can’t hide an object’s attrib­utes you can still make them not directly vis­i­ble to out­siders by adding a dou­ble under­score prefix:

What’s hap­pened is that Python changed the name of these attrib­utes to include the class name:

So you can still access them like this:

This is called name man­gling it is mostly designed to avoid acci­den­tal name con­flicts as opposed to pro­vide data hiding.

Most con­tainer objects can be looped over using a for state­ment, under­neath, the for state­ment calls iter() on the con­tainer object and gets back an object that defines the method next(). When there are no more ele­ments, next() raises a Sto­pIt­er­a­tion excep­tion which tells the for loop to terminate.

Here’s how you might cre­ate a cus­tom iter­a­tor which loops through a con­tainer object in reverse:

#### Mod­ules

A mod­ule allows you to log­i­cally orga­nize your Python code, a mod­ule is a file con­tain­ing Python def­i­n­i­tions and statements.

The file name is the mod­ule name with the .py extension.

Within a mod­ule, the mod­ule name is avail­able as the value of the global vari­able __name__.

You can import an entire mod­ule in your code, or just spe­cific sub­set of the func­tions defined in the mod­ule. For exam­ple, to import the def­i­n­i­tions in a file called ‘fib.py’ in the cur­rent directory:

A mod­ule can con­tain exe­cutable state­ments as well as func­tions, these state­ments are intended to ini­tial­ize the mod­ule and are exe­cuted only the first time the mod­ule is imported somewhere.

Each mod­ule has its own pri­vate sym­bol table which is used as the global sym­bol table by all the func­tions defined in the mod­ule. This way, you won’t have to worry about acci­den­tal clashes with global vari­able names. How­ever, if required, you could still access a mod­ules global vari­ables with modulename.itemname.

You can import a sub­set of the items from a mod­ule using a vari­ant of the import state­ment. To import spe­cific func­tions or variables:

You can import all names from a mod­ule except those begin­ning with an underscore:

You can use the python exe­cutable to run a python script:

When you do this, the __name__ global vari­able of the script is changed to __main__, and by adding the fol­low­ing lines to your script you can make the file usable as a script as well as an importable module:

When you ask to import a mod­ule called fib, Python first looks for a file named fib.py in the cur­rent direc­tory, if not found it then looks in the list of direc­to­ries spec­i­fied by the envi­ron­ment vari­able PYTHONPATH.

You mustn’t name your script the same as a stan­dard mod­ule, or Python will attempt to load the script as a mod­ule when that mod­ule is imported..

To improve the start-up time of short pro­grams that use a lot of stan­dard mod­ules, python gen­er­ates a com­piled ver­sion of the mod­ule. For instance, for the mod­ule fib, the fib.pyc con­tains a byte-compiled ver­sion of the fib.py file. The mod­i­fi­ca­tion time of the ver­sion of fib.py used to cre­ate fib.pyc is recorded in fib.pyc file and is used to deter­mine whether fib.pyc is up to date and there­fore if it could be used.

How­ever, it’s worth not­ing that a pro­gram doesn’t run faster when it’s read from a .pyc file instead of .py file, it’s only loaded faster.

When a script is run from the com­mand line the byte-code for the script is never writ­ten to a .pyc file. You can improve the load time for these scripts by mov­ing most of its code to a mod­ule and hav­ing a small boot­strap script that imports that module.

It’s pos­si­ble to have a .pyc file with­out the cor­re­spond­ing .py file, this can be used to dis­trib­ute a library of Python code in a form that is mod­er­ately hard to reverse engineer.

You can use the com­pileall mod­ule to cre­ate .pyc files for ALL .py files in a directory:

sys.py is one of the stan­dard mod­ules, and use sys.path you can see all the paths which Python will look when it’s try­ing to find a mod­ule to import:

Of course, you can add to that path:

But remem­ber, this change is only valid in the cur­rent ses­sion, when you restart the inter­preter this new path will be lost.

To find out what names are defined in a mod­ule, use the built-in dir() function:

With­out argu­ment, dir() lists all the names you have defined currently:

Another handy thing you can do with the dir() func­tion is to use to list all the built-in functions:

You can put a col­lec­tion of related mod­ules in a pack­age. Here’s a pos­si­ble struc­ture for a sound pack­age in terms of file hierarchies:

The __init__.py files are required to make Python treat the direc­to­ries as con­tain­ing pack­ages. It can be an empty file, but it can also exe­cute ini­tial­iza­tion code for the package.

To import an indi­vid­ual mod­ule of the package:

But it must be ref­er­enced with its full name:

Alter­na­tively you could also:

The ben­e­fit of this approach is so that you don’t need the full name to ref­er­ence it:

Or, if all you want is the echofil­ter func­tion, you could also:

And to ref­er­ence it:

When the users write from sound.effects import * the import state­ment uses the fol­low­ing convention:

• If a package’s __init__.py code defines a list named __all__, it is taken to be the list of mod­ules names that should be imported when from pack­age import * is encountered:

• If __all__ is not defined, from sound.effects import * only ensures that the pack­age sound.effects is imported and run any ini­tial­iza­tion code in __init__.py.

The rec­om­mended approach is to import spe­cific mod­ules using from Pack­age import module.

You can also rel­a­tive paths from the cur­rent mod­ule, so from the sur­round mod­ule you might:

Where . refers to the cur­rent pack­age, .. refers to the par­ent pack­age, ..fil­ters refers to the fil­ters pack­age at the same level as the par­ent package

Because the name of the main mod­ule is always “__main__”, there­fore mod­ules intended for use as the main mod­ule of a Python appli­ca­tion should always use absolute imports.

## Learning Python – Part 3

#### Fore­words

A while back I decided to try and learn Python for the hell of it as it seems like an inter­est­ing lan­guage and has some of the most con­cise and user-friendly syn­tax. Hav­ing spent some time going through a num­ber of dif­fer­ent learn­ing sources and mate­ri­als (like the offi­cial site python.org which has a very help­ful tuto­r­ial sec­tion) I have put together a set of notes I made as I was learn­ing and hope­fully they can be use­ful to you as a quick list of how-to code snippets.

All the code snap­shots I’m show­ing here are taken from the IDLE Python shell.

#### Sets

A set is an unordered col­lec­tion with no dupli­cate ele­ments. To cre­ate a set:

notice how the dupli­cate was removed?

You can also use a string as a sequence of char objects and turn it into a set:

Now, let’s use this two sim­ple sets to illus­trate some basic set operations:

Set dif­fer­ence:

Set union:

Set inter­sect:

Exclu­sive (in one or the other but not both):

#### Dic­tio­nar­ies

Dic­tio­nar­ies are key value pairs indexed by keys, which can be any immutable type. To cre­ate an empty dictionary:

You access the ele­ments in a dic­tio­nary using square brack­ets [], you can find out all the keys and val­ues in a dic­tio­nary using the keys and val­ues methods:

You can also use the del state­ment to delete a key value pair:

You can cre­ate a dic­tio­nary using the dict() method and pass in a sequence of tuples:

if the keys are all strings, you can even do this:

To loop through dic­tio­nar­ies, the key and cor­re­spond­ing value can be retrieved at the same time using the iteritems() method:

#### Loops

Use a while loops to gen­er­ate the Finobacci sequence:

For loops:

Muta­ble sequences like lists should not be mod­i­fied at the same time as loop­ing through it, and instead should be done on a copy:

what would hap­pen if we don’t use a copy here? This code will get stuck in an infi­nite loop:

The else and break statement:

Loops in Python can have an else clause which is exe­cuted when the loop ter­mi­nates through exhaus­tion of the list (for for loops) or when the loop con­di­tion becomes false (for while loops), but it won’t exe­cute if the loop is ter­mi­nated with the break statement:

The con­tinue statement:

The pass statement:

It does noth­ing, often used to cre­ate a min­i­mal class..

#### Func­tions

Use the def key­word to define a function:

Note that the first string is a doc­string that can be used by some tools to gen­er­ate documentations.

Argu­ments are passed using call by ref­er­ence, as the argu­ment is always an object ref­er­ence not the value of the object.

Every func­tion has a return value, if noth­ing is returned then a spe­cial None value is returned. Writ­ing of the None value is usu­ally sup­pressed by the inter­preter, but you can see it using print:

Use the return key­word to return val­ues from a function:

Default argu­ment values:

The default val­ues are eval­u­ated once and once only, at the point of func­tion definition:

how­ever, it works dif­fer­ently with muta­ble objects such as lists, dic­tio­nar­ies etc.

notice how the sec­ond func­tion call didn’t use the default empty list? That’s because the object ref­er­enced by the vari­able l is muta­ble and its state was mutated by the first add_item call.

You can also call the func­tion using key­word argu­ments if they appear AFTER the reg­u­lar para­me­ters have been passed in:

note that key­word argu­ments can­not be pro­vided twice.

You can define an arbi­trary argu­ment list which takes in a tuple:

Sim­i­larly, you can take in a dictionary:

Inter­est­ingly, the reserve of the above is true too! You can take a tuple and unpack­ing it with the * operator:

Or take a dic­tio­nary and unpack­ing it with the ** operator:

Lamb­das: