HTML5 Canvas Gradients - Radial Gradient Revisited

In this post I'm going to show you how to generate a radial gradient using HTML5 canvas pixel-wise API. As mentioned before the API actually includes a way to generate it without any fuss. My implementation differs a bit from the native gradient. It handles certain boundary cases in a different manner and is more generic. The approach could easily be extended to allow more complicated gradients to be rendered.

This time I will start out by explaining the math behind my approach first and move to the code after that.

HTML5 Canvas Gradients - Linear Gradient Revisited

This time I'm going to revisit linear gradient shown before by providing a version using HTML5 canvas' pixel-wise operations. I will start out by introducing an architecture that makes solving this kind of problems easier and tackle horizontal gradient first. After that I will move to vertical case and finally show how to deal with a linear gradient that has an arbitrary direction.

HTML5 Canvas Gradients - Radial Gradient

In this part of the gradient series I'm going to show you how to render a radial gradient using HTML5 canvas. I will come up with a simple gradient that follows your mouse cursor as you move it around the canvas.

HTML5 Canvas Gradients - Linear Gradient

In this tutorial series I'm going to show you how to generate various gradients using the HTML5 canvas element. It provides two handy types by default: linear and radial (also known as circular). I will focus on these two types first and move onto more exotic ones, including angular, later on. Let's have a look at the most basic one, linear gradient, at first to get our feet wet.

How to write a plugin system in JavaScript?

In this post I aim to provide some ideas for those that wish to build a plugin system for their JavaScript application. I have adapted this post from my work with my Harmony fork.

My system has been inspired heavily by the plugin mechanism of jQuery. Besides the basic idea there are a few special considerations (configuration, includes) to keep in mind. Let's have a look at the system next:

Linkdump 7 - a bit of JavaScript and HTML5 goodies

This time my dump is going to focus on JavaScript and HTML5. Here we go:

• Including js files from within js files. That's a handy trick! Too bad there's no "include" in JavaScript by default.
• 5 JavaScript Books Worth Every Cent. A nice collection. Particularly Resig's (author of jQuery) new book looks interesting.
• How to Draw with HTML 5 Canvas. Basic guide for getting started with canvas. There is some good information in Diving Into HTML5 as well.
• Multiuser sketchpad. Strangely addicting little app from mrdoob.
• Conway's Game of Life in HTML 5. You might have played with the app before. Now it's time to give it a go in your browser. Cellular automata is cool. :)
• Best HTML5 Canvas Games. There are some really cool games there. Nice showcase for canvas.

Harmony - Projection

Lately I have been working on projection functionality at my fork of Harmony. Projection allows you to draw straight lines and circles easily. It can be used to help in perspective work like a ruler. In addition I have found it useful for technical work as the following experiment shows:



In this latter experiment I tried out radial projection with some targeted projection:



The current version contains a couple of basic projections (horizontal, vertical, target, radial, parallel) and means to deal with projection targets (set, cycle). As a bonus I implemented projection preview.

The default hotkeys have been bound to number keys (not numpad!) spanning from 1 to 7. They are configurable at src/js/conf.js. There are some other goodies there as well.

I suppose I will revisit symmetry functionality next and then move onto layers or something else that's fun. Feedback and experiences on the feature are welcome as always. I probably should try to host the app somewhere but for now checking out the repo or downloading a tagged version (v0.39) ought to do.

Simple Tokenizer in Python

I came by a series that aims to build an ECMAScript interpreter in Python yesterday. As a homework the author offered a simple task of of implementing a tokenizer. I haven't implemented one earlier so I thought it might be fun to come up with one.

What is a tokenizer then? Basically it evaluates given input string and returns an evaluated result that contains some metadata. Instead of trying to complicate things further, it's probably easier if you take a look at my simple (hopefully!) implementation. I tried to keep it as readable as possible, really. :) Anyway, here we go:



It's probably far from perfect (pointers are welcome) but appears to work just fine with in the given cases. I found the development work really straightforward, thanks to test driven approach. I started out with simple tests and slowly expanded the test suite further. Later on it should be expanded to support more complicated cases.