CODEWITHSUNDEEP
javascriptprocessingprocessing.js
THE2ndMOUSE
THE2ndMOUSE

Reputation: 52

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

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.

Upvotes: 1

Views: 353

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

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.

Upvotes: 2

Related Questions