Javascript and Canvas wet paint mixing

Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely a lot more work getting and setting pixels with Javascript and Canvas. Check out the demo below. The brush will lag at higher drawing speeds when the size is large. But it if you don’t draw too fast it works pretty well. So far it seems to work best in Safari.

Supported browsers:

  • Chrome (Only tested in Chrome 12)
  • Safari (Only tested in Safari 5)
  • IE9

Note: Doesn’t work in Firefox and haven’t tried Opera

READ MORE

Inspiring Inspiration #4

Some inspiring videos…

READ MORE

Reading and Writing your own file type with AS3 and AIR

If your building an AIR application and you want to have your own native custom file type association for your app, it is surprisingly easy to to with ActionScript 3 in air as I found out. I was unable to find any information on reading and writing custom files so I decided to post my experience here. I remembered watching a tutorial by Lee Brimelow at gotoAndLearn a while back where he showed how to decode a BMP file using ByteArrays. So I revised the tutorial and used the ideas from this to create my own file.

For this example I will create a simple graphic file containing some metadata and some bitmap data.

1. Write out the specification

The first thing you should do is map out a spec sheet for it, outlining all the data and datatypes you want to store and the order it will be written. This is important so you don’t forget later on, and if you want others to be able to use it as well. Your custom file must be read and written in the same order. I just did it in Notepad like so:

image name – String
image author – String
image width – int
image height – int
bitmapdata length – int
bitmapdata – bytearray

Note that this is a very basic file, so you could save all different data types such as Boolean, Number, String, int, uint etc.

2. Get your data into a ByteArray

To write the file first we need to create a bytearray and then using the write methods of the ByteArray class write the bits of data to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// the stuff we want to save - name, author and a bitmap - in this case I've created a red square 300x300px
var name:String = "a new picture";
var author:String = "Ted Mosby";
var bitmap:Bitmap = new Bitmap(new BitmapData(300,300,false,0xFF0000));

// convert bitmap to byte array
var bitmapBA:ByteArray = bitmap.bitmapData.getPixels();

// create a bytearray to save into file
var bytearray:ByteArray = new ByteArray();

// write the image name
bytearray.writeUTF(name);

// write author
bytearray.writeUTF(author);

// write image width and height
bytearray.writeInt(bitmap.width);
bytearray.writeInt(bitmap.height);

// write bitmap data length
bytearray.writeInt(bitmapBA.length);

// write the bitmap
bytearray.writeBytes(bitmapBA);

READ MORE

Drawing a checker board pattern quickly with AS3

Today I needed to dynamically generate a checker board pattern in ActionScript 3. I couldn’t find any examples on how to do it so I made my own. Below is a snippet of code I wrote to draw it and its super fast! I used bitwise operators in the loops to speed it up and it can draw a 2000x2000px area in 10 milliseconds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Box colour 1
var even:uint = 0xCCCCCC;

// Box colour 2
var odd:uint = 0x999999;

// Box size
var size:int = 10;

// number of boxes horizontally
var nH:int = stage.stageWidth / size;

// number of boxes vertically
var nV:int = stage.stageHeight / size;

// vars to be used in the loops
var clr:uint;
var i:uint;
var j:uint;

// loop vertical
for (i=0;i<nV;++i)
{
    // Flip values of Even and Odd colours using Bitwise operations
    even ^= odd;
    odd  ^= even;
    even ^= odd;
   
    // loop horizontal
    for (j=0;j<nH;++j)
    {
        //bitwise modulus
        //check if column is odd or even, then set colour
        clr = j & 1 ? even : odd;
       
        // draw box with previously set colour
        graphics.beginFill(clr,1);
        graphics.drawRect(Number(j*size),Number(i*size),size,size);
        graphics.endFill();
    }
}