Get pixels in instance mode

p5.js Beginners
1

Hello there,

I’m having an odd moment with trying to get pixels from an image in instance mode. I’m unable to reference the image as one would normally >>> let pix = p.img.get(p.x, p.y);

What am I doing wrong? Any pointers or a solution would be much appreciated.
Thank you,

Mark

let psystem1 = function( p) {

    let img;
    let x, y;
  
    p.preload = function(){
        p.img = p.loadImage("../datas/astro.png")
    }

    p.setup = function() {
      p.createCanvas(innerWidth, innerHeight);
      p.background(0);
      p.imageMode(p.CENTER);
      p.x = p.width/2;
      p.y = p.height/2;
      //p.image(p.img, p.width/2, p.height/2);

    }
  
    p.draw = function() {
     let pix = p.img.get(p.x, p.y);
     console.log(pix)
     
     p.noStroke();
        p.fill(pix);
        p.ellipse(p.x, p.y, p.d, p.d);
        p.x += p.random (-10, 10);
        p.y += p.random (-10, 10);
        if((p.x>=p.width)||(p.x<0)){
            p.x = p.width/2;
        }
         if((p.y>=p.height)||(y<0)){
            p.y = p.height/2;
        }     
    }

  };
  
  let myp51 = new p5(psystem1, 'psystem1');
1 Like
2

I’m not sure if this would cause an issue, but why are you assigning your image to p.img instead of your local variable called img? Technically you should be able to get away with that unless something in p5 is assigning/using/modifying that same property name, but it doesn’t look like what you meant to do, and it’s a bad practice.

Same goes for x and y.

3

Hi there,

thank you for the reply. Indeed, this code does not work although in the logic of things it should. If I simply reference the img and call get, the pix variable has only zero values.

img.get(x, y) >>> gives me zero values.

However, if I first draw the image in setup (commented line) and then call

p.get(x, y) >>> gives colour values.

This is not what I want to achieve however. I would just like to draw with a random moving ellipse filled with pixel values from the image.

It seems strange that what works fine and logically in one mode (global) should not in instance.
Or I’ve missed some fundamental point?

b
M

1 Like
4

The only other issue I see is the failure to resize the image to match the canvas dimensions (you were using the canvas width and height to determine the appropriate position for x and y, but the image might have been a different size). Here is working code:

let psystem1 = function (p) {
  const d = 10;
  let img;
  let x, y;

  p.preload = function () {
    img = p.loadImage("/astro.jpg");
  };

  p.setup = function () {
    // Not sure what innerWidth and innerHeight are
    p.createCanvas(innerWidth, innerHeight);
    p.background(0);
    p.imageMode(p.CENTER);
    
    // This assumes that img is the same width as the canvas
    x = p.width / 2;
    y = p.height / 2;
    // This was probably what was missing?
    img.resize(p.width, p.height);
    console.log(img.get(x, y));
  };

  p.draw = function () {
    let pix = img.get(x, y);

    p.noStroke();
    p.fill(pix);
    p.ellipse(x, y, d, d);
    x += p.random(-10, 10);
    y += p.random(-10, 10);
    if (x >= p.width || x < 0) {
      x = p.width / 2;
    }
    if (y >= p.height || y < 0) {
      y = p.height / 2;
    }
  };
};

let myp51 = new p5(psystem1, "psystem1");

https://editor.p5js.org/Kumu-Paul/sketches/YE-tC_t_g

4 Likes
5

Thank you so much for the solution. So strange that it was the size of the image with regards to the canvas size. How did you find that problem?

6

Once I actually looked at your code in the more detail in the editor it just jumped out at me that you were mixing two coordinate systems (it’s sort of like mixing units when doing physics or chemistry, once you’ve been doing this for a while those things stand out).

1 Like