.pde running on webpage but not displaying?

aseylys · November 2014

Hey guys,

So my code was exported to an index.html using the JS Mode and the script runs in Mozilla. I know this because when I click on the script my test print statements println("Mouse True") appear in the browser. However, the shapes and .svg's aren't displaying. It's just a black screen that when I click on it it says "Mouse True" in the browser.

Does anyone have the slightest clue as to what is going on? I could upload my code with generic svg paths if need be.

Thanks so much!

GoToLoop · November 2014

Does anyone have the slightest clue as to what is going on?

Processing.JS's framework is @ v1.4.1 (stable) & v1.4.8 (dev). And thus lacks latest Processing 2+ series API!

I believe it's only capable of loading ".svg" files, and can't create them on-the-fly:
http://processingjs.org/reference/PShape/
http://processingjs.org/reference/loadShape_/

Also make sure you're using /* @pjs */ directives like preload:
http://processingjs.org/reference/pjs directive/
http://processingjs.org/reference/preload/

Although I dunno whether loadShape() demands preload like loadImage() does! :-??
http://processingjs.org/reference/loadImage_/

aseylys · November 2014

Yes, thank you for reiterating what I already knew.

All the .svgs were already preloaded and were created using PShape and loadShape. The actual code isn't the problem- that runs outside of the browser perfectly. It's when it's in the browser is when the problems occur, like the graphics not showing up, but the code is compiling and running.

GoToLoop · November 2014

The actual code isn't the problem- that runs outside of the browser perfectly.

By outside the browser you mean Java Mode, right?

It's when it's in the browser is when the problems occur, ...

By in the browser you mean JavaScript mode, is it?
Be aware that transpilation (https://en.wikipedia.org/wiki/Transpile) from Java to JS is prone to errors! :(|)

aseylys · November 2014

Yes sir to both of the questions. Alright I'll give you the example. Here is the test.html file that came with processing-js-1.4.8

        <!doctype html>
        <html>
          <head>
            <meta charset="utf8">
            <title>Processing.js</title>
            <script src="processing.js"></script>
          </head>
          <body>
            <h1>Processing.js</h1>
            <script type="text/processing">
              void setup() {
                size(400,200);
                textAlign(CENTER, CENTER);
                background(0,0,100);
                fill(255,230,75);
                text("Processing.js", width/2, height/2);
                noLoop();
              }
              void draw() {
              }

              void mouseMoved() {
                stroke(255);
                point(mouseX, mouseY);
                redraw();
              }

              void mousePressed() {
                line(0,mouseY,width,mouseY);
                line(mouseX,0,mouseX,height);
                println(mouseX, mouseY);
              }
            </script>
            <canvas></canvas>
          </body>
        </html>

This works perfectly in both Chrome and Firefox. Now, if I add my simplified program instead of theirs:

<!doctype html>
<html>
  <head>
    <meta charset="utf8">
    <title>Processing.js</title>
    <script src="processing.js"></script>
  </head>
  <body>
    <h1>Processing.js</h1>
    <script type="text/processing">
    void setup(){
      background(0);
      size(600,600);
      noFill();
      strokeWeight(4);
      noLoop();
    }

    float x=0;
    float y=PI;
    float z=0;
    float a=PI;

    void draw(){
      clear();
      x=PI/25;
      y=y+PI/25;
      z=z+PI/50;
      a=a+PI/50;
      stroke(153,255,51);
      arc(width/2,height/2,150,150,x+QUARTER_PI,QUARTER_PI+y);
      stroke(255,51,51);
      arc(width/2,height/2,300,300,z,a);


    }

    void mousePressed() {
      loop();
       // Holding down the mouse activates looping
    }

    void mouseReleased() {
      noLoop();  // Releasing the mouse stops looping draw()
    }
    </script>
    <canvas></canvas>
  </body>
</html>

Just the background shows up. There is supposed to be 2 arcs, that when clicked the inner one forms a circle and the outer one rotates. But in the browser, nothing, just the background.

GoToLoop · November 2014

Like I said before: "And thus lacks latest Processing 2+ series API!"
Function clear() is Processing 2: https://processing.org/reference/clear_.html
You won't find it in Processing.JS' reference page: http://processingjs.org/reference/ [-X
We gotta code in Java Mode as if we were still using the old Processing v.1.5.1 if we want it to transpile into JS!

aseylys · November 2014

Well shame on me, that was my mistake. Thank you kind man for your patience and your knowledge.

mbraendle · November 2014

I believe it's only capable of loading ".svg" files, and can't create them on-the-fly: http://processingjs.org/reference/PShape/ http://processingjs.org/reference/loadShape_/

Also make sure you're using /* @pjs */ directives like preload: http://processingjs.org/reference/pjs directive/ http://processingjs.org/reference/preload/

Although I dunno whether loadShape() demands preload like loadImage() does! http://processingjs.org/reference/loadImage_/

@GotoLoop: Have a look at http://processingjs.nihongoresources.com/vector/

And no, you don't need to preload SVG.

mbraendle · November 2014

Also you can do things like this in PJS:

XMLElement xml_svg;  

  String svg_logo = "<svg id='Ebene_1' x='0px' y='0px' width='595.279px' height='159.102px' viewBox='0 0 595.279 159.102' enable-background='new 0 0 595.279 159.102'>"
      + "<path id='f' fill='#F28C00' d='M21.24,154.881c-2.723,0-5.989,5.443-5.989-54.267c0-9.077,0.544-18.151,0.544-27.226"
      + "c0-5.447,1.633-15.792-6.535-15.792c-3.266,0-5.081,2.177-7.078,2.177c-2.359,0-2.179-2.357-2.179-5.626Ò "
      + "c0-13.794,3.994-15.428,10.892-15.428c8.167,0,8.167-12.162,10.708-20.329C25.05,7.137,36.302,0.06,45.743,0.06"
      + "c7.078,0,16.334-0.909,16.334,4.356c0,2.723-2.177,20.508-5.265,20.508c-2.54,0-3.266-1.633-5.261-1.633"
      + "c-5.083,0-8.531,7.442-8.531,11.616c0,2.542,1.815,4.72,4.537,4.72c2.359,0,4.536-0.908,6.897-0.908c6.897,0,7.08,4.901,7.08,11.071"
      + "c0,2.541,0,9.438-3.812,9.438c-1.451,0-5.081-1.633-8.348-1.633c-9.983,0-9.619,12.34-9.619,19.42"
      + "c0,23.958,6.713,72.234,6.713,74.596c0,3.994-2.541,3.27-5.807,3.27H21.24z'/>"
      + "<path id='m' fill='#F28C00' d='M81.86,154.881c-6.173,0-9.983,5.807-9.983-47.917c0-76.411-2.361-74.052,22.324-74.052"
      + "c3.812,0,7.806,0.181,7.806,2.903c0,2.176-2.179,5.627-2.179,8.168c0,1.815,1.815,3.085,3.63,3.085c2.177,0,4.718-2.178,8.712-4.176"
      + "c3.994-2.178,9.437-4.174,17.061-4.174c8.893,0,14.702,8.35,19.238,8.35c2.541,0,6.171-0.545,10.708-3.269"
      + "c4.536-2.541,10.163-5.082,16.699-5.082c33.395,0,32.671,43.741,32.671,66.974c0,55.355-6.898,49.184-12.163,49.184h-12.34"
      + "c-1.817,0-6.897,0.364-6.897-2.901c0-3.27,6.897-23.232,6.897-53.542c0-34.666-12.342-38.296-19.24-38.296"
      + "c-6.354,0-12.34-0.546-12.34,29.403c0,65.156-0.909,65.34-6.716,65.34h-16.334c-3.45,0-6.353,0.725-6.353-1.817"
      + "c0-2.721,6.897-39.204,6.897-56.444c0-10.892,0-36.48-14.884-36.48c-13.613,0-18.693,16.696-18.693,43.74"
      + "c0,36.482,5.081,43.378,5.081,48.46c0,3.085-3.266,2.541-5.263,2.541H81.86L81.86,154.881z'/>"
      + "<path id='s' fill='#65BEEC' d='M223.971,125.114c0-8.533,4.356-19.421,5.807-19.421c0.908,0,5.445,27.405,31.218,27.405"
      + "c7.44,0,16.152-3.81,16.152-13.067c0-18.694-49.005-13.794-49.005-49.913c0-22.141,17.787-34.121,37.389-34.121"
      + "c22.688,0,35.21,13.612,35.21,17.243c0,3.449-10.163,18.15-14.337,18.15c-4.72,0-5.809-13.974-22.507-13.974"
      + "c-5.627,0-13.249,2.54-13.249,7.984c0,18.695,52.995,18.332,52.995,55.173c0,23.6-19.6,37.027-41.379,37.027"
      + "C243.027,157.603,223.971,146.349,223.971,125.114z'/>"
      + "<path id='o' fill='#65BEEC' d='M314.539,96.62c0-29.221,13.976-60.621,45.556-60.621c31.581,0,45.556,31.4,45.556,60.621"
      + "c0,42.649-24.685,60.983-45.556,60.983C339.225,157.603,314.539,139.269,314.539,96.62z M383.145,92.082"
      + "c0-14.339-5.078-34.666-23.05-34.666c-17.969,0-23.05,20.327-23.05,34.666c0,14.52,4.717,35.209,23.05,35.209"
      + "C378.427,127.291,383.145,106.601,383.145,92.082z'/>"
      + "<path id='d' fill='#65BEEC' d='M451.391,154.881c-20.329,0-38.116-17.969-38.116-54.633c0-41.563,27.586-64.249,43.559-64.249"
      + "c3.812,0,7.806,4.173,10.348,4.173c3.628,0,4.174-6.533,4.174-9.438c0-14.702-4.54-21.234-4.54-28.132c0-2.54,4.54-2.54,6.357-2.54"
      + "h18.873c8.169,0,7.442,81.312,7.442,89.842c0,4.174,0.727,64.977-5.625,64.977H451.391L451.391,154.881z M474.983,87.361"
      + "c0-31.944-4.898-34.122-11.614-34.122c-7.806,0-25.593,10.164-25.593,43.199c0,12.523,4.72,31.941,20.146,31.941"
      + "C477.526,128.379,474.983,100.43,474.983,87.361z'/>"
      + "<path id='a' fill='#65BEEC' d='M556.658,79.377c5.263-0.909,9.438-1.815,9.438-7.806c0-9.257-9.617-14.155-17.605-14.155"
      + "c-18.512,0-15.79,15.608-19.784,15.608c-5.807,0-12.16-7.078-12.16-14.884c0-13.431,15.065-22.142,31.763-22.142"
      + "c5.809,0,30.674-0.181,39.931,25.227c3.81,10.529,4.172,64.252,4.172,70.604c0,7.984,1.453,12.707,1.453,18.877"
      + "c0,3.811-17.062,4.174-33.216,4.174c-43.742,0-46.828-22.503-46.828-33.397C513.824,98.615,536.332,82.825,556.658,79.377z"
      + " M567.912,111.138c0-6.354,1.087-13.976-7.626-13.976c-10.707,0-21.959,9.075-21.959,20.147c0,10.166,8.893,16.152,18.514,16.152"
      + "c10.707,0,11.067-5.443,11.067-14.339v-7.984H567.912z'/>"
      + "</svg>";

    .
    .
    .

      xml_svg = new XMLElement.parse(svg_logo);
      logo = new PShapeSVG(xml_svg);

So if one can parse an SVG string, one can also build one.

Howdy, Stranger!

Categories

In this Discussion

.pde running on webpage but not displaying?

Best Answer

Answers