Tag Archives: javascript

Highfalutin’ Convolutin’

Convolution Image

I was doing a code test recently where I was asked to write an html 5 gallery. It led me to reach a couple of conclusions:-

  • HTML5 video is a lovely idea but from a practical implementation standpoint is stupid and useless because of the ridiculous browser requirements.
  • The canvas 2d context API is woefully underpowered.

Today I will be ranting about and playing with the second idea. We’ll start with introducing the CanvasPixelArray. We’ll apply a grey filter to an image, then we’ll move on to writing a simple convolution method.
Continue reading

An Initial Salvo into HTML5

HTML 5 Logo

I’ve been playing with the drawing API for flash for a long time now, but I’ve not really looked into drawing using the HTML5 canvas tag. So i decided to take a gander at the W3C Canvas 2D context spec.

I decided to do a little test to compare drawing with AS3 to drawing with Javascript. I used a little animation I had done where I draw a circle over time, but vary the radius with time so it doesn’t end up as a circle. You can check out the javascript here, i’m sure it’s clunky and definitely not perfect in any way, I just wanted to knock up a quick demo.

One thing of note is that relying on a setInterval in javascript for an == conditional clause is highly unreliable. I think the condition was met once initially, and then never again as the browser jerked its way through the animation, resulting in the clearInterval never being called. Instead of checking for equality i ended up checking for greater than or equal to. Seemed to work.

It seems like a bit of a pain to draw over time with canvas, or just doing vector drawing in general.

Here’s the link