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;

Backbone.js + Rails

You all know that my opinion of Ruby On Rails couldn’t be any lower if it was under the basement carpet of a Pompeii1 house, so this post won’t be very suprising.

So, awhile back I was having a discussion with a  friend about how, as a general rule, about 90% of a web app should really be taking place on the browser, and this was vindicated in my opinion with several other developers coming to much the same conclusion and releasing some very interesting application frameworks for javascript Single Page Applications. Of course this conversation took place when jQuery was just really starting to take off. The problem at that time was that no one was really talking about a client side application in javascript methodology, how such a thing could or would work.

In hindsight it all seems obvious, but actually, Backbone and other such frameworks represent some really great out of the box creativity. Anyway, after my last Rails project, I more or less swore I would never work with that ass backwards platform ever again. I decided to revisit this idea of Single Page Applications and low and behold I stumble onto Backbone.js, and I decide I am going to learn to use this tool. While looking around for some books on the topics of jQuery and Backbone (I’ve more or less decided to give up the ghost and use jQuery ui elements in all future applications cause rolling your own is just too much work.) low an behold I find a link to this: https://www.backbonerails.com. I thought to myself, you have to be shitting me. Mixing Backbone.js and Ruby on Rails is like taking a sexy girl back to your apartment and making her diddle herself across the room while you try to solve a Rubik’s Cube with your toes.

Rails is the big shining Mecca of Shit2 that passes for a software platform these days, so I understand that all the new kids want to make use of cool by association until graduation is over, and everyone realizes that the flashy douche bag will end up a used car salesman, slowly killing his soul, beating his wife and kids, and crying himself to sleep in a second hand recliner while he reminisces about the glory days over a bottle of cheap scotch.

Normally I would find such an ironic situation truly sad, but must admit the idea of a pot-bellied DHH sobbing like a little girl into a dixie cup filled with Tambowie is strangely satisfying.

The whole idea of Rails, the fundamental flaw of Rails can be summed up by drawing you a nice little picture.backbonevsrails

HowTo JavaScript/jQuery place divs in a circle, calculate a cirlce etc.

So,

I was working with my father, a physicist and mathematician, who wants to have a little math example done in javascript. We haven’t finished the meat and potatoes of the project, but one hurdle was the necessity to place 8 divs in a circle on the page. This is a variation on the Tirgrams and Clifford Algebras demonstration that comes with the Mathmatics software Wolfram. Essentially this displays the trigrams in a clock formation, right to left around a circle.

I looked around for a few examples and none of them seemed to work out the way I wanted them too, so I asked him to help and this is what we came up with.

//trigrams are a class that contain divs displaying 1 of 8 trigrams.
function draw() {
var windowWidth = $(window).width();