We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hello,
I am trying to write text in p5.js, but when I loadfont, nothing happens.
I have called the libraries in the head of my html, have the library and font files in the correct folders, but they are apparently not loading. I tried it with images, too, and the same issue occurs. I've googled my heart out, and can't find anyone else who has had this issue.
Here is the code in my sketch.js file:
var font;
function preload() {
font = loadFont('assets/ATCKrueger-Bold.otf');
}
function setup() {
fill('#ED225D');
textFont(font);
textSize(36);
text('test', 10, 50);
}
My HTML file looks like this:
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
This is what I get when I load the page:
The same thing happens with this code in sketch.js:
var img;
function preload() {
img = loadImage("assets/cat.jpg");
}
function setup() {
image(img, 0, 0);
}
I feel like I must be missing something very obvious, because I just can't figure out this very simple command. Does anyone else have this problem? Can anyone help?
Answers
https://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
https://forum.Processing.org/two/discussions/tagged/--allow-file-access-from-files
Check the first result on: p5js files don't load :P
To be fair there should be a separate FAQ for p5js and ProcessingJS that addresses some of these common issues :(|)
Hit F12 and check the console for error messages to confirm this is a cross-domain problem...
@blindfish, if you look at her browser's screenshot, you'll see the addressbar points to a
file:///
path!That's why I recommend Firefox-based browsers for it.
Or at least use argument "--allow-file-access-from-files" at the shortcut for Chrome-based browsers.
For p5.js: https://GitHub.com/processing/p5.js/wiki/Local-server
For PJS, if we use Processing's IDE in JavaScript Mode, it already creates a local web server and opens up default browser.
Thank you for your replies. Unfortunately, the issue isn't the web browser or that I wasn't opening the file from a server. Here is a screenshot of index.html opened from a server in firefox. Any other ideas?
Is your ".otf" file's path correct? Perhaps you're using some very old p5.js version? :-??
I've got this online example for you to check out: http://gotoloop.GitHub.io/p5.js/
And view source too: view-source:http://gotoloop.GitHub.io/p5.js/
And this very long post: https://forum.Processing.org/two/discussion/11116/loadfont-is-not-defined
Check the console: that will confirm if there is a file load issue going on and from what path it's trying to access the file. It will also display any other relevant error messages. If you see no errors switch to the network tab, reload and confirm your asset is definitely being loaded... In that case there might be a bug somewhere :/