Custom fonts slowing down my program

p5.js Coding Questions
1

Hello everyone,

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 ?

Thanks !

1 Like
2

I can’t think of a reason on why it would slow down. Could you please provide MVE(Minimum Viable Example) of the slow-down? Some code?

3

For instance 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

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")
  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)
}
4

Please link between crossposts. This question has also been posted here:

1 Like
5

The stackoverflow also links to this p5.js github issue, which profiles the problem: