Mike Chambers

code = joy

Toggling mute on Mac OS X with non-Mac Keyboards and Alfred

with 2 comments

I recently switched keyboards and picked up a daskeyboard professional (model-s). This is a really nice (and satisfying) mechanical keyboard, which I really like. However, das only makes a Windows version of the keyboard, and I am running Mac OS X. In general, this isn’t an issue, as I was able to remap control keys to be in the right position, but I really missed being able to quickly toggle whether the system volume is muted.

I could probably use an app such as DoubleCommand to remap one of the function keys to the mute key, but I didn’t want to rely on on a third-party piece of software that I would have to configure each time I wanted to set up a new system. So, I decided to create a simple AppleScript Application that I could call from Alfred (or Quicksilver) that would toggle whether the volume was muted.
Read the rest of this entry »

Written by mikechambers

May 23rd, 2011 at 10:10 am

Posted in General

JavaScript Voronoi port

with 3 comments

I have always been amazed by some of the digital art work that Mario Klingemann (aka @Quasimondo has created using with Voronois. After doing some searching, I found an early ActionScript 1 Voronoi implementation that Mario did, and I ported it to JavaScript.

I wanted to share the results:
Read the rest of this entry »

Written by mikechambers

March 24th, 2011 at 12:19 pm

Posted in General

Tagged with , , , , ,

JavaScript QuadTree Implementation

with 11 comments

Last week I was playing around with a little EaselJS experiment which required me to do collision detection against all items on the screen. This worked fine with a small number of items, but of course, the more items I added, the slower everything became.

I knew that I needed to optimize the code, and pare down the number of collision checks. I have done this before with a grid (even held a contest for it) and was going to port that AS3 code to JavaScript. However, Ralph Hauwert suggested I look at implemented a QuadTree, which should be more efficient.
Read the rest of this entry »

Written by mikechambers

March 21st, 2011 at 9:24 am

How to enable English translation for Japanese NHK Channel on Comcast

with one comment

Comcast has made the Japanese NHK channel available for the next week. It can be accessed via channel 330 on Comcast. The broadcast is in Japanese, but if you have an SAP enabled TV or set top box, you can listen to a translation of the broadcast.

It took me a while to figure out how to enable secondary broadcast on my Comcast box, and I didnt find much info online, so I wanted to post it here in case anyone else was interested.

Using your remote, click the Menu Button, then go to:

Menu > Setup > Audio > Audio Setup > Default Audio Track

Set the Audio Track to “Espanol“.

Right now, they are rotating between multiple languages (including English), and repeating tsunami warnings.

If you have info on how to access it for other Cable boxes, then post them in the comments.

Written by mikechambers

March 12th, 2011 at 11:00 am

Posted in General

Example : Creating spiral designs with Canvas, JavaScript and EaselJS

with one comment

I have been having fun playing around with JavaScript, the HTML5 Canvas element and EaselJS lately, and have been building a lot of small experiments. I wanted to share a simple one I created, which creates spiral designs.

 

 

The example was pretty simple to put together, but is fun to play with, and can make some pretty nice patterns / spirals. I have uploaded a couple of images that I have created using the example:
Read the rest of this entry »

Written by mikechambers

February 9th, 2011 at 12:20 am

Posted in General

Tagged with , , , ,

PixelFlow : EaselJS / Canvas Dynamic Graphics Example

with 7 comments

If you have happen to have been watching my Flickr feed for the past week or two, you have probably noticed that I have been playing around with creating some graphics using Canvas and EaselJS. What started as a simple EaselJS experiment, quickly morphed into an excuse to build a mini app / example and play around with some of the new HTML5 and CSS3 features.

PixelFlow

 

The example I created (named PixelFlow) is a simple example / app that allows you to choose an image, and then create some designs using the colors from the image. The core drawing functionality is built about the HTML5 canvas element and the EaselJS library. It also leverages CSS3 transitions and transformation for animating the UI elements (loading and unloading).

You can play around with the example yourself at:
Read the rest of this entry »

Written by mikechambers

February 2nd, 2011 at 10:54 pm

Posted in General

Tagged with , , , , , , ,

Detecting Canvas.toDataURL Support in Browsers

with 2 comments

I am wrapping up a code example that uses the Canvas.toDataURL API to save canvas data to an image. I am almost done, and was doing a final round of browser testing when I noticed that my example wasnt working on my Android based Google Nexus One Device (2.2.2). After some debugging, and then Googling, I discovered that the Canvas.toDataURL API is not implemented on Android (you can view the bug report here).

Well, after some cursing, I put together a simple method for detecting whether the API is supported on any particular device. I wanted to share it in case anyone else might run into a need for it. So, here it is:
Read the rest of this entry »

Written by mikechambers

February 1st, 2011 at 5:09 pm

Posted in General

Tagged with , ,

Setting the background color when generating images from Canvas.toDataURL

without comments

One of the cool features of the HTML5 canvas element is the toDataURL method. This returns a Base64 encoded image in the form of a data url string. Among other things, this can be displayed directly within an IMG element on the page, or sent to the server so the image can be saved.

However, one thing that I found out this weekend is that there is no background color for the image returned from toDataURL. Looking at the actual canvas draft specification, I found this:
Read the rest of this entry »

Written by mikechambers

January 31st, 2011 at 1:37 pm

Posted in General

Tagged with , , ,

EaselJS / Canvas Generative Graphics Flickr Set

with 4 comments

Just a quick note, but I have created a Flickr set which contains some of the generative graphics I have been creating using canvas, JavaScript and EaselJS.

You can view the set here.

I havent released all of the code used to create all of the examples, but I will release the code / examples as I finish them. Ill post new images on the set whenever I create something I think is interesting.

Written by mikechambers

January 26th, 2011 at 2:36 pm

Posted in General

Tagged with , ,

Layering Multiple Canvas Elements using JavaScript and EaselJS

without comments

If you run my EaselJS Drone Follow example from yesterday on any non-Android / iOS computer / device, you may notice that a graphic is drawn between the mouse touch point and the current position of the drone. This is done by managing and drawing to two canvas elements and is provided to help make it clear what the drone is following (your mouse) and which direction it is currently heading.

Why use two canvas elements, instead of just drawing to one? Well, there are two primary reasons I architected the example like this.
Read the rest of this entry »

Written by mikechambers

January 25th, 2011 at 12:54 pm

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: