Jolie Rouge

all ur parentheses Я belong to me

HTML5 Canvas: Smooth, variable width lines with transparency.

When making a drawing app with HTML5 canvas, you might come up against the problem of making a smooth, variable width line. Eventually you might find that you can make several calls to ctx.quadraticCurveTo(x,y,xc,yc) and get some kind of effect. If you stroke every 2 or 3 points, then as long as the line width is very small, you won’t notice the jaggedness.

Unfortunately, if you try to do this with semi-transparent lines, the effect is truly horrible. To solve this problem, instead of drawing lines, I simply draw very thin shapes, and fill them with a color. This allows for 1) variable thickness and 2) nice transparency. Variable transparency is a problem I haven’t quite figured out yet. It may require composing the shape from individual pixels, which is simply too slow, especially in IE.

What I am writing is a drawing App that works with the Wacom Web Plugin, and therefore varies line thickness based on pressure. I would like to vary opacity too, but this seems problematic right now. A solution that may be possible is to fill the shape with a complex gradient, if it is possible to create semi-transparent stops.

Here is an image of what the program does so far:



HTML5 Canvas, Pixel Compositing, Transparency, and why all the trivia!

One thing I really hate about new technology are all the early adopters who incessantly post the same trivial examples. They cross link them too. So you can go from one page to the next, and see essentially the same example, just with the bits renamed or moved around.

At a certain point, I got it into my head that I wanted to make a quickie HTML5 App that works with my Intuous5 Wacom Pad. Wacom has a web plugin that let’s you get data about pen pressure and so on from the tablet. So I started to work on it, and found the said trivial examples and started mashing something up. Pretty soon it became apparent that if I wanted my lines to look good, I might have to anti-alias them, or so I am trying, I don’t know if it will work, because I just spent the better part of 2 hours looking for a solution to a simple problem.

If you look for examples of pixel level manipulation for HTML5 Canvas, you will find the same trivial examples over and over again, which basically say:

var id = context.createImageData(1,1);

var d =;

Parsing infix to postfix in C++11

Pursuant to my interest in programming language design, I have been giving a lot of thought to mathematical expressions. Making sense of a mathematical expression written by a human is difficult from an algorithmic point of view. It’s certainly not impossible.

Humans read and write mathematical expressions in a notation called infix1  however this requires sorting operators by precedence2, which humans are very good at, but computers not so much. To be able to do it, a computer has to first parse and identify all parts of a token stream until the end, and then group those parts, and then sort them based on the operator precedence. That’s an awful lot of work. There is however another type of notation[actually there are several.] called postfix3 which is very easy for a computer to operate on because each time it encounters an operator4 it simply collapses the last two numbers and replaces the operator with the answer. In this way the token stack reduces to a single number by a series of linear actions requiring no lookahead5 or knowledge of what is to come.

I decided today to implement a mini calculator language that takes an infix expression6 and returns the value after parsing it into postfix to operate on it.

Here is the code:


Looking up variables based on a context.

The general caveat for all these articles I am writing on Programming Language Design is: I don’t know. I am just messing around and trying to figure out how they work and how they can be implemented. The internals of most programming languages are scurry scurry1 places. When you read the source code for say the v8 engine you are struck by the apparent elegance of its design, it’s quite fun to read the source, and you can even abstractly understand what it going on. But an abstract understanding is not the same as a pragmatic understanding.

Pragmatic Understanding

To see if you have a pragmatic understanding of something, unplug your computer from the internet, then write an algorithm or program in your preferred language that implements that understanding, accepting a series of inputs and consistently producing the expected outputs. You can only use printed references that detail libraries, i.e. you can look up the details of some STL functions and the like. When you can do this, you have a pragmatic understanding.

It’s easy to describe the process of creating a programming language like this:

Well, first you scan for tokens, then you create a parse tree, then you navigate that parse tree and either a) emit byte codes or b) execute core functions.2

What's involved.
What’s involved.

Lexical Analysis: You should use FLEX…right?

It’s been a hobby of mine for that last few years to try to create my own programming language. Don’t ask why, I just want to. Over the years I have tried and failed multiple times. This is mainly due to the fact that I am a self taught programmer with no CS background, or Math background, or any real education.

When you set out to learn how one makes a programming language you will receive a series of answers similar to this:

  1. Use flex to generate a lexical analyzer.
  2. Use Bison to generate a Parser
  3. Forget both of those and use ANTLR