some colored sections are white when run on the in the browser (or on the web)

edited October 2013 in JavaScript Mode

EDIT: The forum post won't show all of the code, so I have put it here in a web page.

complete code is here

--end EDIT

I have used both FireFox and Chrome on the web and off. And I have used my normal method just putting the pde in a canvas element. I have also tried export to web with Javascript. The white appears as soon as I am not running it in the Processing sketch window. The code runs exactly as I wish-- no problems there. Fortunately it's short, so maybe someone can spot the culprit.

The first example shown here is how it should look (as far as colors go). The second is what happens in the browser or on the web or when I run the exported html file on my computer.

http://www.clairdunn.com/aztec-issue.htm

I have checked to make sure the variable names are happy for java; other than that I am mystified.

Here is the code:



            // Aztec Wings - Clair Dunn - 12 October 2013
            
            float bx =  180;  
            float by = 460;
            float cx = 440;  
            float cy = 200;
            float dx = 700;  
            float dy =  40;
            float ex = 700;  
            float ey = 200;
            float fx = 520;  
            float fy = 160;
            
            PImage img;
            
            float unkn = 0.09;
            int cpx1 = width/6; //5 3 5 3
            int cpy1 = height/4;
            int cpx2 = width/6;
            int cpy2 = height/4;
            int x = round(cpx1+=unkn);
            int y = cpy2+=random(10, 390); //390
            int x2, y2;
            int i = 0;
            
            void setup() {
              size(700, 500, P3D);
              // size(1500, 900, P3D); // for print sales
              img = loadImage("backyard-550x438.jpg");
              background(7, 183, 178, 0.4);
              smooth();
            }
            float camera_angle;
            float camera_x, camera_y, camera_z;
            void rotateCam() {
              camera_angle+=2;
              camera_x=1000*cos(radians(camera_angle));
              camera_z=1000*sin(radians(camera_angle));
              camera_y=camera_x+camera_z;
            }
            void draw () {
              camera(camera_x, camera_y, camera_z, 0, 0, 0, 0, 1, 0);
              rotateCam();
              beginShape();
              textureMode(IMAGE);
              texture(img);
              for (int i=0; i

If you really want to see the whole thing the way it should look when run, you can see it here: Aztec Wings

Answers

  • edited October 2013

    The forum post won't show all of the code, so I have put it here in a web page.

    code

  • edited October 2013

    "The page you have requested can not be found."

    If you use loadImage() in JavaScript, you have to preload the image with the following command:

    /* @pjs preload="backyard-550x438.jpg"; */

    http://processingjs.org/reference/loadImage_/

  • edited October 2013

    @darius -- grrr - the page was htm not html. It's fixed now, thanks to you! Apologies!

    I tried the preload and there is no change, the white still appears. Driving me bananas, especially since much of the code is grabbed from code already existing in another work (which works).

    thanks again --

  • Answer ✓

    I see two problems in your code:

    • width and height are used to define the variables cpx1, cpy1, cpx2, and cpy2 before they are set to the sketch dimensions (they are used before setup(), so their values are the standard dimensions 100, 100).
    • incorrect nesting of beginShape/endShape: there is only one beginShape() call outside the loop, but 200 endShape() calls within the loop.
  • Whew - thank you -- @mbraendle -- I'm working on getting my class ready for tomorrow, but as soon as I'm done, I will check this out. It sounds very promising!

  • edited October 2013

    @mbraendle I couldn't wait - I tried it, with a good result in FireFox and and error msg. in Chrome:

    FireFox works here: Aztec Wings

    And now Chrome runs it as well -- finally. .

    Sketch doesn't run in IE or Opera on windows, nor in Opera on Linux. So there is at least some major progress.

    THANK you!

Sign In or Register to comment.