Archive

Archive for the ‘JavaScript’ Category

Cappuccinno

September 15, 2010 Leave a comment

I’ve been working on familiarizing myself with various JavaScript frameworks and methodologies over the past few weeks at work. I recently came across the Cappuccino framework. While I had seen this in the past, I never really tried it out. Well, last week I actually started poking around with it. 🙂

The basic idea of the framework is to provide a platform for building web-based applications. That means it’s a library nothing like jQuery where you pick and choose what elements of jQuery you want, Cappuccinno is an all-or-nothing solution.

The thing I found most interesting was that the JavaScript you write is actually written in a language they call Objective-J. At its heart, it is Objective-C for JavaScript. This is pretty compelling as in theory you could more easily port an exisiting Cocoa application for the web. In practice, this is a long ways out as there is a lot of the underlying framework missing.

I did find writing the Objective-J code very familiar as I’ve used Objective-C in the past. Is this the new way to write web apps? I don’t know… definitely needs some work to before it truly becomes a v1 product, but it has potential.

Some might cringe that it abstracts the “HTML-ness” away from the web, but I don’t necessarily think that is a bad thing.

The most interesting thing about Cappuccinno, to me at least, is there Atlas project. It’s basically Interface Builder for JavaScript, which I find very interesting. They also have tools to convert your Nib files to Cib (basically a Cappuccino Nib file) files which allow you to load up UI that way.

It’s definitely a framework you should look into if you are developing a new web-app from scratch. It obviously doesn’t have the widespread use like jQuery does, but that’s not always a bad thing.

Advertisements
Categories: JavaScript, Programming

HTML5 Canvas and Dashed Lines

September 7, 2010 19 comments

I’ve been spending a lot of time with HTML5’s new Canvas tag, and I have to say, I’m quite excited with it. The gratification you can get with a small set of code rendering some images is great! It’s nothing like what you need to get going in C++ and OpenGL or even XNA – pure, simple, and of course, very limited.

Canvas is currently so limited that you cannot even draw a simple dashed line! Straight lines, no problem.

This is clearly a problem that needs fixing and luckily enough, I have just a solution. 🙂

So, how might we go about adding this functionality. Quite simply! Thanks to the ability for JavaScript’s prototypical nature, and maybe more accurately, it’s dynamic nature, we can extend the functionality of the Canvas object so that we can make our new functionality look like it’s built-in.

Ok, so how do we get started? First we need to define our protype code. I’ve created a new JavaScript file called canvas.js to where we’ll put our code.

CanvasRenderingContext2D.prototype.dashedLineTo = function (from, to, pattern) {}

That adds the ‘dashedLineTo’ function to our canvas protype.

Next we need to actually implement the function. I’m not going to actually go through and explain it all, but the idea of the code is to use the pattern parameter to define the length of each dash and each space, in alternating order, for your dashed line.

CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
  // Our growth rate for our line can be one of the following:
  //   (+,+), (+,-), (-,+), (-,-)
  // Because of this, our algorithm needs to understand if the x-coord and
  // y-coord should be getting smaller or larger and properly cap the values
  // based on (x,y).
  var lt = function (a, b) { return a <= b; };
  var gt = function (a, b) { return a >= b; };
  var capmin = function (a, b) { return Math.min(a, b); };
  var capmax = function (a, b) { return Math.max(a, b); };

  var checkX = { thereYet: gt, cap: capmin };
  var checkY = { thereYet: gt, cap: capmin };

  if (fromY - toY > 0) {
    checkY.thereYet = lt;
    checkY.cap = capmax;
  }
  if (fromX - toX > 0) {
    checkX.thereYet = lt;
    checkX.cap = capmax;
  }

  this.moveTo(fromX, fromY);
  var offsetX = fromX;
  var offsetY = fromY;
  var idx = 0, dash = true;
  while (!(checkX.thereYet(offsetX, toX) && checkY.thereYet(offsetY, toY))) {
    var ang = Math.atan2(toY - fromY, toX - fromX);
    var len = pattern[idx];

    offsetX = checkX.cap(toX, offsetX + (Math.cos(ang) * len));
    offsetY = checkY.cap(toY, offsetY + (Math.sin(ang) * len));

    if (dash) this.lineTo(offsetX, offsetY);
    else this.moveTo(offsetX, offsetY);

    idx = (idx + 1) % pattern.length;
    dash = !dash;
  }
};

To use this code, just include your new canvas.js script file in your .html file in a script tag, and voila!

  <script type="text/javascript" src="canvas.js"><script>

If you know of a better way to do this, be sure to let me know!

Update: So, maybe I should have tested that version. 🙂 Updated the code to actually work and not rely on some other pieces of a library I’m working on.

Categories: HTML5, JavaScript, Programming