Ad

Not Working 'PImage' As Class Property In Processing.js

- 1 answer

What i was trying to do is, declare a class which has an Image as it's property.Then I am declaring an Object of that class and call draw function.But it's not working....Why? Here is my processing.js part of my .html page

 <script type="text/processing">

        PImage starImage;

        void setup(){
            size(400,400);
            smooth();

            starImage = loadImage("star.png");


        }

        var Star = function(x,y)
        {
            this.x = x;
            this.y = y;
            this.img  = starImage;
        };

        Star.prototype.drawStar = function(){
            image(this.img,this.x,this.y,50,50);
        };

        var obj = new Star(50,50);

        draw = function(){
            obj.drawStar();
        };

    </script>

But if I change "image(this.img,this.x,this.y,50,50);" to "image(starImage,this.x,this.y,50,50);",it's works.That seems assignment of 'starImage' (PImage) in this.img is not working.

Ad

Answer

I think your main problem is that you're creating your Star object before you load your starImagePImage. Try refactoring your code to make sure that you load the image before you create the Star object.

Here is how you'd do it in pure Processing:

PImage starImage;

Star obj;

void setup() {
  size(400, 400);
  smooth();

  starImage = loadImage("star.png");
  obj = new Star(50, 50, starImage);
}

class Star{

  float x;
  float y;
  PImage img;

  public Star(float x, float y, PImage img){
    this.x = x;
    this.y = y;
    this.img = img;
  }

  public void drawStar(){
    image(this.img, this.x, this.y, 50, 50);
  }
}

void draw(){
  obj.drawStar();
}

That should work in Processing.js too. Notice that the Star object isn't being created until after the image is loaded.

Ad
source: stackoverflow.com
Ad