› › ›

Problem displaying text with P3D in HTML5- issue 2465

ToreanderToreander
edited May 2016 in JavaScript Mode

Hi,

I have just been starting with Processing, it looks very promising indeed. I am working in a HTML5 document, using the Processing.js to make use of the full library (I want to connect to the HTML5 Audio API).

My problem is the following: I want to show a text string, and at the same time I want to show a 3D object. When using P2D, my text shows fine, but I have no 3D space. When switching to P3D, my text is not showing. This is my code (look below for the Processing script):

<html>

<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<title>Testing123</title>   
<script type="text/javascript" src="js/processing-1.4.1.js"></script>   
</head>

<body> 
<script type="text/processing">
/* @pjs
crisp=true;
font=fonts/georgia.ttf;
*/
PFont font_name;

void setup() {
size (1200, 800, P3D);
background (34);
smooth();
lineStart = height/2;   
}

void draw() { 

//TEXT EXAMPLE
background (34);                          
font_name = createFont("georgia.ttf", 32);
textFont(font_name);
textSize(30);
fill(255);
text ("georgia in pjs", 20, 310); 

//LINE EXAMPLE
line(0, lineStart, width, lineStart);  
lineStart = lineStart - 0.5;
if (lineStart < 0) { 
lineStart = height; 
}  

//3D
beginShape();
vertex(30, 30, -60); 
vertex(30, 60, -60);
vertex(60, 60, 0);  
vertex(60, 30, 0);  
endShape(CLOSE); 
}

</script>

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

</body>
</html>

I have found the bug describing my problem in 3D: https://github.com/processing/processing/issues/2465. It works fine in the processing editor, but in my HTML document my text is shown as a (black) bar.

Am I missing something or is there maybe an easier way to mix 2 and 3d in my HTML canvas?

Thanks in advance, hope someone knows a fix or a workaround!

greets Toreander

Tagged:

Answers

  • GoToLoopGoToLoop

    I'm not good at P3D. Just gonna mention some tips:

    • Processing.JS version 1.4.1 is very much like the old Processing version 1.5.1
    • In Processing.JS, P2D isn't WebGL. And P2D is the same as JAVA2D.
    • And P3D is the same as OPENGL renderer.
    • Don't load/create resources after setup(). That's why setup() exists for!
    • @pjs font directive: http://processingjs.org/reference/font/
  • ToreanderToreander

    Thanks very much for your tips, going to do some more research! It takes some time to put it all together...

Sign In or Register to comment.