Why are custom fonts slowing down my program?
So I’m making a project in p5.js which aim to reproduce the Matrix rain code effect.
It ran pretty smooth until I decided to load a custom font.
When I did, my framerate dropped considerably. And it’s the case for every custom font that I try to load (only when I use the loadFont function; if I use textFont and some default font it doesn’t seem to slow down)
Of course, I use the loadFont function in the preload function, and textFont in setup, so I don’t know if this is a known thing ? How could I avoid this ?
Here is a Minimum Viable Example of the problem :
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%"'#&_(),.;:?!\|{}<>^~ "
var font;
var spacing_width = 10;
var spacing_height = 20;
function preload() {
font = loadFont('matrix_font.otf');
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
frameRate(60);
background(0);
textFont(font);
fill(255)
}
var lastUpdate;
function draw()
{
background(0);
var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
lastUpdate = new Date().getTime();
for(var i = 0; i < 40; i++)
for(var j = 0; j < 40; j++)
text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}
This code prints in the console values around 40-50ms, but when I comment out the line textFont(font); the values are around 10-20ms
I'm using this font but I have the problem with every font that I try to load
javascript fonts p5.js
add a comment |
So I’m making a project in p5.js which aim to reproduce the Matrix rain code effect.
It ran pretty smooth until I decided to load a custom font.
When I did, my framerate dropped considerably. And it’s the case for every custom font that I try to load (only when I use the loadFont function; if I use textFont and some default font it doesn’t seem to slow down)
Of course, I use the loadFont function in the preload function, and textFont in setup, so I don’t know if this is a known thing ? How could I avoid this ?
Here is a Minimum Viable Example of the problem :
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%"'#&_(),.;:?!\|{}<>^~ "
var font;
var spacing_width = 10;
var spacing_height = 20;
function preload() {
font = loadFont('matrix_font.otf');
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
frameRate(60);
background(0);
textFont(font);
fill(255)
}
var lastUpdate;
function draw()
{
background(0);
var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
lastUpdate = new Date().getTime();
for(var i = 0; i < 40; i++)
for(var j = 0; j < 40; j++)
text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}
This code prints in the console values around 40-50ms, but when I comment out the line textFont(font); the values are around 10-20ms
I'm using this font but I have the problem with every font that I try to load
javascript fonts p5.js
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14
add a comment |
So I’m making a project in p5.js which aim to reproduce the Matrix rain code effect.
It ran pretty smooth until I decided to load a custom font.
When I did, my framerate dropped considerably. And it’s the case for every custom font that I try to load (only when I use the loadFont function; if I use textFont and some default font it doesn’t seem to slow down)
Of course, I use the loadFont function in the preload function, and textFont in setup, so I don’t know if this is a known thing ? How could I avoid this ?
Here is a Minimum Viable Example of the problem :
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%"'#&_(),.;:?!\|{}<>^~ "
var font;
var spacing_width = 10;
var spacing_height = 20;
function preload() {
font = loadFont('matrix_font.otf');
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
frameRate(60);
background(0);
textFont(font);
fill(255)
}
var lastUpdate;
function draw()
{
background(0);
var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
lastUpdate = new Date().getTime();
for(var i = 0; i < 40; i++)
for(var j = 0; j < 40; j++)
text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}
This code prints in the console values around 40-50ms, but when I comment out the line textFont(font); the values are around 10-20ms
I'm using this font but I have the problem with every font that I try to load
javascript fonts p5.js
So I’m making a project in p5.js which aim to reproduce the Matrix rain code effect.
It ran pretty smooth until I decided to load a custom font.
When I did, my framerate dropped considerably. And it’s the case for every custom font that I try to load (only when I use the loadFont function; if I use textFont and some default font it doesn’t seem to slow down)
Of course, I use the loadFont function in the preload function, and textFont in setup, so I don’t know if this is a known thing ? How could I avoid this ?
Here is a Minimum Viable Example of the problem :
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%"'#&_(),.;:?!\|{}<>^~ "
var font;
var spacing_width = 10;
var spacing_height = 20;
function preload() {
font = loadFont('matrix_font.otf');
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
frameRate(60);
background(0);
textFont(font);
fill(255)
}
var lastUpdate;
function draw()
{
background(0);
var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
lastUpdate = new Date().getTime();
for(var i = 0; i < 40; i++)
for(var j = 0; j < 40; j++)
text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}
This code prints in the console values around 40-50ms, but when I comment out the line textFont(font); the values are around 10-20ms
I'm using this font but I have the problem with every font that I try to load
javascript fonts p5.js
javascript fonts p5.js
asked Jan 2 at 17:20
DrakalexDrakalex
66121027
66121027
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14
add a comment |
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14
add a comment |
1 Answer
1
active
oldest
votes
See https://github.com/processing/p5.js/issues/3435 for a discussion of this issue
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010559%2fwhy-are-custom-fonts-slowing-down-my-program%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
See https://github.com/processing/p5.js/issues/3435 for a discussion of this issue
add a comment |
See https://github.com/processing/p5.js/issues/3435 for a discussion of this issue
add a comment |
See https://github.com/processing/p5.js/issues/3435 for a discussion of this issue
See https://github.com/processing/p5.js/issues/3435 for a discussion of this issue
answered Jan 3 at 10:00
rednoyzrednoyz
873620
873620
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010559%2fwhy-are-custom-fonts-slowing-down-my-program%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please link between crossposts. This question has also been posted here: discourse.processing.org/t/custom-fonts-slowing-down-my-program/…
– Kevin Workman
Jan 2 at 17:21
Oh I didn't know I could do that
– Drakalex
Jan 3 at 10:14