Strictly unable to use textToCountours()

[romain-granai]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

2.0.3

Web browser and version

Firefox 139.0.4 - Chrome 137.0.7151.122 (Official Build) (arm64) - Safari 18.5 (20621.2.5.11.8)

Operating system

MacOs Sequoia 15.5

Steps to reproduce this

1. Open the https://beta.p5js.org/reference/p5.font/texttocontours/
2. Click on the play button
3. Nothing seem to work

or

1. made my own version on Codepen using the demo code (https://beta.p5js.org/reference/p5.font/texttocontours/), a strict copy/past
2. Changed the font url to a .otf Codepen hosted font
3. Nothing seems to work

let font;

async function setup() {
createCanvas(100, 100);
font = await loadFont('https://assets.codepen.io/225413/Spezia-VF-Upright.otf');
}

function draw() {
background(200);
textAlign(CENTER, CENTER);
textSize(30);

// Get the point array.
let contours = font.textToContours('p5*js', width/2, height/2, { sampleFactor: 0.5 });

beginShape();
for (const pts of contours) {
beginContour();
for (const pt of pts) {
vertex(pt.x + 5sin(pt.y0.1 + millis()*0.01), pt.y);
}
endContour(CLOSE);
}
endShape();

describe('The text p5*js wobbling over time');
}

In both versions (on the beta P5 website AND on my Codepen example), I have that error :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://assets/inconsolata.otf. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Is that supposed to do something? Is there some kind of working demo somewhere?

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[davepagurek]

It looks like the p5 reference example has a broken link to the font, as it starts with //assets instead of /assets (removing one slash and rerunning works for me on the p5 website.)

Here's a working p5 web editor example using the same code but a Google Fonts URL: https://editor.p5js.org/davepagurek/sketches/KtgD4BlU-

It looks like the error you posted is from the web editor (it references assets/inconsolata.otf like the example). For the one using your CodePen font, it looks like CodePen specifically requires CORS headers to be in a fetch request.

So I think there are two tasks here:

1. Fix the URL in the reference example
2. Look into what our options are for assets that require CORS (@limzykenneth do you know if we already have ways to handle that for other load* methods?)

[limzykenneth]

The default expectation is for the server to serve the asset with Access-Control-Allow-Origin: * or already be on the same origin, ie. the default behavior of fetch with URL and no additional arguments.

The server is the one that is usually in control of CORS and the only setting the client may be able to set is credentials: "include" (although quite rare). In this case and any other more custom use case, the user can pass in a Request object to the load functions instead of just a URL string and customize the request as needed.

However, the CORS error we are seeing in the issue here is not a CORS error but a cannot find server error (ie. incorrect but still valid URL error). Annoyingly at least firefox seems to uniformly report cannot find server error as CORS error when using fetch and I'm not sure there's a good way to differentiate between actual CORS error and a cannot find server error (maybe a status code of null?).