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:

test

 

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 = id.data;

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:

#include 
#include