How to fit a sentence in a rectangle with the Hershey vectorial font.

via wikipedia: The Hershey fonts are a collection of vector fonts developed circa 1967 by Dr. A. V. Hershey (...). Vector fonts are easily scaled and rotated in two or three dimensions; consequently the Hershey fonts have been widely used in computer graphics and computer-aided design programs.. When programming, I often have to fit a sentence in a rectangle (for example to write the name of a short-read in the graphical view of a BAM) so I wrote a XML version of the hershey font.

<?xml version="1.0"?>
<hershey>
  <letter id="1" count="9" left="-5" right="5" char="a">
    <moveto x="0" y="-5"/>
    <lineto x="-4" y="4"/>
    <moveto x="0" y="-5"/>
    <lineto x="4" y="4"/>
    <moveto x="-2" y="1"/>
    <lineto x="2" y="1"/>
  </letter>
  <letter id="2" count="16" left="-5" right="5" char="b">
    <moveto x="-3" y="-5"/>
    <lineto x="-3" y="4"/>
    <moveto x="-3" y="-5"/>
    <lineto x="1" y="-5"/>
    <lineto x="3" y="-4"/>
    <lineto x="3" y="-2"/>
    <lineto x="1" y="-1"/>
    <moveto x="-3" y="-1"/>
    <lineto x="1" y="-1"/>
    <lineto x="3" y="0"/>
    <lineto x="3" y="3"/>

From there, I can generate some bindings
for various programming languages using XSLT, for example javascript:

{
 "1":[{t:'M',x:0,y:-5},{t:'L',x:-4,y:4},{t:'M',x:0,y:-5},{t:'L',x:4,y:4},{t:'M',x:-2,y:1},{t:'L',x:2,y:1}],
 "2":[{t:'M',x:-3,y:-5},{t:'L',x:-3,y:4},{t:'M',x:-3,y:-5},{t:'L',x:1,y:-5},{t:'L',x:3,y:-4},{t:'L',x:3,y:-2},{t:'L',x:1,y:-1},{t:'M',x:-3,y:-1},{t:'L',x:1,y:-1},{t:'L',x:3,y:0},{t:'L',x:3,y:3},{t:'L',x:1,y:4},{t:'L',x:-3,y:4}], ...

In the Javascript example below, I'm generating some random rectangles where a sentence is written:


That's it,
Pierre

Playing with the ming API , a C library for SWF/Flash.My notebook.

Ming is a C library generating some simple Flash/SWF movies. In this post I will describe how I used the Ming API by try to converting to SWF the SVG that was generated in a previous post
Genetic Algorithm with Darwin's Face: Dynamic SVG

The original SVG file

The original SVG file looks like this:

<?xml version="1.0"?>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" width="160" height="222" style="stroke: none;" viewBox="0 0 160 222">
<svg:g id="face">
<svg:polygon points="110,193 11,320 -67,164" style="fill: rgb(129, 82, 122); opacity: 0.68;"/>
<svg:polygon points="109,30 224,181 -4,-1" style="fill: rgb(213, 113, 17); opacity: 0.52;"/>
<svg:polygon points="128,105 101,0 209,-75" style="fill: rgb(200, 91, 58); opacity: 0.04;"/>
<svg:polygon points="115,183 169,232 193,-29" style="fill: rgb(185, 133, 125); opacity: 0.9;"/>
<svg:polygon points="68,186 47,39 57,30" style="fill: rgb(249, 68, 34); opacity: 0.62;"/>
<svg:polygon points="80,185 108,123 158,131" style="fill: rgb(62, 181, 169); opacity: 0.56;"/>
<svg:polygon points="110,61 211,-86 115,217" style="fill: rgb(10, 46, 216); opacity: 0.86;"/>
<svg:polygon points="115,183 169,232 192,-27" style="fill: rgb(188, 127, 122); opacity: 0.9;"/>
<svg:polygon points="78,197 205,135 85,178" style="fill: rgb(53, 145, 210); opacity: 0.6;"/>
<svg:polygon points="108,64 211,-81 111,220" style="fill: rgb(10, 46, 216); opacity: 0.46;"/>
<svg:polygon points="110,59 210,-88 116,215" style="fill: rgb(10, 46, 216); opacity: 0.86;"/>
<svg:polygon points="53,138 60,45 46,60" style="fill: rgb(13, 98, 29); opacity: 0.8;"/>
(...)

A generic C program using the ming API would look like this:

/* initialize ming */
Ming_init();
/* create a movie */
movie=newSWFMovie();
/* set number of frames */
SWFMovie_setNumberOfFrames(movie, NUM_FRAME);
/* loop over the frames */
for(i=0;i<NUM_FRAME;++i)
{
/* create rectange */
rect = newSWFShape();
SWFShape_movePenTo(rect,x,y);
SWFShape_drawLineTo(rect,x+width,y);
SWFShape_drawLineTo(rect,x+width,y+height);
SWFShape_drawLineTo(rect,x,y+height);
SWFShape_drawLineTo(rect,x,y);
/* add figure in the movie */
SWFMovie_add(swf, rect);
(...)
/* add frame */
SWFMovie_nextFrame(movie);
}
/* save movie to file */
WFMovie_save(movie,"file.swf");
/* dispose movie */
destroySWFMovie(movie);

I created a simple C code transforming my SVG to SWF using the ming API. The file contains 5 frames where I slightly moved some shapes. The code was posted on github at: http://github.com/lindenb/ccsandbox/blob/master/src/svg2swf.c.

Compile & run:

export LD_LIBRARY_PATH=${ming.lib.dir}
gcc -L ${ming.lib.dir} -I ${ming.include.dir} `xml2-config --cflags ` svg2swf.c -lming `xml2-config --libs `
./a.out -o darwin.swf darw.svg

Result

(also posted on OWW)

That's it
Pierre

Curvilnear perspective

I've always been fascinated by Albert Flocon's book about Curvilinear Perspective.

[source]

I started the article in the french wikipedia and I've searched for a long time how to generate those figures. The solution was rather simple simple: For a point with the 3D coordinates:

(x0,y0,z0)

. Then, in a curvilinear perspective

dist=sqrt(x1^2 + y1^2 + z1^2)

x=x1/dist
y=y1/dist

I can now generate my own drawings! :-)

Using a curvilinear perspective...
>
... or using a classical vanishing point.

That's it,

Pierre

A tool converting SVG to Canvas

This blogging platform, Blogger.com, does not display its content in XHTML: in consequence, it is not possible to embed a SVG picture in the body of a post. Solution: I've created a tool called SVGToCanvas converting a SVG document to a Canvas script. The software is available here:

http://code.google.com/p/lindenb/wiki/SVGToCanvas

. For example, the picture below was a SVG file converted to canvas (yes, have a look at the html source).

That's it.
Pierre

Inspired from "Retour du Bal", Alfred Roll (1846-1919). Musee des Beaux-Arts de Nantes.