Tag Archives : Programming


HTML5 Canvas: Smooth, variable width lines with transparency. 2

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:   Each line is actually a full shape, with varying degrees of opacity. Thickness and thinness is accomplished with pen pressure from the Wacom Intuous5 tablet. As the line is drawn, a temporary line is shown to the user, when they lift the pen, that line disappears, and a […]

jadczyk_line_eq1

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; d[0] = r; // where r is 0…255 … context.putImageData(id,x,y); If you actually want a full trivial example, use google, they abound. The problem with the above is: it replaces the entire pixel, all the way to the background, erasing any colors beneath it. The alpha channel of the pixel doesn’t make it transparent to what was under the […]


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: Use flex to generate a lexical analyzer. Use Bison to generate a Parser Forget both of those and use ANTLR To understand what you need to do to create a programming language, you will need to understand that in general all programming languages have a set of modules that take turns with the users input (i.e. the script). The Lexer The Lexer, or Scanner is the first component of a programming language. It reads a stream of characters and groups them together into meaningful parts. The Lexer adds no semantic meaning to the stream. Lexers create “meaningful” tokens. They generally, but not always, do not create whitespace tokens, they “ignore” them in the sense that they do not lead to the emission of a token, but they “use” them to delineate tokens. Flex has a simple interface for creating a lexer, a simple Scanner will look like this: If we save that as test.y and run: flex test.y cc lex.yy.c -o example -lfl ./example We can then start entering in some text. […]


clang++ and C++11 generic Makefile

As a general rule, I have a little scratch pad Makefile that I use as a template for all my C++ apps. I thought I would post my basic template when I am prototyping some code, or just running a little test example. CXX=clang++ FLAGS=-std=c++11 -stdlib=libc++ all: clean: rm -fr build/* test: $(CXX) $(FLAGS) src/test.cpp -o build/test.bin -Isrc/ .PHONY: all clean test


Spree Commerce, eBay Trading API, and the eBay Accelerator Toolkit from Intradesys EbatNs

In this bit, I talk about using the EbatNs SDK for the eBay Trading API, to list items from your Spree Commerce store, or really any rails application. Filled with production code examples from an honest to god real live and working spree site that interfaces with the eBay trading API to Add, Revise, and End items, on ebay when they sell in your store, or on your store when they sell on eBay.


Qt C++ Screen Capture using BitBlt 2

So I got to thinking I wanted to be able to take abitrary screen captures based on some startx/starty -> endx/endy input. I found various sites showing how to do this, but most of them were pretty confusing. I thought I would post the final working code here. void RSystem::snap(int startx, int starty,int endx,int endy) { HDC hdcScreen,hdcMemDC = NULL; HBITMAP hbmScreen = NULL; BITMAP bmpScreen; HWND hDesktopWnd = NULL; hDesktopWnd = GetDesktopWindow(); hdcScreen = GetDC(hDesktopWnd); hdcMemDC = CreateCompatibleDC(hdcScreen); if (!hdcScreen) { qDebug()


Qt C++ application framework evangelism

I am normally not much of an evangelist, but after working with Qt C++ on a few different apps, (my first experience was back when it was still trolltech and I was running KDE on Mandrake Linux, ahh the good ol days.) and all I can say is: This is C++? Qt is the C++ framework of the future, and those who haven’t adopted it should, now, as soon as possible. A little case study will suffice. I have been working on a project for a few months now and a few days ago it came up that there needed to be plugin architecture integrated into the software so that third party vendors could easily add functionality to the program. Sounds fun huh? The answer was simple, Qt already has a signals and slots mechanism, asking third party vendors to use Qt isn’t unreasonable, its a dead easy framework to use, and no, it’s not that bloated. Here were the steps: Create a standard message definition that can be used to communicate steps and program state Create a general purpose relay QObject (I called it Telegraph) with a send and receive. It sends, whatever it receives. Pass the relay object to the library allowing them to connect to the send/receive methods on the object The entire plugin architecture was up and running in less than an hour, and tested, it hasn’t had an issue yet, though I am sure something might need some finaigling before it ships. The great thing about it is, plugins can […]


HowTo: C Function Pointers for a Linear Search, void star pointer trick, comparison using memcmp, string replace

Well, I was messing around in C again today, sometimes I just love C, it’s a fun language when you understand it, which I really don’t, but am beginning to grok it. Anyway, I was checking out a little tutorial on C and saw this cool little trick that I thought I would share. It’s the beginnings of a generalized linear search algorithm. #include #include #include int linearSearch (void * key, /* pointer to the data to compar*/ void * base, /* base of the data*/ int n, /* number of elements */ int size, /* quantum of data*/ int ( * cmpfunc)(void * e1,void * e2, int size) /* comparison function */); int simpleCompare(void * e1, void * e2, int size); int main ( int argc, char *argv[]) { int array[5]; /* a simple array of ints*/ int i; for (i = 0; i < 5; i++) { array[i] = i; /*load the array so we can search*/ } int s = 24;/* this is the search value, change it around to test */ /*we pass in the addresses of s, the array, which is a pointer already, the number of elements, the sizeof the data, and the address of the function*/ if (linearSearch(&s, array, 5, sizeof(int), &simpleCompare) != -1) { printf(“%i was found in array. \n”,s); } else { printf(“%i was not found in array.\n”,s); } } int linearSearch (void * key, /* pointer to the data to compar*/ void * base, /* base of the data*/ int n, /* number of elements […]


HowTo ActionScript 3 (as3 flash or flex or AIR) Class and Object Inheritance, extends

It seems I have been getting alot of hits due to my post on AS3 inheritance, and I notice that most of the documentation and examples out there don’t really cover the whys and the hows in a thorough manner. There are a couple of parts to this little tutorial, the first being a kind of very basic demonstration of extending, and then some concrete realworld samples. You can jump ahead to the realworld samples if you are just looking to see how/why you might use extend to solve some real problems. Basic/intro to oop and extending in as3 extending event dispatcher to manage your own event queue extending event to create a custom event and finally extending Panel to make a drag/drop Panel Having classes and objects does not equal OOP. To understand a class, you need to understand that an object without state or behavior is meaningless, so to be an object, it must have those things. The object itself is an environment, it is like a scope, it’s a container which imparts a kind of semantic meaning to the function and variables attached to it. Having objects is very nice, but there needs to be something more, and that something more is inheritance. Without inheritance, objects are simply wrappers, and it would be just as well to create functions and simply pass in some kind of key to ameliorate what to do. With inheritance, you share state and behavior between objects. The common example is with a person, people have names, and […]


Firefox Content Encoding Error, PHP Website

I looked around online, and couldn’t find any solutions to this problem, so here is one possibility for you. I have a client with an intranet website with a custom MVC framework in PHP. In one of the controller actions, there was an echo statement. Normally, this shouldn’t really affect it, i.e. when you start echoing things, PHP normally sends the start of output headers and just plugs along. Everything worked fine awhile around, but then someone upgraded the server, and put the latest PHP there. Now those pages were broken, giving the Content Encoding Error. Removing the echo statements that were coming before the start of the page got rid of the error.