0

I am trying to get all the character codes in a .ttf/.otf file so I can get a random character and display it. I want to create a matrix rain, I found a font file with only the characters used in it only.Here is the link to the font. I am trying to implement it this way: String.toCharCode();

My code so far:

var value = String.fromCharCode(97);
var fontSize = 30;

function setup() {
  createCanvas(500,500);
  textFont('Matrix');
  textSize(fontSize);
}

function draw() {
  ellipse(width/2,height/2,9,9);
  text(value,width/2,height/2);
}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
 <style type = "text/css">
 @font-face {
 font-family: "Matrix";
 src: url(--Link to file--);
 }
</style>

research:

How to set font size and font style

Set custom font to use in javascript

Tudor Popescu
  • 509
  • 1
  • 5
  • 16
  • And what have you tried so far? – Scott Sauyet Nov 29 '18 at 19:46
  • Getting the character codes present in a font will not get you where you want. The font file you linked to has other code points as well - latin letters and a maker's logo. You need to manually pick the character codes you want. – Sami Hult Nov 29 '18 at 19:48
  • @ScottSauyet I have tried using the U+xxxx method but it leaves the square that means the character is unidentifiable. I also tried converting that number into hex, which also didn't work. – Tudor Popescu Nov 29 '18 at 19:49
  • @SamiHult but how do I pick out those character points, I tried using a font viewer, but it doesn't show the code. The maker's logo is not a worry as I can iterate past it. – Tudor Popescu Nov 29 '18 at 19:51
  • First of all, check https://stackoverflow.com/questions/602020/how-to-create-a-string-or-char-from-an-ascii-value-in-javascript Then check again the page linked by you, which clearly enumerates the character codes next to the font glyphs. – Sami Hult Nov 29 '18 at 19:57
  • @SamiHult I tried what you said, it works well but the fonts are overwritten, there is an 'a' under the intended text(ASCII number used is 'a' char code). – Tudor Popescu Nov 29 '18 at 20:08
  • You need to render the text using the given font. – Sami Hult Nov 29 '18 at 20:12
  • @SamiHult I have (using `loadFont(name);`), I set the family name and source in a CSS snippet in html as an error occurred. The text appears, but the default font appears beneath it. – Tudor Popescu Nov 29 '18 at 20:18
  • Please edit your question to include what you have come up with so far, your research and especially *code*. – Sami Hult Nov 29 '18 at 20:20
  • @SamiHult done, I think I missed some research links as I don't remember what I have used and my history log is too big. – Tudor Popescu Nov 29 '18 at 20:28
  • I suggest you try to follow with more precision the code example in the [first link you provided](https://p5js.org/examples/typography-words.html) and, if you get stuck again, place a new question. Follow the [guidelines for writing a good question](https://stackoverflow.com/help/how-to-ask). – Sami Hult Nov 29 '18 at 20:36

1 Answers1

1

Do this offline, don't do this in the browser. The font is going to be the same each time round, so its supported character mappings will be, too.

Run the font through TTX, then get the <cmap> table data, which is the only authority when it comes to which charcodes/code points are supported by a font. It might support multiple charsets: you only care about subtable format 4 (and possibly 12), for platform/id/encoding combination 3/1/0 (which is the platform-agnostic Unicode encoding. It's the only one we care about in 2018)

Then do with that whatever you want, but given JS context you probably want to further massage it to create a sensible JSON format so you can just load that directly using JSON.parse on the javascript side.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153