We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi All!
Working on a project with the great p5js javascript lib and running into an issue using loadFont. When trying to use loadFont in preload() I get a "RefrenceError: loadFont is not defined" I see it in the github repo, however the versions from the cdn and bower give the ref error. I tried downloading manually from github (just the p5js file), but then I get "RangeError: argument 1 accesses an index that is out of range"
Here's a demo of what I'm trying to do:
var Helv;
function preload() {
Helv = loadFont("HelveticaNeueLTStdCn.otf");
}
function setup() {
textFont(Helv);
text("it's helvetica!", 100, 100);
}
What am I missing?
Answers
Strange... it seems to be working in those examples from loadFont()'s reference: :|
http://p5js.org/reference/#/p5/loadFont
Hey Goto
Those don't seem to be working for me either. It's not able to even find the font file, I get "5273: Uncaught Error: Font could not be loaded: Not Found"
which is better than the not defined error, but still frustrating
Those examples work for me in the browser!
Better check which p5.js version you're using b/c those from the site uses latest 1!
http://p5js.org/reference/#/p5/loadFont
Tested in these 3 browsers here (Win8.1 64-bit):
aah, yes, they do work in the browser, sorry I misunderstood. I tried them in the desktop editor and got that error.
I've got 0.4.5 and doing a search in the source there is no "loadFont". I downloaded that through Bower though, so maybe there is something off with their links.
When I download the lib from github, it has the "loadFont" method, but then I get a different error: RangeError: argument 1 accesses an index that is out of range
I tried the CDN too and get the same "loadFont is not defined" error.
very strange....
load lōd/Submit noun 1. a heavy or bulky thing that is being carried or is about to be carried.
font1 fänt/Submit noun 1. a receptacle in a church for the water used in baptism, typically a freestanding stone structure.
Hope this helps :)
Get it from here: http://p5js.org/download/
Or here: https://cdnjs.com/libraries/p5.js
har har har... yeah.
On thing I just thought is I'm trying to run the files locally, do these need to be on a server?
@GoToLoop yep, tried both of those. Neither can find the loadFont method
Nowadays, only Firefox browser family would accept such operations while running w/o some server.
indeed firefox is my dev browser, but chrome can't find the loadFont method either.
Ok i got it. It was a few things going wrong creating the perfect storm of issues.
Any thoughts on why loadfont would be missing from some places but not others?
Thanks for the help GoTo loop! (no thanks to Xxpr0sesserg0dxX :P )
One final issue here, once it's loading, I get a warning:
"> p5.js says: textFont was expecting a string for parameter #1, received [object Object] instead. textFont takes different numbers of parameters depending on what you want to do. Click this link to learn more:"
However the reference shows that an object is allowed with no additional parameters. any way to silence the warning at least?
I see no mention of loadFont in the p5 source code so I'd guess it hasn't been implemented/finished yet :(
Found out the mysterious problem. There are 2 versions 0.4.5! @-)
1 from May/27th & another "privileged & hidden" 1 from May/29th.
Apparently, the May/29th version is only available from: http://p5js.org/js/p5.min.js
That's why the examples from: http://p5js.org/reference/#/p5/loadFont work alright!
While we try in vain to force "official" May/27th to do the same! X(
Anyways, here's some test version I've made from Firefox Development Edition's WebIDE:
https://www.mozilla.org/en-US/firefox/developer/
"index.html":
"loadfont.js":
@gotoloop Excellent! I thought I was going crazy!
It looks like the May 29 version is packaged with the p5* ide. Do you get the textFont expecting a string error I mentioned above?
Thanks!
I've got loadFont() isn't a
function
until I've changed to: http://p5js.org/js/p5.min.jsThe "HelveticaNeueLTStd-Cn.otf" I've got it after a search... :P
Hello,
I'm also getting an error for loadFont. Is it something that isn't quite integrated into the latest version of P5.js?
The name of the font is copied and pasted from the file in the data folder.
console error: Uncaught ReferenceError: loadFont is not defined
Code ------->
*/
@LadyK: http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
@GoToLoop Cheers! I was just looking for that link.
I've got a bug in here somewhere, and I can't seem to find it. :-??
Modified "loadfont.js" to use "NexaRustHandmade-Extended.otf" and hosted it here:
http://GoToLoop.GitHub.io/p5.js/
@LadyK: Are you using the latest p5.js? What browser are you using and how are you testing? Local files, a testing server or online? With local files I'd expect browser security to block the attempt to load the font file (this is a FAQ)... Except in Firefox dev - which is probably what @GoToLoop is using as he often reminds us :P
Indeed even w/ --allow-file-access-from-files param active for my Chrome-based browser (SlimJet 64):
"C:\Program Files\Slimjet\slimjet.exe" --allow-file-access-from-files
The local font is being refused to load. Although other resources like images & scripts still work. 8-}
And even though Firefox Development Edition is more appropriate for such web tasks, take notice that any Firefox-based browser can pull that out: \m/
Waterfox, Cyberfox, PaleMoon, Iceweasel, K-Meleon, Nightingale, etc.
BtW, I have to confess I had some trouble learning git commands in order to upload & commit an ".otf" font file to the "web host" repository: http://GoToLoop.GitHub.io/p5.js/ B-)
@blindfish - yes, I'm using the latest version of p5.js. I've been working in FireFox and FireFox Development Edition, all working locally. The issue tends to happen intermittently.
@GoToLoop - Thanks so much for the effort here. I do appreciate it! :)>- But, let me make sure I understand how to resolve the problem. In a nutshell, I've got to put everything up online, in order to work around browser security blocks. Am I understanding that correctly?
I'm teaching a group of students. My goal is getting them up and running as quickly as possible. It seems that the P5 IDE may be the best bet. But I welcome other tips and suggestions.
"index.html":
P.S.: <title></title> isn't that necessary. Just <meta charset=utf8> and the <script> tags. :-B
I've also heard adding in this <meta> tag below can make mobile canvas run much faster: ^#(^
<meta name=viewport content=width=device-width,user-scalable=no,initial-scale=1>
We can also post p5.js (and also PJS Mode) sketches in this site: :bz
http://p5js.SketchPad.cc/
Though I'm still waiting for them some months now to upgrade p5.js to anything higher than 0.4.5. :-@
Ah, almost forgot it: Shiffman's p5.js videos: L-)
https://Vimeo.com/channels/learningp5js
@LadyK: AFAIK the p5 IDE is currently Mac only. For beginners who don't have that luxury, or those who prefer Windoze/Linux I'd recommend Brackets. See my post on alternatives to sublime text. The built-in test server avoids domain security issues with local files and the on the fly update is really cool if you're also teaching HTML & CSS.
Sorry: looks like the Windoze version of the IDE is available now! Both versions are still beta though, so I'd test it for suitability first.
Hello,
Thanks @GoToLoop for the step by step. Sketch pad is a good idea and Shiffman's videos are the best. /:)
I've isolated the issue (and attributed the intermittent issue) of text to either not appear correctly (not using the font) and the error: Uncaught ReferenceError: loadFont is not defined to calling P5 from
< script src="http://cdn.jsdelivr.net/p5.js/0.3.16/p5.min.js">
versus
script language="javascript" type="text/javascript" >
Perhaps something is up with the version of P5 at http://cdn.jsdelivr.net/p5.js/0.3.16/p5.min.js :-?
Yet, I do get an error with the following code. The error varies on where I'm calling P5 from.
Here's my directory path. I'm still searching for this :bz . Getting closer!
@LadyK said:
If you read through this thread carefully you'll see that loadFont wasn't working until 0.4.5, and even then only after a glitch in the code released was fixed. It looks like the version you're try to pull from cdn.jsdelivr.net is 0.3.16. That's from January!
You said:
[-X [-X [-X
On a project this young 0.3.16 is aeons ago in the development process. Not surprisingly if you search for loadfont you won't find it in that version... Try using the latest release:
http://cdn.jsdelivr.net/p5.js/0.4.15/p5.min.js
Besides http://cdn.JSdelivr.net/p5.js/0.4.15/p5.min.js, there's also:
http://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.4.15/p5.min.js
But my favorite is the 1 I've used in my template example: http://p5js.org/js/p5.min.js
B/c it always points to the latest release and it's a fixed URL path! \m/
So you should consider using my "index.html" template for p5.js!
The less to type in and memorize, the quicker and happier the result! :-bd
Let's say you've got the p5.js script in a separate ".js" file. For example "script.js".
And also the "p5.js" lib file is inside subfolder "libraries/".
Then the previous template would be like this now:
See? "index.html" is only 3 statements now! Much shorter & quicker too! *-:)
Thanks @Blindfish! I appreciate you point those things out. I missed that. Same to you, @GoToLoop for the brevity. Thanks all!