Why doesn't p5.js support .otf colorfonts?

p5.js Libraries
1

I discovered .otf colorfonts about 8 years ago, and am pleased to say that almost all browsers now support them. Yet p5.js is not configured to recognize them, nor is JavaScript, as far as i can discover. This should be a fairly easy update. If there are currently too many updates in the mill, perhaps someone would make a library to accommodate colorfonts in the meantime. Please look at my OpenProcessing sketch [https://openprocessing.org/sketch/2684885] to see the possibilities. Thanks

2

Link to sketch https://openprocessing.org/sketch/2684885

I found a library called opentype on github - a quick inspection of the readme file suggests that this might do the job.

Disclaimer: although I am aware there is an otf fonto format I have never looked into it before so I can’t be sure this will do exactly what you want.

Unfortunately I don’t have OpenProcessing plus membership so I can’t save your sketch and work on it. Is there a link we could use to download the font :grin:

1 Like
3

Here is a zip file of Abelone.otf, a very nice shaded colorfont.

(Attachment Abelone.zip is missing)

(attachments)

image0.jpeg
image0.jpeg1759×948 159 KB

5

After several hours of research and experimentation I managed to get it to work :partying_face:

The code turned out to be very simple

let otf;

function setup() {
    let p5canvas = createCanvas(640, 100);
    getOFT('Gilbert-Color Bold Preview5.otf');
}

function draw() {
    background(240);
    //                                                            Font
    //                           Display text              X   Y  size
    otf?.draw(drawingContext, 'Quark does it again LOL!', 20, 60, 60);
}

async function getOFT(url) {
    const res = await fetch(url);
    const buffer = await res.arrayBuffer();
    otf = await opentype.parse(buffer);
}

Just a few of things to note

  1. The font is loaded asynchronously so the variable oft may be undefined when we attempt to use it in draw, hence the conditional access operator (?.) must be used to prevent exceptions.

  2. The HTML file must link to the OpenType source so thhis link should appear in the header section of the HTML file
    <script src="https://opentype.js.org/dist/opentype.js"></script>

  3. Obviously being a color font it will ignore the current stroke and fill colors when rendered.

This sketch simply shows that otf colorfonts can be displayed in p5js but incorporating it into the p5js language would be a very much bigger task.

2 Likes
6

That’s is a great solution. I will create a few sketches using the technique and credit you in every one. Sinan may be interested in adding the library to OpenProcessing.

Thanks!

Richard