Leveraging iOS hardware via the browser with Javascript

Just another quick post tonight. I have bigger one lined up for tomorrow I promise. I just wanted to show a little experiment I did a while back with JavaScript – accessing the Accelerometer and Compass data in Safari on the iPad. Below is a short video demonstrating it if you don’t have access to an iPad. If you do have one – visit the link following the video. I might also mention that the arrow/circle image was all created using CSS3 too!

And here’s the link to the demo.

To get the source – just go to the above link and right click > view source.

Creating a HTML version of this blog’s header

Update: this post was made when I was using a different blog design. Please view the original swf file here.

Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript.

Luckily jQuery includes a JSON parsing feature and Flickr provides a JSON feed and so it was very easy to get the Flickr feed. The image flipping was done with CSS3’s 3D transforms and so unfortunately it will only work in Chrome and Safari. Now I just need to work out how to get more than 20 images from the Flickr feed (I need 36 to fill the header), and turn the images black and white. I found a jQuery plugin that apparently can apply image effects but I haven’t gotten it to work yet.


Paint Maestro 2 sneak peek

I was going to record a full demo of my upcoming multitouch painting application ‘Paint Maestro 2’, but I had some technical difficulties so here is a small demo of the stencils. The application is written in AS3 and uses Adobe AIR. I posted this video over at NUI Group a couple weeks ago and got a pretty good response. But I never posted it here so here it is below. More info on Paint Maestro 2 will be coming soon so stay tuned…


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


Inspiring Inspiration #4

Some inspiring videos…


NiceComps – AS3 UI components for Flash

NiceComps is a set of ActionScript 3 UI components that I have been slowly working on over about the last six months. I got tired of the ugly built in components that come with Flash and I don’t particularly like the look of MinimalComps. I wanted UI components that looked nice and were easy to use so I set out to create my own. The design of NiceComps was inspired by the Windows Phone 7 UI and one unique feature I wanted to include was the ability to easily and dynamically change the colour of all components being used at once at runtime. Since I started them they have evolved quite a lot as I’ve used them in projects, and therefore they are still not 100% finished. But I have decided to release a ‘Beta’ version which you can try out. There is a demo below of all the components so far (I think it’s all). The code is quite messy at the moment but I plan to tidy it all up in the near future. And please let me know if you find any bugs. Currently the most stable components are the DisplayScroller, CheckBox, InputBox, Button and DropDown as these are the ones I use most. I’ve got a lot of optimising to do because there is quite a bit of duplicate and unused code.


Inspiring Inspiration #3

Here is a selection of some of my favourite videos on Vimeo.


Five Interesting Videos On Experience & Interaction Design

Below are some interesting videos regarding experience and interaction design. You can find the remaining 3 parts to the second video at Interaction-Design.org

Microsoft Surface 2.0

As some may know Microsoft has release info and a new website for Microsoft Surface 2.0. The new surface looks great and at just 4″ thick it is now a lot more adaptable than the table style of version 1. Customised legs can be attached to the unit or it cam be mounted to a wall. Surface 2 uses some new technologies that Microsoft has developed. The first is per-pixel IR detection, so basically each pixel on the screen has its own tiny ‘IR Camera’ so the which enabled the screen to see anything placed on top. Surface 2 runs on Windows 7 this time around instead of the custom Surface software of version 1 and now has integrated support for Windows Phone 7. The top surface is covered with a huge sheet of Gorilla Glass, that largest to ever be bonded to an LCD. And finally the unit is being manufactured by Samsung. Check out the demo video below and the link to the new website.

Surface 2.0 from Microsoft

Surface Tech Demo

Spray Paint stenciling in Flash

After seeing the Wii Spray demo videos a year or so ago I have since been wondering how they did the stencils. I couldn’t find any information on how to achieve an effect like paint stenciling so today I decided to give it a shot myself. Below is a small demo where you can have a go and spraying some stencils. Instructions are in the bottom left corner. Here is how it works:

Layers (top to bottom):

  1. Draw Layer Bitmap – contains BitmapData where the spray paint is drawn
  2. Stencil MovieClip – the stencil you see on screen containing artwork with transparency
  3. Stencil BitmapData – stencil is drawn to this bitmap data (not added to display list)
  4. Canvas Bitmap – where final artwork is drawn to

The process

  1. when stencil is moved and placed somewhere, the Stencil BitmapData is filled with red, then the Stencil MovieClip is drawn on top.
  2. you then paint with the mouse – paint is drawn to Draw Layer Bitmap
  3. on mouse up a Temporary BitmapData is created
  4. it then loops through all pixels in Stencil BitmapData – if pixel is Red: copy corresponding pixel from Draw Layer Bitmap to Temporary BitmapData
  5. when the loop is complete draw the Temporary BitmapData to the Canvas BitmapData
  6. Draw Layer Bitmap is then cleared

Get Adobe Flash player