https://github.com/remcoder/pxxl.js

With pxxl.js and the included BDF font files you can 'render' a text to an array of pixel coordinates. You can then use the pixel coordinates to do your own drawing.
https://github.com/remcoder/pxxl.js

Last synced: 5 months ago
JSON representation

With pxxl.js and the included BDF font files you can 'render' a text to an array of pixel coordinates. You can then use the pixel coordinates to do your own drawing.

• Host: GitHub
• URL: https://github.com/remcoder/pxxl.js
• Owner: remcoder
• License: other
• Created: 2011-07-05T19:32:46.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2015-09-14T21:11:34.000Z (over 10 years ago)
• Last Synced: 2024-11-10T23:47:09.852Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 6.72 MB
• Stars: 121
• Watchers: 6
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
![example](http://remcoder.github.io/Pxxl.js/img/interactive%20white.png)

With pxxl.js and the included [BDF font](http://en.wikipedia.org/wiki/Glyph_Bitmap_Distribution_Format) files you can 'render' a text to an array of pixel coordinates. You can then use the pixel coordinates to do your own rendering.

So pxxl.js itself doesn't really render anything to the screen. You might say it's 'as-if' rendering :-)

You can then use the pixel coordinates in any way you can imagine. For example:

  - plot them on a canvas

  - create `position:absolute` divs

  - use WebGL

  - use 3D CSS

  - etc

## Example

![example](http://remcoder.github.io/Pxxl.js/img/happy_newyear.gif)

## Download

 * [pxxl.js - development version - uncompressed](https://github.com/remcoder/Pxxl.js/blob/master/dist/pxxl.js) (32k)

 * [pxxl.min.js - production version - minified](https://github.com/remcoder/Pxxl.js/blob/master/dist/pxxl.min.js) (12k)

 * [a zipfile with a bunch of BDF fonts](http://remcoder.github.io/Pxxl.js/fonts.zip) (67k)

## Install via Bower

You can install Pxxl.js via [bower](http://bower.io/) with the following command:

	$ bower install pxxl

## Quick-start

For simple scenarios, you can use the `pxxl()` function. It takes care of downloading the font file via ajax, it parses the font, caches the result, and then it 'renders' the text to a 'pixel info' array.

    pxxl(, , )

* ``

A url used to retrieve a font file via XHR. The font should be in the BDF format, which is an old text-based format for bitmap fonts.

* ``

The text you would like you render.

* ``

The callback is where the rendering should happen. It is called after the font has loaded and has been parsed. The argument that gets passed is an array of pixels, like this:

	[{ x: 0, y : 0 },

	{ x: 1, y : 0 },

	{ x: 2, y : 1 },

	{ x: 3, y : 1 }

	..etc..        ]

Note that the font file won't be downloaded again on subsequent calls because the parsed font is cached.

## Simple example

![example](http://remcoder.github.io/Pxxl.js/img/pxxl.png)

    pxxl("fonts/c64d.bdf", "Pxxl.js", function (pixels) {

      var ctx = $('canvas')[0].getContext('2d');

      for (var p=0,hue=0 ; p