using a graphics buffer as an image mask

bmoren

Is something like this even possible?

var m;
var i;

function setup() {
  createCanvas(600,600)
  m = createGraphics(600,600)
  m.ellipse(m.width/2,m.height/2,50,50)
  i = loadImage('unnamed.jpg')

}

function draw() {
  i.mask(m)
  image(i,0,0)
}

I get a p5.js:14713 Uncaught TypeError: Cannot read property 'width' of undefined error when I try this.

GoToLoop

https://p5js.org/reference/#/p5/preload

https://forum.Processing.org/two/discussion/21981/p5-js-using-mask-on-creategraphics-object

bmoren

shouldn't I be able to do something like this with get()

    var m;
    var i;

    function preload(){
      i = loadImage('unnamed.jpg')
      m = createGraphics(600,600)
      m.background(0,0)
      m.fill(0)
      m.ellipse(m.width/2,m.height/2,50,50)
    }

    function setup() {
      createCanvas(600,600)
    }

    function draw() {
      i.mask( m.get() )
      image(i,0,0)
      // image(m,0,0)
    }

Im only getting errors when trying your suggestion of ( masked = original.get() ).mask(masker); when using with a mix of a loadImage() and createGraphics()

bmoren

This is the idea, but it throws all sorts of errors :)

    var img;
    var imgClone;

    var mk;

    function setup() {
        createCanvas(400, 400);

        img = loadImage('unnamed.jpg')
        // img = createGraphics(200, 200);
        // img.ellipse(100, 100, 100, 100);

        mk = createGraphics(200, 200);
        mk.rect(0, 0, 100, 100);

        ( imgClone = img.get() ).mask( mk.get() );
    }

    function draw() {
        background(200);
        image(imgClone, 0, 0);
    }

GoToLoop

Have you actually paid attention to preload() is for?
Have you visited the online sketch mentioned on the other forum thread?

https://ThimbleProjects.org/gotoloop/97931/sketch.js
https://ThimbleProjects.org/gotoloop/97931

bmoren

yes, I am aware of what preload does. As you can see from my first example, I got mixed up on the second! I've got to say, you should be able to pass the createGraphics() instance with a .get() straight into a mask() on the original image without having to get its pixels too. since loadImage() makes a p5.image and mask is a function on that, and get() returns a p5.image

this is a working code snippet for future reference for anyone.

        var original, masker, masked;

        function preload() {
          original = loadImage('unnamed.jpg');
          masker = createGraphics(600,600)
          masker.background(0,0)
          masker.noStroke()
          masker.fill(0)
          masker.ellipse(masker.width/2,masker.height/2,50,50)
        }

        function setup() {
          createCanvas(600, 600);
          background(255)
          masked = original.get()
          masked.mask(masker.get());
        }

        function draw() {
          image(masked, 0,0,600,600);
        }

bmoren

also, thank you for your help! @GoToLoop