Joshua Ho's Blog

HTML 5 – Canvas

admin — Thu, 09 Sep 2010 02:08:33 +0000

HTML 5 brings a lot of new elements and tags and hands them to developers / designers to develop websites. Previously I wrote about the tag and how to create a video element and playing a video – Blog post can be found her. In this post, I’m going to explore the

We can start of an HTML 5 document as follows:
HTML 5 Canvas Tag Test ... code goes in here

To create the canvas tag we just call

id		assigns an identifer to the
width		defines the width of the canvas tag
height		defines the height of the canvas tag

With that in mind we apply those properties on our tag as follows. In this example we are going to designate the canvas as a 400×400 pixel canvas.

If we save everything and upload the file now, we would not see anything from our

In order to draw an object we can use javascript to draw a box inside of our object. In our case we want to draw a 200×200 pixel red box inside our canvas object.

What we have done is accessed the canvas tag and applied the getContext object on the canvas. getContext() is a built in HTML 5 object that can create objects inside the canvas. We apply the getContext() in our canvasContext variable and with that we can assign the colour – fillStyle; red (#FF0000), and what object to draw – fillRect; (x, y, width, height – 0, 0, 200, 200). If we want to move the rectangle we can adjust the x and y values in the fillRect, which would change the x and y location of the red box we have just created.

That is it, we now can draw on our canvas using HTML 5 and Javascript.

HTML 5 – Video Tag

admin — Sat, 04 Sep 2010 16:06:21 +0000

The W3C – The World Wide Web Consortium has started updating the HTML standard for displaying objects on the web. They are the ones that define how HTML tags should work. With HTML 5, the W3C is starting to move away from the reliance on plugins to play video or audio objects, while also creating new HTML tags that are commonly used on websites – such as footers, or navigation. More importantly, HTML 5 came out with new API’s that are available for use.

In this example we will take a look at one of the new tags – video. And use the new API’s defined in HTML 5 to play / pause the video.

Creating an HTML 5 document is not hard. It is the same as creating the HTML 4 standard.
HTML 5 Video Tag Test ... code goes in here

Now we want to add the video tag. According to the W3C – http://dev.w3.org/html5/spec/Overview.html#video we can define a video tag by using . There are some attributes that we can use to define the video tag:

src		defines the video source
width and height		defines the width and height of the video object
loop		allows the video object to loop at the end of the video
autoplay		defines if the video should play once the video tag has been loaded
controls		defines if the video controls should be displayed
preload		defines if the video should preload the file when the website loads

In our example we want to use the src and the controls so we can start and stop playing. To do so we have to include the video tag in our code. We must define controls as “controls” so that the browser would display the basic, play / pause buttons.
your browser does not support the video tag

As you can see I have a simple copy inside the video tag that claims that the user’s browser does not support the video tag. With HTML 5 still being worked on, not all browsers can view the HTML 5 standard. As a result, those browsers would not be able to render the video tag. Instead they would see the copy “your browser does not support the video tag”.

Also note, because HTML 5 has not been fully standardized yet, the video tag is still up in the air. Different browsers can only play different video types. Firefox and Opera browsers can play .ogg files – more commonly known as Ogg Vorbis, while Safari can play H264 videos. Chrome can play both ogg and H264 files. The debate on which video files to play is still underway. Ogg Vorbis is open source while H264 is not. However since the video tag has not been fully standardized yet, this debate still continues.

In our case we are going with the .ogg format. Now if you are on a Safari browser, you can change the src to a .mp4 file format, which uses the H264 video.

Now we do not need to use the browser’s controls to play / pause the video. We can use the HTML 5 Video API for that.

We can add a couple of anchor tags to our code so we can play or pause the video.

Play Pause

We can use javascript to control the video tag and use the HTML 5 Video API. According to the W3C we can tell the video object to play and pause by using the play() and pause() methods.

What this code does is that it searches for the video tag and sets it in the variable I designated called “video”. With the object in my “video” variable, I can use the Video API methods of play() and pause(), to play or pause the video. I passed in a small variable into my function which would tell me which button was pressed. If the play button was pressed, I want the video to play and vice versa.

And there we have it, a simple play pause video demo using HTML 5 and the Video HTML 5 API.

Seize The Summer with Molson Canadian

admin — Sat, 10 Jul 2010 19:18:16 +0000

The summer is here and we have lunched a new Facebook application with Molson Canadian. It is a pretty neat application where people can earn badges for doing things the love and eventually win prizes for doing those things. I am pretty excited for this application, it is a very fun application. We utilized the Facebook API fully and integrated with our own customized API to produce a Facebook application we are happy to showcase.

Check it out

Molson Canadian Seize The Summer

NXNEi

admin — Wed, 16 Jun 2010 19:23:59 +0000

[youtube]http://www.youtube.com/watch?v=Mk1xjbA-ISE[/youtube]I have just returned from North by Northeast interactive (NXNEi). It is the sister event to South by Southwest. I was very impressed with all of the presentations, I learned quite a lot and it has helped me understand where developers, creative thinkers and everyone believes technology would continue. It is a breath of fresh air for me I got to return back to my university days of studying new media concepts and it was very surreal to listen to speakers reflect on those concepts. I got to meet some very interesting people and get to talk to them and I really thought that was cool.

One of my favourite presentations was by Zachary Lieberman and The Intersection of Interaction, Play, Humor and Design. Zach is one of the best new media artists that I have ever seen. He was the developer to openFrameworks (http://www.openframeworks.cc/) an open source toolkit where “creativity” drives the final product. Some of his works can be seen around the world and he has received many awards for the works that he has done. In his presentation we saw many of his works including the Augmented Reality Magic – an art piece that uses Augmented Reality as a means to show magic tricks from the eye of the magician and his EyeWriter Initiative – where he developed the tools that could track the user’s eye and have a pen write according to the user’s eye movements. I was very impressed with all of his works and definitely look forward to seeing more of his work in the future.

You can see some of his work here:
http://thesystemis.com/
[youtube]http://www.youtube.com/watch?v=Mk1xjbA-ISE[/youtube]

Another presentation I was impressed with was Thought-Controlled Everything by Trevor Coleman. Trevor is from InteraXon a thought-controlled computing. InteraXon develops devices that could pick up brain waves which would affect how the user would interact the device. Trevor displayed videos showing people being able to play musical instruments that could be played through thought. I was amazed at the advancement of interactive technologies and how people were able to harness the invisible to affect the real world. With continued advancements in thought processing I can see this type of technology aiding people which I think is a really good cause. I definitely want to keep my eye to wait and see what InteraXon and how the technology develops.

You can see some of InteraXon’s work here:
http://www.interaxon.ca/

Dentyne Action Packs – Cool AR

admin — Mon, 05 Apr 2010 17:00:34 +0000

Dentyne Action Pack

After months of hard work I have been working with Aesthetec Inc to launch the Dentyne Action Pack – an AR makeout contest. We used Augmented Reality markers and place them on the back of Dentyne Ice packs. Users can use these packs in order to choose to make out with virtual characters. You can record your session and have lots of fun with it.

This was a project where we had lots of fun, definitely check out the website and have some fun with AR.

Pixel Bender Basic Pixel Manipulation Tutorial

admin — Sat, 20 Mar 2010 18:43:33 +0000

So I dove into Pixel Bender in my previous post ( see Pixel Bender ).

What we will dive into in this tutorial are basics in variables and hardcore pixel manipulation.

When you open Pixel Bender, a lot of basics are already filled out for you, this is known as the Kernal Syntax.

The first portion is the information about the Kernal’s metadata:

kernel NewFilter < namespace : "Your Namespace"; vendor : "Joshua"; version : 1; description : "My First Basic Pixel Bender Manipulation Filter"; >

You can indicate in the kernal a set of name value metadata for your Pixel Bender Filter. In our case we can just the name and description of what we are doing.

The second part of the Pixel Bender Kernal is where all of our code is declared. When you start a new Pixel Bender Kernal Filter it looks like this
{ input image4 src; output pixel4 dst;

void evaluatePixel() { dst = sampleNearest(src,outCoord()); } }

With Pixel Bender, we need to indicate a source, and in this case we are loading an image and storing the image in a variable called src. We are typing the variable as an image4. An image4 type indicates that this image would contain the 4 different types of pixel colour values ( Red, Green, Blue, Alpha ). We also have an output called dst which returns our manipulated pixels ( again using the 4 different types of pixel colour values ) so we can view the manipulated image. We have a function called evaluatePixel which runs through all of the pixels and where we can manipulate the data accordingly.

If we load an image( Select File > Load Image 1 – or press ctrl + 1 / command + 1 ). And hit run, at the bottom right corner. We have our first running Pixel Bender Filter. It currently does nothing, but load the image.

Now let’s manipulate some colour. Say I want to adjust the red in the photo. Lets add this code.
pixel4 pix = sampleNearest( src, outCoord() ); pix *= pixel4( 2, 1, 1, 1 ); //R, G, B, A dst = pix;

What we have done is taken each pixel and multiplied the red value by 2. I have stored each pixel in a variable called pix, and I multiplied the red value by 2. I set the output dst to my variable pix and now we have an image that has the red’s more prominent. This is just a static example, now we want to dynamically adjust these values to our own discretion. What we would need to do is create a parameter.

parameter float red < maxValue: float( 5 ); minValue: float( 0 ); defaultValue: float( 1 ); >;


    parameter float green

    <

        maxValue: float( 5 );

        minValue: float( 0 );

        defaultValue: float( 1 );

    >;
    parameter float blue

    <

        maxValue: float( 5 );

        minValue: float( 0 );

        defaultValue: float( 1 );

    >;

parameter float alpha < maxValue: float( 1 ); minValue: float( 0 ); defaultValue: float( 1 ); >;

These are 4 parameters that we can now adjust. We are proving each parameter with a set of rules – a maxmium value, a minmium value and a default value. We need to make one adjustment to our evaluatePixel() and we should be good to go.

pixel4 pix = sampleNearest( src, outCoord() ); pix *= pixel4( red, green, blue, alpha ); //R, G, B, A dst = pix;

Now we have variables tied to the red, green, blue, and alpha channels. The cool thing about pixel bender is that it can be exported and loaded into AS3 – Min requirements: Flash player 10. Adobe created 2 special classes that tie in with Pixel Bender – Shader (http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/Shader.html) and ShaderFilter (http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/filters/ShaderFilter.html).

Pixel Bender files can be loaded with URLLoaders. Once the pixel bender is loaded, you can cast the data as a Shader Class. Shader’s can access the variables inside of Pixel Bender and adjust the values. Once the values are adjusted you can load the shader through a ShaderFilter filter and apply that on any DisplayObjects to view your result.

Below is a quick example of applying the above pixel bender filter onto a webcam feed and adjust the Red in the webcam feed.
private var video:Video; var camera:Camera; video = new Video( 320, 240 ); var i:uint = Camera.names.length; while ( i-- ) { if ( Camera.names[i] == "USB Video Class Video" ) { break; } }


if ( i == uint.MAX_VALUE ) {

   camera = Camera.getCamera();

} else {

   camera = Camera.getCamera( i.toString() );

}
camera.setMode( 320, 240, 30 );

video.attachCamera( camera );
var loader:URLLoader = new URLLoader( new URLRequest( "MyPixelBender.pbj" ) );

loader.dataFormat = URLLoaderDataFormat.BINARY;

loader.addEventListener( Event.COMPLETE, loadShader );

private function loadShader( evt:Event ):void { var shader:Shader = new Shader( evt.target.data ); shader.data.red.value = [0.5]; var shaderFilter:ShaderFilter = new ShaderFilter( shader ); video.filters = [shaderFilter]; addChild( video );

Pixel Bender

admin — Thu, 18 Feb 2010 03:11:41 +0000

Pixel Bender (formerly known by its codename: Hydra) is an image processing algorithm that optimizes image and video processing. In other words, it is a really useful tool to process image and video without killing performance.

I’ve had a chance to sit down and play with the IDE. Pixel Bender’s syntax is based on OpenGL Shading Language (GLSL). It is quite different than working with AS3.

Pixel Bender code example:
kernel NewFilter < namespace : "Your Namespace"; vendor : "Joshua"; version : 1; description : "Text Pixel Bender"; > { input image4 src; output pixel4 dst; parameter float testInputValue< minValue: float( 1 ); maxValue: float( 100 ); defaultValue: float( 1 ); >; void evaluatePixel() { //code goes here }

Where as AS3 looks like:
package { //@author Joshua Ho public class MyClass { public function MyClass() { //code goes here } }

Now this is just a semiotic difference. The real importance is how both these two languages can work together and really make some pretty cool projects come to life.
Below is an example :

This is a webcam feed that pixelates based off my Pixel Bender file. Now this type of pixelation can be done via actionscript. However the performance using Pixel Bender is not hindered when applying a pixelate filter. Normally with actionscript all of the processing is done by the CPU, the greater the data the more calculations the CPU has to make, thus slowing down the flash application. In an application like this, the flash application would drop framerate (see the top right corner for framerate values). By using Pixel Bender we can have the image and video processing done by the GPU, allowing the CPU to focus on the webcam feed and thus an increase in performance.

PHP & Twitter API – Pooling data into a service

admin — Thu, 11 Feb 2010 02:20:53 +0000

Source: http://apiwiki.twitter.com/

The Twitter API is a tool for developers to gain access to Twitter’s core data in order to build useful applications involving Twitter.

It is quite neat to be able to access live data and be able to visualize the tweets of the world (or trends) or be able to pool live data and stream it through one service. This post is just to show the simplicity, but provides developers the tools necessary to build out a really neat application.

Goal:
To pool data (Finding and populating all data using the trend test – #test) into a single Twitter account.

Twitter has many different wrappers for their API; you can find a full list here. (http://apiwiki.twitter.com/Libraries). We can use a wide variety of languages, but for this exercise we are using PHP.

The API that I am using is the Twitter class by Tijs Verkoyen – (you can download the API at:http://classes.verkoyen.eu/twitter/). I found the documentation really helpful and provides me with all of the calls that are needed for this example.

The first step is to figure out how to post to twitter using the API.:
include "twitter.php"; $twitter = new Twitter("username","password"); //replace username and password with your account's username and password; $userText = "Testing Twitter API"; $twitter ->updateStatus($userText ); ?>

If we run this, you can see in your Twitter account that you have just updated your status to say “Testing Twitter API”. Now you can pass in more parameters such as links or other Twitter accounts and Twitter will automatically provide links where necessary.

So now we are half way there; the next step we need to look at is to pool in all of the data. In our example we want to pool in all information related to the trend #test. Now this can be whatever you want. I am using the Twitter search to return the results I want. Now the Twitter search returns results as an ATOM RSS feed. We need to parse the RSS feed so that we can extract the core data. In this case I recommend an Atom Feed reader (http://www.the-art-of-web.com/php/atom/#source). We can extract the search results for #test.

include "atomparser.php"; $url = "http://search.twitter.com/search.atom?q=%23test"; $atom_parser = new myAtomParser($url); $output .= $atom_parser->getOutput(); echo $output; ?>

We now have the code to read in the Twitter RSS feed and parsed all of the information. However we now have too much information, all we want is what people tweeted and post that. I found it easier to go through the Atom parser and comment out all of the unnecessary data. I added a line break (“
” ) to indicate every new post visually. I can break all of the line breaks and push them into an array for me to loop through and push those results to Twitter.

Now that we have both parts of the code we need to combine the two code so that we can post onto Twitter from the results we were given from the RSS feed.

include "twitter.php"; include "myatomparser.php"; //load in the RSS $url = "http://search.twitter.com/search.atom?q=%23test"; $post_to_Twitter = new array(); $atom_parser = new myAtomParser($url); $output .= $atom_parser->getOutput(); // initialize twitter $twitter = new Twitter("username","password"); //replace username and password with your account's username and password; //$userText = "Testing Twitter API"; //not necessary anymore we are posting from the results that we were given from the RSS feed. $post_to_Twitter = explode( " ", $output ); foreach( $post_to_Twitter as $me ) { echo $me; $user_text = $me; sleep(1); } $twitter ->updateStatus($userText ); ?>

I added a delay – sleep(), to allow the Twitter API receive each result post, then receive the next result. And that is it we have now developed a small piece of code that grabs the data from the Twitter search results and post it onto your twitter status update.

enjoy.

P.S if you need help with the commenting part, you can download my version of the atom parser here( ).

AS3 Mac FileReference Type workaround

admin — Wed, 18 Nov 2009 01:53:14 +0000

Today I was in a conundrum. I was working on an upload script in AS3 that checks the file type and uploads it to a server. I had a problem with the FileReference class and Mac’s. (on Windows it was ok, but Mac’s did not work). According to the Actionscript 3 docs, all I need to do to check the type of a file is call the property type. ( see documentation: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/FileReference.html)

Normally the code would look like this:

var file:FileReference = new FileReference(); trace( file.type ); //where file.type would return the file type.

On a Mac machine, file.type returns null. However file.name returns the file name as it is supposed to. I could not find any real solutions, but instead just wrote a workaround class for this.

public static function extractFileType(fileName:String):String { var extensionIndex:Number = fileName.lastIndexOf("."); if (extensionIndex == -1) { return ""; } else { return "." + fileName.substr(extensionIndex + 1,fileName.length); } }

What this function does takes the file name and searches for the “.” and grabs the remaining characters returning the characters as a string. This imitates FileReference type property where it returns the file type as a string.

I have uploaded my simple class that can be downloaded here:
http://www.josh-ho.com/blog/Files/FileReferenceType.zip

Face Recognition – AS3 Update

admin — Fri, 13 Nov 2009 03:24:41 +0000

Hello I am back again.

Here is an update to my Face Recognition progress.

As you can see, I have gotten basic face recognition under way. Performance wise, I have a lot to improve on and I have a long way to go. But I am making progress – one small triumph at a time . I am using a Microsoft Xbox Live Camera, which pumps out great framerates at 640×480. I used the same camera for my Thesis project last year with the multitouch table. I might switch over to the PS Eye, which I heard can pump out greater framerates at 640×480.

I have setup an alpha test of my face recognition. Check it out