using a graphics buffer as an image mask

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.

Tagged:

Answers

  • edited May 2017

    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()

  • edited May 2017

    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);
        }
    
  • edited May 2017 Answer ✓

    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

  • edited May 2017

    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);
            }
    
  • also, thank you for your help! @GoToLoop

Sign In or Register to comment.