def setup (): font = createFont ("Numbers.ttf", width / 62)

def draw (): textFont (font, width / 62)

However, this gives me an error saying that font is not defined. I assumed that I couldn't use font outside of setup, so I tried putting "font = None" at the beginning, so that it would be a global variable, but then it just says that a null font was passed to textFont. I also can't put "font = createFont ("Numbers.ttf", width / 62)" at the beginning, because it must be in setup, and putting textFont in setup doesn't seem to work either. What am I doing wrong?

So now that I figured out why it wouldn't work, does anyone have any ideas on how to use this font AND Syphon? Or why this font won't render the emojis in P3D?

Kf

This is the link I got the code from (http://learningprocessing.com/examples/chp17/example-17-06-textbreakingup) Here's the code:

// Example 17-6: Text breaking up 

PFont f;
String message = "click mouse to shake it up";

// An array of Letter objects
Letter[] letters;

void setup() {
  size(480, 270);

  // Load the font
  f = createFont("Arial", 20);
  textFont(f);

  // Create the array the same size as the String
  letters = new Letter[message.length()];

  // Initialize Letters at the correct x location
  int x = 125;
  for (int i = 0; i < message.length (); i ++ ) {
    // Letter objects are initialized with their location within the String as well as what character they should display.
    letters[i] = new Letter(x, 140, message.charAt(i)); 
    x += textWidth(message.charAt(i));
  }
}

void draw() {
  background(255);
  for (int i = 0; i < letters.length; i ++ ) {

    // Display all letters
    letters[i].display();

    // If the mouse is pressed the letters shake
    // If not, they return to their original location
    if (mousePressed) {
      letters[i].shake();
    } else {
      letters[i].home();
    }
  }
}

// A class to describe a single Letter
class Letter {
  char letter;

  // The object knows its original " home " location
  float homex,homey;

  // As well as its current location
  float x,y;

  Letter(float x_, float y_, char letter_) {
    homex = x = x_;
    homey = y = y_;
    letter = letter_;
  }

  // Display the letter
  void display() {
    fill(0);
    textAlign(LEFT);
    text(letter,x,y);
  }

  // Move the letter randomly
  void shake() {
    x += random(-2,2);
    y += random(-2,2);
  }

  // At any point, the current location can be set back to the home location by calling the home() function.
  void home() { 
    x = homex;
    y = homey;
  }
}

I found a very uselful program to justify text as I wanted here : https://forum.processing.org/one/topic/writing-text-without-line-word-breaks.html. The code is in Java (processing) thanks to @calsign.

It is in perfect java, I need to translate into javascript with p5.js. I use this resource that helps me a lot.

I cannot figure out the good way to write it in Javascript, especially with the array (the var tokens for instance) I put modification I am not sure in bold (or with ** and **).

I think I am close but I miss something. Thank you in advance.

_Here is my attempt: _

            // justify one line of text
            function linejustify(s, x, y, w) {

              // how long is the text?
              var tw = textWidth(s);

              // is it longer than expected width? if so, return
              if (tw > w) {
                print("Text is too long.");
                return;
              }

              // does it match perfectly? if so, print it
              if (tw == w) {
                text(s, x, y);
                return;
              }

              // if not, how much pixels shall we add to reach expected length?
              var gap = w - tw;

              // split the text into words
            **  var tokens = split(s, " "); **

              // is there only one word - or no word at all? if so, print it
              if (tokens.length <= 1) {
                text(s, x, y);
                return;
              }
              // otherwise,
              // we will distribute the missing pixels after each word, in the spaces
              var spaces = tokens.length - 1;

            **  var pixelsToAddAfterToken = new [tokens.length];
              //int[] pixelsToAddAfterToken = new int[tokens.length];   ** 

            for (var i = 0; i < spaces; i++) {
                pixelsToAddAfterToken[i] = floor(gap/spaces);
                if (i <= gap%spaces) pixelsToAddAfterToken[i]++;
              }

              for (var i = 0; i < tokens.length; i++) {
                text(tokens[i], x, y);
                x += textWidth(tokens[i]) + textWidth(" ") + pixelsToAddAfterToken[i];
              }
            }

            //All should be self-explanatory except leading...
            //leading is how much room should be in-between each line of text.

            function textJustify(input, x, y, w, leading) {
              push();

              ** var seperatedStrings = [0]; **
              var lastSeperation = 0;

              for(var i = 0; i < input.length(); i ++) {
                if(textWidth(input.substring(0, i - lastSeperation)) > w * .99) {
                  seperatedStrings = append(seperatedStrings, input.substring(lastSeperation, i));
                  lastSeperation = i;
                }

              }

              if(lastSeperation < input.length()) seperatedStrings = append(seperatedStrings, input.substring(lastSeperation, input.length()));


              for(var i = 0; i < seperatedStrings.length; i ++) {
                linejustify(seperatedStrings[i], x, y + leading * i, w);
              }


              pop();
            }


            function setup() {
              size(250, 150);
              background(255);
              fill(0);
              textFont(createFont("", 12), 12);
              textJustify("This text should be perfectly justified. Even with two lines! You can add more text... And it still works, as far as I can tell.", 0, 40, width, 14);

            }

Main Tab //Gwendolyn Leister - Pong Game

GamePiece Paddle;
GamePiece Ball;

boolean gameStart = false;
boolean restart = false;
boolean endgame = false;
//Declare Fonts
PFont myFont;
PFont myFont2;

//for Ball 
int rad = 15;
float xPos=width/2;
float yPos=height/2;
float Speed = 3;

int xDirection = 1;
int yDirection = 1;
int SPD = 5;

int score = 0;


final GamePiece ball = new Ball();

final GamePiece paddle = new Paddle();

void setup () {
  size(800, 800);
  smooth();
  background(0);
  myFont = loadFont("AnonymousPro-30.vlw");
  myFont2 = loadFont("AnonymousPro-80.vlw");
  Ball = new Ball();
}

void draw() {
  //table


  background (0);

  //Layout
  fill(#CBFEFF);
  noStroke();
  rect(0, 640, 800, 260);
  stroke(255);
  fill(#CBFEFF);
  strokeWeight(10);
  line(0, 640, 800, 640);
  fill(#EAFFFF);
  rect(200, 700, 400, 160);
  //text

  //score text
  textFont(myFont);
  textAlign(RIGHT);
  textSize(20);
  text("Score:", 70, 25);

  Ball.display();
  //Paddle.display();

  if (gameStart) {
    Ball.move();
    Ball.bounce();
    //Paddle.move();
  } else {
    textAlign(CENTER);
    textFont(myFont2);
    textSize(80);
    text("P O N G", 400, 100);
    textSize(20);
    text("press enter to start", 400, 600);
    text("move mouse horizontally to control the", 400, 140);
    text("paddle and to bounce the ball off of", 400, 162);
  }
  //if (keyPressed) {
  //  restart = !restart;
  //}
}

//if (Ball.checkScore) {
//  score = score+1;
//  textSize(20);
//  textAlign(LEFT);
//  text("

void checkScore() {
  if (yPos>700) {
    score=score+1;
  } else if (yPos>750) {
    score=score-1;
  }
}

void keyPressed() {
  if (keyCode == ENTER){
    gameStart = !gameStart;
  }
  else{

  }
}

Paddle SubClass class Paddle extends GamePiece {

  boolean mouseMoved;
  boolean overPaddle = false;
  boolean locked = false;
  float xOffset = 0.0;
  float yOffset = 0.0;
  int px;
  int py;
  int pw=100;
  int ph=30;
  int pSpeed= 5;


  //float xPos = mouseX;
  //float yPos = 680;
  //int x;
  //int y;
  //int w=20;
  //int h=80;
  //Paddle (int tx,int ty) {
  //  x=tx;
  //  y=ty;
  //}



  Paddle () {
    super();
  }

  void display() {
    rectMode(CENTER);
    fill(#CBFEFF);
    stroke(255);
    strokeWeight(10);
    //rect(this.xPos, this.yPos, 50, 20);
  }
  //void mouseMove() {
  //  if (x==1) {
  //    py = py +- pSpeed;
  //  } else if (x == 0);
  //}
  void move () {

    if (mouseX > px-(pw*ph) && mouseX < px+(pw*ph) && 
      mouseY > py-(pw*ph) && mouseY<py+(pw*ph)) {
      overPaddle=true;
      if (!locked) {
        stroke(255);
        fill(255);
      } else {
        fill(#CBFEFF);
        stroke(255);
        strokeWeight(10);
      }
      rect(px, py, pw, ph);
    }
  }
  void mousePressed() {
    if (overPaddle) {
      locked = true;
      fill (#CBFEFF);
    } else {
      locked = false;
    }
    xOffset =mouseX-px;
  }
  void bounce() {
  }
}

and GamePiece Superclass

abstract class GamePiece {
  float x, y, w, h, vx, vy, dx, dy;
  abstract void move(); 
  abstract void display();
  abstract void bounce();
}

data in the text file

Ahoj

Hello

Zbohom

Goodbye

Ako sa máš

How are you

Ako sa voláš

What is your name

the only time it has worked when i tried (but not with the typeface i need) it is when i set it to textFont('Courier') in draw(). i've tried to load another .ttf file to see if the font itself was the problem, but the replacement one didn't work either. the font i'm trying to load is this one.

you can find my sketch here. it takes a little bit of time to load. i would post the code here, too but there are a dozen files needed to play it locally, so i think it's better if i don't. if you need more information, let me know.

thanks in advance.

<!DOCTYPE HTML>
<html>
  <head>
     <script src="/js/processing.js"></script>
  </head>
  <body>


<input type="button" value="imagen" id="clear" onclick="canvas()">

<canvas id="mycanvas"></canvas>



<script type="text/processing" data-processing-target="mycanvas">




function canvas() {

void setup()
{
  size(200,200);
  background(0);
  fill(200);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello!",20,20);

}

}


</script>


  </body>
</html>      

On the other hand, this code works well:

<!DOCTYPE HTML>
    <html>
      <head>
         <script src="/js/processing.js"></script>
      </head>
      <body>



<canvas id="mycanvas"></canvas>



<script type="text/processing" data-processing-target="mycanvas">






void setup()
{
  size(300,300);
  background(0);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello!",20,20);
      }




</script>


  </body>
</html>      

Thanks in advance

size(800,800);
PFont comicsans = loadFont("ComicSansMS-48.vlw");
fill(0);
textFont(comicsans, 48);
textAlign(CENTER,CENTER);
text("m_a_n", 400, 400);

Processing 2 has no issues with PGraphics.textFont( PFont ) to set the font of a PGraphics object. Processing 3 throws a generic "NULL ptr exception" ( mind you neither the pg object nor the myfont object are null and the ttf font is correctly loaded from the data directory as it works perfectly in the main frame ( line 8 simply works ) ).

Am I missing some sort of initialization for my pg object? the textfont memeber of PGraphics is set to null and pg.textFont = myfont; creates more issues than it solves.

If you want to test this code simply use any ttf font place it in the data directory and change myfont = createFont("small_pixel.ttf", 10); from "small_pixel.ttf" to your file name.

PGraphics pg;
PFont myfont;

void setup() {
  size(640, 360);
  pg = createGraphics(400, 200);
  myfont = createFont("small_pixel.ttf", 10);
  textFont(myfont);
  // The next line is the issue
  pg.textFont(myfont);

}

void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  text("Hello main frame", 20, 20);
  pg.beginDraw();
  pg.background(150,150,150);
  pg.fill(255,255,255);
  pg.textSize(12);
  pg.text("Hello pGraphics", pg.width/2, pg.height/2);
  pg.textAlign(CENTER,CENTER);
  pg.noFill();
  pg.stroke(255);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}

function preload() { img = loadImage("bubbleimg.png")

} function setup() { createCanvas(600,620)

}

function draw() { image(img,0,0)

img.resize(600,620)

stroke(0) strokeWeight(4); textFont("stencil") fill(255); textSize(46); text(header[0],46,59);

ellipseMode(CENTER); stroke(5,0,0) fill(55,120,260) strokeWeight(5);

var space = dist(mouseX, mouseY,296,194) if (space<100 ) { buttonhover = true;} else { buttonhover = false; }

if (buttonhover === true) {
  fill(0,255,0);}

ellipse(300,200,200,200);
stroke(0)
  textFont("stencil")

strokeWeight(4); fill(255); textSize(45); text(buttontext[0],230,211);

draw2()

}

function draw2() {

ellipseMode(CENTER); stroke(5,0,0) fill(55,120,260) strokeWeight(5);

var space = dist(mouseX, mouseY,296,450) if (space<100 ) { buttonhover2 = true;} else { buttonhover2 = false; }

if (buttonhover2 === true) {
  fill(255,0,0);
}

ellipse(300,450,200,200);

stroke(0)
  textFont("stencil")

strokeWeight(4); fill(255); textSize(45); text(buttontext[1],244,464);

}

function mousePressed() { if (buttonhover == true) { draw3() }

}

function draw3 () { remove() }

After some exploring, I found out that the problem only appears when using TrueType fonts. When using the default font or and OpenType font, accents are displayed correctly.

Does anybody know if there's a solution or workaround for this? I don't have OTF versions of the fonts I need for my project.

Here is some demo code

var FONT_TTF;
var FONT_OTF;

function preload() {
  FONT_TTF = loadFont("Arial.ttf");
  FONT_OTF = loadFont("TektonPro-Bold.otf");
}

function setup() {
  createCanvas(200, 100);
  fill(0);
  textFont(FONT_OTF);
  //textFont(FONT_TTF);
  text("Accents test: á é í ó ú ñ ", 50, 50);
}

Thanks!

function preLoad() { myFont = loadFont('assets/DroidSansMono.ttf'); }

function setup() { textFont(myFont); }

why does this give me the following error: "25722: Uncaught Error: null font passed to textFont"?

PFont f;

//Database variables String[] lines; int index = 0;

void setup() { size(800, 800, P3D); noStroke(); frameRate(30); f = createFont("AmericanTypewriter", 16, true);

lines = loadStrings("OBLQ.txt");

}

void draw() { background(230);

//Database if (index < lines.length) { String[] pieces = split(lines[index], " "); if (pieces.length == 2) { int x = int(pieces[' ']) ; int y = int(pieces[1]) ;

println(x); index = index + 1;

//HERE IS WHERE I WOULD LIKE TO INSERT THE TEXT();

} } //Loop database if(index > 20) { index = 0;

} }

I am using the next code to have a Font List. It works perfectly. But i want to replace the ''random(0, 2)" by the sequence of the font list. So, i want that the font is not anymore random. Do someone know how i can fix this?

Greetings

PFont afont, bfont, cfont;

String[]mainfont = {"afont", "bfont", "cfont"};

void setup() { size(200,200);

afont = createFont("FreeMono", 1); bfont = createFont("Kinnari-Italic", 1); cfont = createFont("Norasi", 1);

}

void draw(){

float x = random(0,2); int y = int (x);

textFont(mainfont[y]);

// GET THE MESSAGE: method textFont(PFont) in the type PApplet is // not applicable for the arguments (String)

text("I want to get here everytime another FONTtype", 50, 50); }

In android when you use a text font fail all transparencies of the images and the screen becomes corrupted, you can not use text in android? a temporary solution for working with text in android?

Here is my Code:

    PImage pic;
    PFont font;
    PGraphics pg;
    PGraphics manyC,finalSave;
    String[] words={"hello","world","hello","world","hello","world","hello","world","hello","world","hello","world"};
    PGraphics[] wordPic;


    void setup(){
      size(1800,1800);
      pic=loadImage("1.png");
      pic.filter(THRESHOLD,0.9);
      pic.resize(1800,0);
      pic.save("D://sample.png");


      font=createFont("微软雅黑",240);
      textFont(font);
      float strHt=textAscent()+textDescent();
      manyC      = createGraphics(pic.width,pic.height);
      finalSave  = createGraphics(pic.width,pic.height);
      //finalSave.smooth();

      wordPic=new PGraphics[words.length];
      int[] w =  new int[16];
      w[0] = 400;
      w[1] = 400;
      w[2] = 400;
      w[3] = 400;
      w[4] = 400;
      w[5] = 400;
      w[6] = 400;
      w[7] = 400;
      w[8] = 400;
      w[9] = 400;
      w[10] = 400;
      w[11] = 400;
      w[12] = 400;
      w[13] = 400;

      for(int i=0;i<wordPic.length;i++){

        int wid = (int)textWidth(words[i]);
        println(wid);
        wordPic[i] = createGraphics(w[i],400);
        wordPic[i].beginDraw();
        wordPic[i].background(255);
        wordPic[i].textFont(font);
        wordPic[i].textAlign(LEFT,TOP);
        wordPic[i].fill(color(0,0,0));
        wordPic[i].text(words[i],0,0);
        wordPic[i].endDraw();

        if(wordPic[i].width>=width){
          wordPic[i].resize(width,0);
        }
      }


      for(int i=0; i<wordPic.length;i++){
        wordPic[i].save("D://wordpic"+i+".jpg");
      }
      println("over");
    }

the output is like that:

so far so good. However, if I adjust the value of w[], which changes the width value when calling the function createGraphics(), the unexpected result comes out!

All I did was changing some values of w[], like 800,1200.

well, I'm confused.

I'm trying to adjust the graphics width, like this: wordPic[i] = createGraphics((int)textWidth(words[i]),(int)strHt); so I can handle them as small objects of the text Cloud.

And clearly, the results are not good enough.

So, is there anyone could help me about this problem? tell me why this will happen, or how can I leave this problem alone and go ahead for my work?

            PFont f;
            String s = "This has gone too far";
            int x = 30;
            int howBig = 20;
            Letter [] letters;



            void setup() {
              size (400, 200);
              frameRate(25);
              smooth();
              f = createFont("DINTBlack",20);
              textFont(f);
              letters = new Letter[s.length()];

              for (int i = 0; i<s.length(); i++) {
                char c = s.charAt(i);
                letters[i] = new Letter(x, height/2, c);
                x+=textWidth(c);

                //println(letters);
              }
            }

            void draw() {
              background(127);
              for (int i = 0; i<letters.length; i++) {
                letters[i].display();
                if (mouseX>x) {
                  letters[i].ascend();
                }
                if (mousePressed) {
                  letters[i].home();
                }
              }
            }

        class Letter {
          int x, y;
          int homeX, homeY;
          char c;
          Letter(int x_, int y_, char c_) {
            x=homeX=x_;
            y=homeY=y_;
            c=c_;
          }
          void display(){
            text(c,x,y);
          }
          void ascend(){
            if(y>0){
            y-=random(2,4);

            }else{
              y= homeY;
            }

          }
          void home(){
            x = homeX;
            y = homeY;
          }
        }


            //println(PFont.list());

here is the code: PFont myFont; //myFont als PFont deklarieren String typedWord = "";//String deklarieren

void setup() { 
  size(displayWidth, displayHeight);//grösse des Sketchfensters

    myFont = createFont("CENTURY.ttf", 100);//kreiere PFont als myFont
    //myFont = createFont("AAA.ttf", 100);//kreiere PFont als myFont


  textFont(myFont);  //benutze myFont als TextFont

  fill(255);//Füllfarbe der Schrift
}

void draw() {
  background(0);//Hintergrundfarbe
  text(typedWord, displayWidth/16, displayHeight/16*3);//Stringwahl und Anfangsposition  
}

void keyPressed() {
  println(key); //schreibe den aktuellst getippten Buchstaben in die Konsole
  if (key!=1) {
    if (keyCode == BACKSPACE) { //Anweisung um einen Buchstaben aus dem String löschen zu können
  if (typedWord.length() > 0) {
    typedWord = typedWord.substring(0, typedWord.length()-1); //erases the last character
  }
    }
    else { //Anweisung den getippten Buchstaben zum String zu addieren
  typedWord += key; 
    }
  }

}

ive written a writing programm using geomerative library. now i got 2 problems to solve.

• i want to make the fontsize dynamically fitting into the the given window depending on the string length. (here is an example video on youtube: )

• i want to make a linebreak by pressing return/enter. what is the best way to do that?

here is the code:

import geomerative.*;
import processing.pdf.*;
boolean doSave = false;

RFont font;
RPoint[] myPoints; 
String myText = "";
RGroup myGroup;
int textsite;
//----------------SETUP---------------------------------
void setup() {
  size(800,300);
  background(255);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf",100, CENTER);
}

//----------------DRAW---------------------------------
void draw() {

  background(0);
  stroke(#00FFE8);
  noFill();
  translate(width/2, height/1.7);

  RCommand.setSegmentLength(1);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  if (myText.length() > 0) {
    RGroup myGroup = font.toGroup(myText); 
    myGroup = myGroup.toPolygonGroup();
    RPoint[] myPoints = myGroup.getPoints();

    beginShape();
    for(int i=0; i<myPoints.length; i++) {
      ellipse(myPoints[i].x, myPoints[i].y,1,1);
      //curveVertex(myPoints[i].x, myPoints[i].y);
    }
    endShape();

    // ------ SAVING  ------ 
    if (doSave) {
      doSave = true;
      endRecord();

      println("gespeichert");
    }
  }
}

//----------------KEYS---------------------------------
void keyReleased() {
  if (keyCode == CONTROL) doSave = true;
}

void keyPressed() {
  if(key !=CODED) {
    switch(key) {
    case DELETE:
    case BACKSPACE:
      myText = myText.substring(0,max(0,myText.length()-1));
      break;
    case ENTER:

      break;
    default:
      myText +=key;
    }
  }
}

However, since re-writing, my font, size, boldness etc won't change!

In my non-PGraphics code, I used

font = createFont("CourierNewPS-BoldMT-48", 44, true);

However, in my new code, it doesn't seem to use the values that 'font' has.

My new code is (sorry for the length - I have no idea where the font code should be)

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;
// import necessary libraries to play sound effect
String[] tickerText =
{
  "children were some of the greatest victims", "I was a child soldier", 
// ....
};

Minim minim;
AudioPlayer sound1; // variable name
AudioPlayer sound2;
PGraphics pg;
PFont font; //declare PFont object called font
PImage background; 
float x; // location of text on x axis
int index = 0;


void setup() {

  size(615, 762, P2D);

  font = createFont("CourierNewPS-BoldMT-48", 44, true);
  background = loadImage ("background_Text_Image.JPG"); // load background image
  minim = new Minim(this); //define construction
  sound1 = minim.loadFile("Children_Playing_Sound.mp3");
  sound1.loop(); // is looped

  pg = createGraphics(width, height, P2D);
  pg.beginDraw();
  pg.background(background); // draw background as imported image
  pg.endDraw(); 

  font = createFont("CourierNewPS-BoldMT-48", 44, true);

  x = 0; // the int x is used as the entry point for the text scrolling in
}

void draw() {
  if (mousePressed) { //function activated by mouse
    pg.beginDraw();
    pg.line(mouseX, mouseY, pmouseX, pmouseY);
    pg.stroke(random(255), random(255), random(255)); // stroke changed to random RBG values, each with a max of 255
    pg.strokeWeight (random(4, 8)); // random stroke weight, with a min of 4 and max of 8 pixels
    pg.endDraw();
  }
  background( pg.get() );
  textFont(font);  
  fill(255,0,0); //sets colour of font, red
  text(tickerText[index], x, height/2); //location of text on x axis - in this case mid-way


  x = x - 1; 
  float w = textWidth(tickerText[index]); // calculates the width of the text string - necessary for knowing when the text leaves the screen
  if (x < -w) { // when x moves completely off the screen new text appears
    x = width; 
    index = (index + 1) % tickerText.length;

   }
}

Thank you in advance

I am working with a PGraphics item to display an information panel on screen, but can't get it to display text. The code is below.

As it stands currently there is a runtime Null Pointer Exception at the point shown below.

If I take all of the font references out, I get no runtime errirs, but only the rectangle is displayed, not the text.

Can anyone point out what I'm overlooking here please?

Thanks.

final int TEST_TEXT_X1=12;
final int TEST_TEXT_X2=80;
final int TEST_BOX_X=10;
final int TEST_BOX_Y=320;
final int TEST_BOX_HEIGHT=79;
final int TEST_BOX_WIDTH=100;
final int TEST_TEXT_GAP=17;
final int TEST_DATA_Y1=TEST_BOX_Y+15;
final int TEST_DATA_Y2=TEST_DATA_Y1+TEST_TEXT_GAP;
final int TEST_DATA_Y3=TEST_DATA_Y2+TEST_TEXT_GAP;
final int TEST_DATA_Y4=TEST_DATA_Y3+TEST_TEXT_GAP;
final int TEST_DATA_Y5=TEST_DATA_Y4+TEST_TEXT_GAP;
final int TEST_CLEAR_X=40;
final int TEST_CLEAR_Y=TEST_BOX_Y+2;
final int TEST_CLEAR_HEIGHT=50;
final int TEST_CLEAR_WIDTH=90;
//
PGraphics testPanel; // panel to display test information
//
void setup() {
  colorMode(RGB);
  size(1400, 500);
  background(255,255,255);  
  // If I remove the font stuff from here.....
  PFont font;
  font=loadFont("Calibri-20.vlw");
  testPanel.textFont(font,12);  // ********* Null Pointer Exception here ********
  // ....to here no runtime error but no text displays either
  testPanel = createGraphics(TEST_BOX_HEIGHT+2, TEST_BOX_WIDTH+2);
  testPanel.beginDraw();
  testPanel.stroke(0,0,0);
  testPanel.strokeWeight(1);
  testPanel.fill(255,255,255);
  testPanel.rect(0, 0, TEST_BOX_HEIGHT, TEST_BOX_WIDTH);
  testPanel.fill(0,0,0);
  testPanel.textSize(12);
  testPanel.text("A", TEST_TEXT_X1, TEST_DATA_Y1);
  testPanel.text("B", TEST_TEXT_X1, TEST_DATA_Y2);
  testPanel.text("C:", TEST_TEXT_X1, TEST_DATA_Y3);
  testPanel.text("D", TEST_TEXT_X1, TEST_DATA_Y4);
  testPanel.text("E:", TEST_TEXT_X1, TEST_DATA_Y5);
  testPanel.endDraw();
}

void draw() {
  image(testPanel, TEST_BOX_X, TEST_BOX_Y);
}

Do you think it is possible to program a chat in processing in which the punctuation has influence on the typeface? for example:

"Hello, i write something like this!!!" --> and it will be postet like --> "Hello, i write something like this!"

it should be postet bold and italic because i have done three "!!!"

string myString = "lots of words";
textFont(myFont, 20);
text(myString, x, y);

but the performances are very low (5 fps). Does anyone has an advice for a best performance?

Thanks a lot, JM

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?

createFont(gamefont, 20);

I get the error: "Cannot find anything named "gamefont".".
For test purposed I let processing create a new font, using its own tool, but the programm wont even load that font. Of course the fonts are in the sketch's data folder.

Can anyone tell me what I am doing wrong?

Thanks for a short answer in advance!

See test sketch below:

PFont light, lightItalic, normal, normalItalic, bold, boldItalic, black; 

void setup()
{
  size(800, 800);
  //println(PFont.list());

  //normal = createFont("Helvetica", 100);
  //light = createFont("Helvetica-Light", 100);
  //bold = createFont("Helvetica-Bold", 100);

  light         = createFont("GillSans-Light", 100);
  lightItalic   = createFont("GillSans-LightItalic", 100);
  normal        = createFont("GillSans", 100);
  normalItalic  = createFont("GillSans-Italic", 100);
  bold          = createFont("GillSans-Bold", 100);
  boldItalic    = createFont("GillSans-BoldItalic", 100);
  black         = createFont("GillSans-UltraBold", 100);
  
}


void draw()
{
  textAlign(CENTER, CENTER);
  int numLines = 8;

  textFont(light);
  text("PROCESSING", width/2, height/numLines*1);
  textFont(lightItalic);
  text("PROCESSING", width/2, height/numLines*2);
  textFont(normal);
  text("PROCESSING", width/2, height/numLines*3);
  textFont(normalItalic);
  text("PROCESSING", width/2, height/numLines*4);
  textFont(bold);
  text("PROCESSING", width/2, height/numLines*5);
  textFont(boldItalic);
  text("PROCESSING", width/2, height/numLines*6);
  textFont(black);
  text("PROCESSING", width/2, height/numLines*7);
}

I am currently working on an application which consist of a GUI and a number of application levels (states). However the responsiveness of all the buttons and to switch between different states become really slow when I make use of the textfond() method. For a satisfactory response time I have to completely get rid of textfond().

Is this normal or its just me? I am currently using processing 2.1

Thanks