vlw fonts

2,547 views
Skip to first unread message

yelo

unread,
May 1, 2009, 1:58:51 AM5/1/09
to Processing.js
Hi there,

I would like to know how i can create vlw fonts? Is it possible to
convert some ttf fonts to vlw?

Al MacDonald

unread,
May 1, 2009, 4:24:06 AM5/1/09
to proces...@googlegroups.com
I don't know anything about vlw's, you might have to ask John about that. I can show you how to convert fonts to SVG paths and render them out if that would help you? Example: http://hyper-metrix.com/processing-js/docs/?page=Cross-Browser%20Canvas%20Fonts


yelo wrote:
Hi there,

I would like to know how i can create vlw fonts? Is it possible to
convert some ttf fonts to vlw?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---
  

No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.238 / Virus Database: 270.12.10/2088 - Release Date: 04/30/09 06:01:00


julien de Nas de Tourris

unread,
May 1, 2009, 4:36:44 AM5/1/09
to proces...@googlegroups.com
I'm new to processing. On processingjs.org the reference say that they use .vlw fonts for the text method.
I mean if they can load a font arial.vlw, like when we use loadFont arial. there should be a way to convert a ttf font to vlw.
This is what i have done so far www.kohure.com
don't look at the html, i don't really care about the html when i develop to be honest.
the next step tomorrow is to add more text, make them draggable, and change the font.
Add more text and make them draggable, i think i can code it. But use different fonts is another story.

On Fri, May 1, 2009 at 8:24 PM, Al MacDonald <dire...@hyper-metrix.com> wrote:
I don't know anything about vlw's, you might have to ask John about that. I can show you how to convert fonts to SVG paths and render them out if that would help you? Example: http://hyper-metrix.com/processing-js/docs/?page=Cross-Browser%20Canvas%20Fonts


yelo wrote:
Hi there,

I would like to know how i can create vlw fonts? Is it possible to
convert some ttf fonts to vlw?

  

No virus found in this incoming message.
Checked by AVG - www.avg.com 
Version: 8.0.238 / Virus Database: 270.12.10/2088 - Release Date: 04/30/09 06:01:00

  

Al MacDonald

unread,
May 1, 2009, 4:45:55 AM5/1/09
to proces...@googlegroups.com
Ah, I don't think VLW's are used in the js version. I will update the site to reflect that tomorrow.

Your site is looking stylish so far. Was it just Arial you wanted to use? Or was it that whole list of fonts? I can always SVG them for you and send you a little demo. I mean... if you don't care about how they get on the canvas... just that they get there quick, and look good, then I'm your man.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---


No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.238 / Virus Database: 270.12.10/2088 - Release Date: 04/30/09 06:01:00

julien de Nas de Tourris

unread,
May 1, 2009, 4:52:48 AM5/1/09
to proces...@googlegroups.com
i'm looking to use the maximum fonts possible to the user.
If i can use SVG, i will. It's just that the API reference on processingjs.org only refer to vlw.
I will take a look on how to use SVG.
I have took a look at using glype, but i still don't know how to convert ttf to a glyph table

Al MacDonald

unread,
May 1, 2009, 5:08:58 AM5/1/09
to proces...@googlegroups.com
Well converting svgs to a glyph table is a pain in the ass to be honest. I did it all manually in InkScape, we should probably come up with a fast way of doing it. You know.. we would do best to read actual TTFs within Processing, but it's something that would need proper attention, I believe Adobe have all the documentation on how to read font data from binary ttfs, so it's a case of getting a developer to sit down for a week or so and get it right... or find someone that's read binary fonts before and will do it quickly.

It would be a very big sell for Processing though, to be able to render ttf so it's worth the effort.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---


No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.238 / Virus Database: 270.12.10/2088 - Release Date: 04/30/09 06:01:00

julien de Nas de Tourris

unread,
May 1, 2009, 5:14:49 AM5/1/09
to proces...@googlegroups.com
Do you think that using glyph table is good solution?
What will you use for example to change the fonts dynamically?

Robert O'Rourke

unread,
May 1, 2009, 6:12:22 AM5/1/09
to proces...@googlegroups.com
What actually needs to happen with the binary once it's been read?
Is this the kind of thing that might help?
http://snippets.dzone.com/posts/show/685

Al MacDonald wrote:
> Well converting svgs to a glyph table is a pain in the ass to be
> honest. I did it all manually in InkScape, we should probably come up
> with a fast way of doing it. You know.. we would do best to read
> actual TTFs within Processing, but it's something that would need
> proper attention, I believe Adobe have all the documentation on how to
> read font data from binary ttfs, so it's a case of getting a developer
> to sit down for a week or so and get it right... or find someone
> that's read binary fonts before and will do it quickly.
>
> It would be a very big sell for Processing though, to be able to
> render ttf so it's worth the effort.
>
>
> julien de Nas de Tourris wrote:
>> i'm looking to use the maximum fonts possible to the user.
>> If i can use SVG, i will. It's just that the API reference on

>> processingjs.org <http://processingjs.org> only refer to vlw.


>> I will take a look on how to use SVG.
>> I have took a look at using glype, but i still don't know how to
>> convert ttf to a glyph table
>>
>> On Fri, May 1, 2009 at 8:45 PM, Al MacDonald
>> <dire...@hyper-metrix.com <mailto:dire...@hyper-metrix.com>> wrote:
>>
>> Ah, I don't think VLW's are used in the js version. I will update
>> the site to reflect that tomorrow.
>>
>> Your site is looking stylish so far. Was it just Arial you wanted
>> to use? Or was it that whole list of fonts? I can always SVG them
>> for you and send you a little demo. I mean... if you don't care
>> about how they get on the canvas... just that they get there
>> quick, and look good, then I'm your man.
>>
>>
>>
>>
>> julien de Nas de Tourris wrote:
>>> I'm new to processing. On processingjs.org

>>> <http://processingjs.org> the reference say that they use .vlw


>>> fonts for the text method.
>>> I mean if they can load a font arial.vlw, like when we use
>>> loadFont arial. there should be a way to convert a ttf font to vlw.
>>> This is what i have done so far www.kohure.com

>>> <http://www.kohure.com>


>>> don't look at the html, i don't really care about the html when
>>> i develop to be honest.
>>> the next step tomorrow is to add more text, make them draggable,
>>> and change the font.
>>> Add more text and make them draggable, i think i can code it.
>>> But use different fonts is another story.
>>>
>>> On Fri, May 1, 2009 at 8:24 PM, Al MacDonald

>>> <dire...@hyper-metrix.com <mailto:dire...@hyper-metrix.com>>


>>> wrote:
>>>
>>> I don't know anything about vlw's, you might have to ask
>>> John about that. I can show you how to convert fonts to SVG
>>> paths and render them out if that would help you? Example:
>>> http://hyper-metrix.com/processing-js/docs/?page=Cross-Browser%20Canvas%20Fonts
>>>
>>>
>>> yelo wrote:
>>>> Hi there,
>>>>
>>>> I would like to know how i can create vlw fonts? Is it possible to
>>>> convert some ttf fonts to vlw?
>>>>
>>>>

>>>> ------------------------------------------------------------------------
>>>

Robert O'Rourke

unread,
May 1, 2009, 6:18:45 AM5/1/09
to proces...@googlegroups.com

julien de Nas de Tourris

unread,
May 1, 2009, 6:20:06 AM5/1/09
to proces...@googlegroups.com
But in the original procesing not the js adaptation. I think we can save the fonts in .vlw I think i need also to take a look at the original processing to look how it manage the font.

Al MacDonald

unread,
May 1, 2009, 3:08:24 PM5/1/09
to proces...@googlegroups.com
*correction: i've NOT done much with vlw's... actually I have never used a vlw.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---


No virus found in this incoming message. Checked by AVG - www.avg.com
 
Version: 8.0.238 / Virus Database: 270.12.12/2090 - Release Date: 05/01/09 06:17:00

  

Al MacDonald

unread,
May 1, 2009, 3:07:37 PM5/1/09
to proces...@googlegroups.com
OK, I see what you're getting at now Julien. Yeah why don't you take a look at vlw's and see what you can find. I've done done much with fonts in Native Processing. Let me know if you think vlw is the way to go once you've had tyhe chance to test it out.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---


No virus found in this incoming message. Checked by AVG - www.avg.com
 
Version: 8.0.238 / Virus Database: 270.12.12/2090 - Release Date: 05/01/09 06:17:00

  

Al MacDonald

unread,
May 1, 2009, 3:21:50 PM5/1/09
to proces...@googlegroups.com
Yeah that's the first stage, then we would apply path rules to the data like so:

Microsoft way:
http://www.microsoft.com/typography/otspec/otff.htm

Adobe(mac) way:
http://developer.apple.com/textfonts/TTRefMan/

One question I have from my experiments is.... is it quicker to write the path data out for each frame, or cache the data to a pixels[] array and write that out each frame?




Robert O'Rourke wrote:

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---
  

No virus found in this incoming message. Checked by AVG - www.avg.com
 
Version: 8.0.238 / Virus Database: 270.12.12/2090 - Release Date: 05/01/09 06:17:00

  

yelo

unread,
May 2, 2009, 7:16:25 PM5/2/09
to Processing.js
Hi Al,

I would like to use you glyph method but i still can't get some fonts.
On your site you say "2) Export the character paths from your SVG
software, such as InkScape. "
I have inkscape ( firstt time i'm using it). How do you export the
character paths?

I have converted a ttf to svg: this is the result:

<font id="MySVGFont" horiz-adv-x="1041" ><font-face
font-family="Verdana"
units-per-em="2048"
panose-1="2 11 6 4 3 5 4 4 2 4"
ascent="2059"
descent="-430"
alphabetic="0" />
<missing-glyph horiz-adv-x="2048" d="M256 0V1536H1792V0H256ZM384
128H1664V1408H384V128Z" />
<glyph unicode="0" glyph-name="zero" horiz-adv-x="1302" d="M1167
745Q1167 344 1042 157T652 -31Q384 -31 261 159T137 743Q137 1140 262
1329T652 1519Q920 1519 1043 1327T1167 745ZM904 291Q939 372 951 481T964
745Q964 897 952 1009T903 1199Q868 1276
808 1315T652 1354Q558 1354 497 1315T399 1197Q365 1123 353 1004T340
743Q340 587 351 482T398 294Q431 216 491 175T652 134Q746 134 808
173T904 291Z" />
<glyph unicode="1" glyph-name="one" horiz-adv-x="1302" d="M1084
0H278V152H588V1150H278V1286Q341 1286 413 1296T522 1327Q568 1352 594
1390T625 1494H780V152H1084V0Z" />
<glyph unicode="2" glyph-name="two" horiz-adv-x="1302" d="M1169
0H161V209Q266 299 371 389T568 568Q760 754 831 863T902 1100Q902 1216
826 1281T612 1347Q521 1347 415 1315T208 1217H198V1427Q269 1462 387
1491T617 1520Q846 1520 976 1410T1106 1110Q1106
1025 1085 952T1021 812Q982 750 930 690T802 557Q695 452 581 354T368
171H1169V0Z" />
<glyph unicode="3" glyph-name="three" horiz-adv-x="1302" d="M1038
717Q1086 674 1117 609T1148 441Q1148 339 1111 254T1007 106Q932 36 831
3T608 -31Q484 -31 364 -2T167 63V272H182Q267 216 382 179T604 142Q667
142 738 163T853 225Q899 269 921 322T944
456Q944 536 919 588T848 671Q803 702 739 713T601 725H511V891H581Q733
891 823 954T914 1140Q914 1194 891 1234T827 1301Q784 1327 735 1337T624
1347Q529 1347 422 1313T220 1217H210V1426Q281 1461 399 1490T629
1520Q738 1520 821 1500T971 1436Q1043 1388
1080 1320T1117 1161Q1117 1037 1030 945T823 828V814Q871 806 933
781T1038 717Z" />
<glyph unicode="4" glyph-name="four" horiz-adv-x="1302" d="M1203
419H982V0H790V419H77V649L798 1489H982V579H1203V419ZM790 579V1251L213
579H790Z" />
<glyph unicode="5" glyph-name="five" horiz-adv-x="1302" d="M1157
473Q1157 369 1119 274T1015 114Q943 44 844 7T613 -31Q491 -31 378 -6T187
56V267H201Q283 215 393 179T609 142Q680 142 746 162T865 232Q909 275 931
335T954 474Q954 551 928 604T854 689Q802
727 728 742T561 758Q473 758 392 746T251 722V1489H1147V1314H444V918Q487
922 532 924T610 926Q731 926 822 906T989 833Q1069 778 1113 691T1157
473Z" />
<glyph unicode="6" glyph-name="six" horiz-adv-x="1302" d="M1191
483Q1191 256 1042 113T675 -31Q565 -31 475 3T316 104Q230 187 184
324T137 654Q137 852 179 1005T315 1277Q403 1390 542 1453T866 1517Q925
1517 965 1512T1046 1494V1303H1036Q1008 1318
952 1331T836 1345Q621 1345 493 1211T344 847Q428 898 509 924T698
951Q793 951 865 934T1014 863Q1102 802 1146 709T1191 483ZM988 475Q988
568 961 629T870 735Q824 767 768 777T651 787Q566 787 493 767T343
705Q341 683 340 663T339 611Q339 453 371 362T461
217Q507 173 560 153T677 132Q822 132 905 220T988 475Z" />
<glyph unicode="7" glyph-name="seven" horiz-adv-x="1302" d="M1173
1266L499 0H285L1002 1314H154V1489H1173V1266Z" />
<glyph unicode="8" glyph-name="eight" horiz-adv-x="1302" d="M1180
415Q1180 222 1030 94T651 -34Q409 -34 266 91T122 411Q122 535 194
635T397 795V801Q277 865 220 941T162 1131Q162 1299 300 1411T651
1523Q874 1523 1007 1416T1140 1144Q1140 1043 1077
946T892 793V787Q1032 727 1106 639T1180 415ZM943 1142Q943 1249 861
1312T650 1376Q524 1376 444 1316T363 1154Q363 1082 403 1030T526 936Q563
918 632 889T768 841Q867 907 905 978T943 1142ZM974 396Q974 488 934
543T775 655Q728 677 672 696T523 749Q433
700 379 616T324 426Q324 291 417 203T653 115Q799 115 886 190T974 396Z" /
>
<glyph unicode="9" glyph-name="nine" horiz-adv-x="1302" d="M1167
834Q1167 639 1123 480T988 209Q897 95 760 33T438 -29Q386 -29 340
-24T258 -6V185H268Q297 170 350 157T468 143Q689 143 814 275T960 641Q867
585 785 561T606 537Q514 537 440 555T290 625Q202
686 158 780T113 1005Q113 1233 263 1376T629 1519Q737 1519 829 1486T990
1385Q1075 1302 1121 1172T1167 834ZM965 877Q965 1032 933 1126T845
1272Q798 1317 744 1336T627 1356Q483 1356 400 1266T316 1013Q316 918 343
858T434 753Q479 722 533 712T653 701Q731
701 811 722T961 783Q962 804 963 824T965 877Z" />
<hkern g1="exclam" g2="quotedblright" k="100" />
<hkern g1="exclam" g2="quoteright" k="100" />
<hkern g1="quotesingle" g2="A" k="100" />
<hkern g1="quotesingle" g2="AE" k="100" />
<hkern g1="comma" g2="quotedblright" k="210" />
<hkern g1="comma" g2="quoteright" k="210" />
<hkern g1="hyphen" g2="A" k="50" />

I have some glyph data for the numbers from 0 to 9 but not for the
letters

On May 2, 7:21 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> Yeah that's the first stage, then we would apply path rules to the data
> like so:
>
> *Microsoft way:*http://www.microsoft.com/typography/otspec/otff.htm
> *
> Adobe(mac) way:
> *http://developer.apple.com/textfonts/TTRefMan/*
>
> *One question I have from my experiments is.... is it quicker to write
> the path data out for each frame, or cache the data to a pixels[] array
> and write that out each frame?*
>
> **
>
> *
>
>
>
> Robert O'Rourke wrote:
> > Dug this up too
> >http://nagoon97.wordpress.com/2008/04/06/reading-binary-files-using-a...
> >>>>>     <direc...@hyper-metrix.com <mailto:direc...@hyper-metrix.com>>
> >>>>>     wrote:
>
> >>>>>         I don't know anything about vlw's, you might have to ask
> >>>>>         John about that. I can show you how to convert fonts to SVG
> >>>>>         paths and render them out if that would help you? Example:
> >>>>>        http://hyper-metrix.com/processing-js/docs/?page=Cross-Browser%20Canv...
>
> >>>>>         yelo wrote:
>
> >>>>>>         Hi there,
>
> >>>>>>         I would like to know how i can create vlw fonts? Is it possible to
> >>>>>>         convert some ttf fonts to vlw?
>
> >>>>>>         ------------------------------------------------------------------------
>
> > ------------------------------------------------------------------------
>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.12/2090 - Release Date: 05/01/09 06:17:00
>
> --
> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420
> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>

Al MacDonald

unread,
May 2, 2009, 9:35:50 PM5/2/09
to proces...@googlegroups.com
What you do... is type an 'A' then press "CTRL+SHIFT+X" to get the XML data, select the path for letter A, copy the path data, and paste it as a String into your glyph table. Now repeat for all the letters you want to use.

It's long-winded I know. The problem is no editors are going to just let you automatically convert fonts to SVGs for copyright issues, so you have to do it manually. But perhaps we should just write out own TTF reader and kill print shops forever.

I think VLW's refer to "processing" exported fonts, and I have a feeling they could be rasterized ie: very slow to render...    :(     but don't quote me on that as I'm just guessing.



yelo wrote:
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---

  

  

No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.238 / Virus Database: 270.12.13/2091 - Release Date: 05/01/09 17:52:00

julien de Nas de Tourris

unread,
May 3, 2009, 8:38:28 AM5/3/09
to proces...@googlegroups.com
Thanks for your help, i will take a look at your technique tomorrow.
If i really want to use some unique fonts, even if the technique is long, i will do it.
I'm gonna ask one of my perl coder friends to see if he can do something for me about that.

By the way, i have installed the original processing in java, and saw that we can export the font in vlw.
So i got the font like blah-24.vlw
I tried to load them in my processing js script, but no luck. In the end, it only display the default fonts of firefox.
loaded like this from processingjs.org
    PFont fontB = loadFont("blah.vlw");
Have checked that the fonts have the good permissions and are in the correct data folder.
Still no luck...
So i definitely begin to think about the glyph technique so i really appreciate your help on how to build a glyph table.

:)
 

No virus found in this incoming message. Checked by AVG - www.avg.com
Version: 8.0.238 / Virus Database: 270.12.13/2091 - Release Date: 05/01/09 17:52:00

Al MacDonald

unread,
May 3, 2009, 9:07:08 AM5/3/09
to proces...@googlegroups.com
Hey Julien,

Yeah I had a feeling vlw's were not tackled. I will make you a little tutorial video on creating a glyph table later tonight, that should make things real easy for you. I will create some standards for people to work by when making glyphs, so we can all share out work and create a bank of fonts.

In the mean-time I will be looking into adding EPS, SVG and TTF readers to Processing.js as I get the feeling these are going to be the most useful additions to Processing.js across the board. Anyone that wants to help research/develop these features, that would be awesome.

Al
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---


No virus found in this incoming message. Checked by AVG - www.avg.com
 
Version: 8.0.238 / Virus Database: 270.12.15/2093 - Release Date: 05/02/09 14:23:00

  

yelo

unread,
May 4, 2009, 7:15:09 PM5/4/09
to Processing.js
Thanks Al. If you have some time for the video, send it on my gmail
adress jdeto...@gmail.com or i will give you a ftp access to upload
it.

On May 4, 1:07 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> Hey Julien,
>
> Yeah I had a feeling vlw's were not tackled. I will make you a little
> tutorial video on creating a glyph table later tonight, that should make
> things real easy for you. I will create some standards for people to
> work by when making glyphs, so we can all share out work and create a
> bank of fonts.
>
> In the mean-time I will be looking into adding EPS, SVG and TTF readers
> to Processing.js as I get the feeling these are going to be the most
> useful additions to Processing.js across the board. Anyone that wants to
> help research/develop these features, that would be awesome.
>
> Al
>
> julien de Nas de Tourris wrote:
>
> > Thanks for your help, i will take a look at your technique tomorrow.
> > If i really want to use some unique fonts, even if the technique is
> > long, i will do it.
> > I'm gonna ask one of my perl coder friends to see if he can do
> > something for me about that.
>
> > By the way, i have installed the original processing in java, and saw
> > that we can export the font in vlw.
> > So i got the font like blah-24.vlw
> > I tried to load them in my processing js script, but no luck. In the
> > end, it only display the default fonts of firefox.
> > loaded like this from processingjs.org <http://processingjs.org>
> ...
>
> read more »
Reply all
Reply to author
Forward
0 new messages