Not working 'PImage' as Class Property in Processing.js

Question

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.

Answer 1

I think your main problem is that you're creating your Star object before you load your starImage PImage . 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.