Can p5.js make text move in the z axis in webgl?

yasai

In the P3D environment of processing, I can make the text move back and forth in the z-axis, resulting in a curved effect.

Now I want to make this effect in webgl of p5.js. I have encountered some problems. I cannot move the text back and forth ，dose p5.js not support text movement in the z axis currently？

I am looking forward to someone who can solve my problem. Thank you very much.

jeremydouglass

Can you give an MCVE of what you have tried in p5.js that isn't working -- and/or the exact effect you are using in P5(Java) that is working and you want to adapt?

I think I know which you are doing, but there are many ways to do text in 3D....

yasai

PFont font;
float angle = 0;
String[] lines; 

void setup() {
  size(600, 600, P3D);
  font =  createFont("Arial-Black-48", 48);
  textFont(font);
  lines = loadStrings("text.txt");
}

void draw() {
  background(15, 12, 8);
  angle +=0.05;

  for (int j = 0; j < lines.length; j++) {     
    for (int i =0; i< lines[j].length(); i++) {
      float c = sin(angle +i/PI/2);

      float x = map(lines[j].length(), 50, 193, -434, 1380);
      float z = map(c, -1, 1, -62, 49);//z axis
      float ry = map(c, -1, 1, -PI/10, PI/10);//rotateY

      float sX = 12;//spacing X
      float sY = 38;//spacing Y

      float alpha = map(c, -1, 1, 42, 255);//Text transparency

      textSize(12);
      fill(204, 141, 20, alpha);

      pushMatrix();
      translate(i*sX+x, j*sY, z);
      rotateY(ry);
      text(lines[j].charAt(i), 0, 0, 0);  
      popMatrix();
    }
  }
}

Hi, jeremydouglass.This issue has not been resolved. I pressed the solution…accidentally. I used the processing to write the effect on the picture, just do not know how to achieve such effect in p5.js. If you can solve this problem it is really thankful!

jeremydouglass

What are the contents of "text.txt" -- multiple lines? One long paragraph?

Edit it seems like this display is tuned to a very specific line length / distribution. Please provide a sample of your text.txt contents.

yasai

oh sorry ,I forgot to put this,it's a multiple lines.I posted the text here and need to copy it to txt file.

I WOULD LIKE TO LEAVE THIS CITY THIS OLD TOWN DON'T SMELL TOO PRETTY AND
I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND AND WHEN I LEAVE THIS ISLAND I'LL BOOK MYSELF INTO A SOUL ASYLUM
'CAUSE I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND
SO HERE I GO, I'M STILL SCRATCHING AROUND IN THE SAME OLD HOLE MY BODY FEELS YOUNG BUT MY MIND IS VERY OLD SO WHAT DO YOU SAY?
YOU CAN'T GIVE ME THE DREAMS THAT ARE MINE ANYWAY HALF THE WORLD AWAY, HALF THE WORLD AWAY
HALF THE WORLD AWAY I'VE BEEN LOST, I'VE BEEN FOUND BUT I DON'T FEEL DOWN AND WHEN I LEAVE THIS PLANET
YOU KNOW I'D STAY BUT I JUST CAN'T STAND IT AND I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND
AND IF I COULD LEAVE THIS SPIRIT I'LL FIND ME A HOLE AND I WILL LIVE IN IT AND I CAN…
I WOULD LIKE TO LEAVE THIS CITY THIS OLD TOWN DON'T SMELL TOO PRETTY AND
I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND
AND WHEN I LEAVE THIS ISLAND I'LL BOOK MYSELF INTO A SOUL ASYLUM 'CAUSE I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND SO HERE I GO, I'M STILL SCRATCHING AROUND IN THE SAME OLD HOLE
MY BODY FEELS YOUNG BUT MY MIND IS VERY OLD SO WHAT DO YOU SAY?
YOU CAN'T GIVE ME THE DREAMS THAT ARE MINE ANYWAY HALF THE WORLD AWAY, HALF THE WORLD AWAY
HALF THE WORLD AWAY I'VE BEEN LOST, I'VE BEEN FOUND BUT I DON'T FEEL DOWN
AND WHEN I LEAVE THIS PLANET YOU KNOW I'D STAY BUT I JUST CAN'T STAND IT AND I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND AND IF I COULD LEAVE THIS SPIRIT I'LL FIND ME A HOLE AND I WILL LIVE IN IT AND I CAN… I WOULD LIKE TO LEAVE THIS CITY THIS OLD TOWN DON'T SMELL TOO PRETTY AND
I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND AND WHEN I LEAVE THIS ISLAND I'LL BOOK MYSELF INTO A SOUL ASYLUM
'CAUSE I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND
SO HERE I GO, I'M STILL SCRATCHING AROUND IN THE SAME OLD HOLE MY BODY FEELS YOUNG BUT MY MIND IS VERY OLD SO WHAT DO YOU SAY?
YOU CAN'T GIVE ME THE DREAMS THAT ARE MINE ANYWAY HALF THE WORLD AWAY, HALF THE WORLD AWAY
HALF THE WORLD AWAY I'VE BEEN LOST, I'VE BEEN FOUND BUT I DON'T FEEL DOWN AND WHEN I LEAVE THIS PLANET
YOU KNOW I'D STAY BUT I JUST CAN'T STAND IT AND I CAN FEEL THE WARNING SIGNS RUNNING AROUND MY MIND AND IF I COULD LEAVE THIS SPIRIT I'LL FIND ME A HOLE AND I WILL LIVE IN IT AND I CAN…

jeremydouglass

Okay, text file worked for me, and I see what you are doing with text alignment.

1. what p5.js renderer are you using -- default, or WEBGL? https://p5js.org/examples/form-3d-primitives.html

2. based on a quick scan of p5.js issues, it looks like this is not supported in WEBGL:

   • https://github.com/processing/p5.js/issues/1177
   • https://github.com/processing/p5.js/issues/1810

yasai

Maybe the effect is currently not implemented in p5's webgl. Anyway, thank you very much for your help!@jeremydouglass