p3d renderer and RTL languages

nevahid

hi people all... i'm using processing 3. i tried to load a font to write persian texts in text() function... if i set the renderer to p2d or default renderer, everything works fine and words are shown correctly. but if i choose p3d renderer, letters are written seperated (because for persian and arabic language, some letters stick together and form new curves). any idea how to write persian (or arabic) letters with p3d renderers?

GoToLoop

Dunno... maybe use your text() and other related PFont stuff over a separate PGraphics object?
Of course, using a different renderer for that 1, like P2D or JAVA2D. *-:)

https://Processing.org/reference/createGraphics_.html
https://Processing.org/examples/creategraphics.html

Otherwise your last recourse is to post an issue at GitHub: 8-|
https://GitHub.com/processing/processing/issues

nevahid

Thanks GoToLoop!! that solved it... P2D was the same but java2d solved the problem... and it seems it must be used with createFont(), because loadFont() didn't solve it... thanks again

jeremydouglass

@nevahid glad you solved it. Would you be willing to share a small code sample to show how you used Java2D / createFont to render RTL / Persian text?

nevahid

yes jeremy, this is the complete code, i wrote it to use 3d effect (rotateY) on persian text, i used "B Nazanin" font which is installed on my computer:

PFont pf;
PGraphics pg;
void setup()
{
  fullScreen(P3D);
  pg=createGraphics(300,300,JAVA2D);
  pf=createFont("B Nazanin",32);
}

void draw()
{
  background(0);
  rotateY(HALF_PI);
  pg.beginDraw();
  pg.background(100);
  pg.textFont(pf);
  pg.text("به نام خدا",100,100);
  pg.endDraw();
  image(pg,100,100);
}

GoToLoop

Made a tweaked version outta that: :ar!

// forum.Processing.org/two/discussion/18311/p3d-renderer-and-rtl-languages
// Nevahid & GoToLoop (2016-Sep-28)

static final String RTL = "به نام خدا", FONT = "B Nazanin";
static final float STEP = 2e-2, FPS = 60;
static final color FG = -1, BG = #008000;

float inc, anticlockwise = 1;
boolean paused;

PImage rtl;

void setup() {
  //fullScreen(P3D);
  size(800, 600, P3D);
  smooth(8);
  frameRate(FPS);
  imageMode(CENTER);

  final PGraphics pg = createGraphics(width>>1, height>>1, JAVA2D);
  pg.smooth(3);
  pg.beginDraw();

  pg.fill(FG);
  pg.background(BG);
  pg.textFont(createFont(FONT, 32, true));
  pg.textAlign(CENTER, CENTER);
  pg.text(RTL, pg.width>>1, pg.height>>1);

  pg.endDraw();
  rtl = pg.get();
}

void draw() {
  clear();
  rotateY(inc += STEP * anticlockwise);
  image(rtl, width>>1, height>>1);
}

void mousePressed() {
  if (mouseButton == LEFT)  anticlockwise *= -1.;
  else if (paused ^= true)  noLoop();
  else                      loop();
}

nevahid

this is a perfect example ;-) bravo :-bd

jeremydouglass

Very nice.

nevahid

hi again people... i want to write this program in p5js, as i'm starting to use p5js for web app development... so any suggestion here? and how can i make it a reusable class in p5js? thanks in advance ;-)