Everything is working fine except when exporting the SVG, I am getting: textMode(SHAPE) is not supported by this renderer.

Text is being rendered as tags inside the svg file instead of Shapes (as I would like to). Everything is good in with PDF and PNG exporting. Tried taking a look at the SVG renderer and it looked almost as a clone of the PDF renderer so that gave me no clue how to fix this issue. Here is my code snippet:

void exportSVG(String entryId, String entryFont, boolean entryIsRTL, JSONArray data, JSONObject geometry) {
  String format = "svg";
  String filePath = EXPORT_PATH + format + "/" + templateFile + "_" + entryId + "." + format;
  PGraphics graphic = createGraphics(templateWidth, templateHeight, SVG, filePath);
  graphic.beginDraw();
  graphic.textMode(SHAPE);
  graphic.shape(templateShape, 0, 0, templateWidth, templateHeight);
  for (int i = 0; i < data.size(); i++) {
    JSONArray stringData = data.getJSONArray(i);
    String fieldName = stringData.getString(0);
    String fieldValue = stringData.getString(1);
    if(!geometry.isNull(fieldName)) {
      JSONObject fieldGeometry = geometry.getJSONObject(fieldName);
      PFont myFont = createFont(entryFont, fieldGeometry.getInt("fontSize"));
      graphic.textFont(myFont);
      graphic.textLeading(fieldGeometry.getInt("leading"));
      graphic.fill(unhex(fieldGeometry.getString("color")));
      graphic.textAlign(alignment.get(fieldGeometry.getString("aligmentX")), alignment.get(fieldGeometry.getString("aligmentY")));
      graphic.text(fieldValue, fieldGeometry.getInt("x"), fieldGeometry.getInt("y"));
    }
  }
  graphic.dispose();
  graphic.endDraw();
}

I tried putying the code that calls the text with the info between beginHUD(); and endHUD(); but it crashes the program.

Here is the code.

    import peasy.*;

    PeasyCam cam;

PShape ammonite; 
PImage fondo, titulo, titulo2; 
String estado; 
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

void setup() { 
  fullScreen(P3D);

  imageMode(CENTER); 
  textAlign(CENTER);

  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25); 
  hotSpotsPosition[2] = new PVector(-20, -10, 3); 
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //colors: colors are not visible but must be unique!!!!!! 
  hotSpotsColor[0] = color(255, 0, 0); 
  hotSpotsColor[1] = color(100, 0, 0); 
  hotSpotsColor[2] = color(110, 0, 0); 
  hotSpotsColor[3] = color(120, 0, 0); 
  // texts 
  hotSpotsText[0] = "embudo"; 
  hotSpotsText[1] = "caparazon"; 
  hotSpotsText[2] = "ojos"; 
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  helvetica = createFont("HelveticaWorld-Regular.ttf", 30); 
  nexa = createFont("Nexa Bold.otf", 50);

  pg = createGraphics(width, height, P3D);

  fondo.resize(width, height); 
  image(fondo, width/2, height/2);
}//func

void draw() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    textFont(nexa); 
    text("AMMONITE", width/2, height/6 - 50); 
    text("EL ANCESTRO MARINO", width/2, height/6); 
    textFont(helvetica); 
    text("Toca para comenzar", width/2, height/2 + 300); 
    cam.endHUD(); //--------------------------------
  }//if 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {

    doEstadoModelo(); // most important
  }//else if
  // --------------------- EROR - NO estado - program error !!!! --------
  else { 
    println ("--------------- EROR - NO estado in draw() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func draw()

//------------------------------------------------------------------------

void mousePressed() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;
      }//if
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  // HUD ----
  cam.beginHUD(); 
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);   


  // show Ammonite 
  pushMatrix(); 
  spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2); 
  directionalLight(255, 255, 255, width/2, height/2, 20); 
  scale(20); 
  shape(ammonite); 
  popMatrix();

  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 50); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7); 
    popMatrix();
  }

  // if a hot spot has been clicked:
  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      scale(0.5);
      fill(250, 250, 35); 
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
     textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x-50, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(0.5);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
      cam.endHUD(); // ----
    }//else
  }//if
}//func

void makeInternalPGraphics() { 
  pg.beginDraw(); 
  pg. perspective(PI/3.0, (float) width/height, 1, 1000000); 
  pg.setMatrix(getMatrix()); // replace the PGraphics-matrix
  pg.background(0); 
  pg.noLights(); 
  for (int i=0; i<hotSpotsPosition.length; i++) { 
    PVector pv=hotSpotsPosition[i]; 
    pg.pushMatrix(); 
    pg.translate(pv.x, pv.y, pv.z); 
    pg.noStroke(); 
    pg.fill(hotSpotsColor[i]); 
    pg.sphere(7); 
    pg.popMatrix();
  }//for 
  pg.endDraw();
}//func

void avoidClipping() {
  // avoid clipping :
  // https : // // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear 
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func //

Any help or advice will be so helpful, thanks!

Issue 1: Some letters not displaying at all

The issue is shown here:

http://imgur.com/a/8iVjy

I am using createFont() in setup with smooth turned on and textFont(), then using textSize() at different points.

The problem appears on some Android devices, on some not. I have tried to look for the problem. I created the following table:

http://imgur.com/8RQNQlA

Could not draw conclusions from it apart from the observation that most vowels display and most consonants don't. Most signs display.

Issue 2: Some letters displayed with stroke

The issue is shown here:

http://imgur.com/uCC54D1

On devices on which the font actually displays, some letters are rendered with stroke, some not. In the picture above, notice how "b" and "d" display differently than the rest. I tried calling noStroke() before text(), but to no avail. Switching from P3D to OPENGL does not solve the problem. Changing the font did not solve the issue either.

Issue 3: textFont not changing the font when called second and all consecutive times.

Since in P3D and OPENGL the fonts are generated as bitmaps in the setup(), different fonts must be instantiated to accomodate for different font sizes. Then, in draw(), textFont() should be used depending on the dimensions of the text which needs to be displayed. That is the way it should work in theory. In practice, however, in my case, calling textFont() works only once, at the beginning. Consecutive calls bear no effect.

Neither issue is, to my knowledge, present with the JAVA2D renderer.

Could anybody point me to the right direction to solve any of the problems?

Thank you in advance.

Could not run the sketch (Target VM failed to initialize).
For more information, read revisions.txt and Help ? Troubleshooting.

And it highlight line 43. I'm not sure if this is a system or coding error. If anyone can help me run this file that would be much appreciated.

// LIBRARIES
import processing.pdf.*;


// GLOBAL VARIABLES
PShape baseMap;
String csv[];
String myData[][];
PFont f;

//SETUP
void setup() {
  size(1800, 900);
  noLoop();
  f = createFont("Avenir-Medium", 12);
  baseMap = loadShape("WorldMap.svg");
  csv = loadStrings("MeteorStrikes.csv");
  myData = new String[csv.length][6];
  for(int i=0; i<csv.length; i++) {
    myData[i] = csv[i].split(",");
  }
}


// DRAW
void draw() {
  beginRecord(PDF, "meteorStrikesBron.pdf");

  shape(baseMap, 0, 0, width, height);
  noStroke();

  for(int i=0; i<myData.length; i++){
    fill(255, 0, 0, 50);
    textMode(MODEL);
    noStroke();
    float graphLong = map(float(myData[i][3]), -180, 180, 0, width);
    float graphLat = map(float(myData[i][4]), 90, -90, 0, height);
    float markerSize = 0.05*sqrt(float(myData[i][2]))/PI;
    ellipse(graphLong, graphLat, markerSize, markerSize);

    if(i<10){
      fill(0);
      textFont(f);
      text(myData[i][0], graphLong + markerSize + 5, graphLat + 4);
      noFill();
      stroke(0);
      line(graphLong+markerSize/2, graphLat, graphLong+markerSize, graphLat);
    }

  }
  endRecord();
  println("PDF Saved!");
}

My sketch works in Processing but in processing.js text display is corrupted (each letter appears truncated, only a few pixels survive. It looks like a broken-up horizontal line where the text should be).

I can reproduce this behavior if I change P2D to P3D in the standard Typography/Letters example copied below for easy reference.

This problem is not browser specific - I have identical results in Chrome, Safari, and Firefox.

Any help would be much appreciated!

/**
 * Letters. 
 * 
 * Draws letters to the screen. This requires loading a font, 
 * setting the font, and then drawing the letters.
 */

PFont f;

void setup() {
  size(640, 360,P3D); //The original version has P2D here - with P3D none of the letters appear correctly.
  background(0);

  // Create the font
  println(PFont.list().toString);
  f = createFont("Georgia", 24);
  textFont(f);
  textAlign(CENTER, CENTER);
} 

void draw() {
  background(0);
  noLights();
  textMode(SCREEN);
  // Set the left and top margin
  int margin = 10;
  translate(margin*4, margin*4);

  int gap = 46;
  int counter = 35;

  for (int y = 0; y < height-gap; y += gap) {
    for (int x = 0; x < width-gap; x += gap) {

      char letter = char(counter);

      if (letter == 'A' || letter == 'E' || letter == 'I' || letter == 'O' || letter == 'U') {
        fill(255, 204, 0);
      } 
      else {
        fill(255);
      }

      // Draw the letter to the screen
      text(letter, x, y);

      // Increment the counter
      counter++;
    }
  }
}

here are some pictures of it:

When the figure is far away the text is in front.

Now the text is behind the figure (it shouldn't be)

I do know why this happens, when the text has a lower z value than the figure, it is drawn behind it. But i want a way to draw the text, as though it was drawn on the camera.