Controlling the sequence in Processing (HTML and Processing show items in different order!)

StackOverflow https://stackoverflow.com/questions/23396700

Question

my question is about the order of items that are shown on Processing. When I execute processing, it shows the text above the rectangle, but when I use HTML to show the same processing.pde file, it shows the text behind the rectangle! I was wondering if anyone can help me in this matter or tell me how to change the sequence of items in Processing. Thank you. (unfortunately, I could not post an image because of my low reputation.)

PFont f;

void setup() 
{
size(300, 300, P3D);
f = createFont("Arial",16,true); // Arial, 16 point, anti-aliasing on
textFont(f,11);
rectMode(CENTER);  
}

void draw() 
{ 
  pushMatrix();
  stroke(255);
  fill(255);
  rect(80, 150, 100, 30);
  fill(0);
  text ("TesT", 80, 138);
  popMatrix();
}

and the HTML code that run this is:

<html>

    <head>

    <link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
    <script src="processing.js"> </script>
    <script src="processing.min.js"> </script>

    </head>
    <body>

  <canvas data-processing-sources="rectangle/rectangle.pde"></canvas>

</body>


</html>
Was it helpful?

Solution

text(data, x, y, z) Use this for your code

As I said you can just bring your text forward by increasing the Z position in P3D, Now the text you are adding is in the 0 Z position and your rectangle in the 30, so logically it would appear in front.

Regards Jose

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top