Moving an image within a mask with p5.js

feemcgill

Hello creative coders! I'm trying to move an image inside a mask with mouse position, but the mask stays stationary. I've figured out a way to do this using loadPixels and then updatePixels. My issue is that performance is quite choppy. I figured I'd reach out to the community to see if there might be a better way to achieve this. Any insight appreciated! Thanks!!!!

feemcgill

Forgot to attach my example: http://adp.bz/p5msk/

var ratio;
    var fsh, fsW;
    var masker;
    var bg, msk, fg;

    function preload() {
        bg = loadImage("bg.jpg");
        msk = loadImage("mask2.png");
        fg = loadImage("fg.jpg");

    }

    function setup() {
        createCanvas(windowWidth, windowHeight);
        ratio = fg.height / fg.width;
        //fsW = windowWidth + 200;
        //fsH = fsW * ratio;
        fsH = windowHeight + 200;
        fsW = fsH * 2;
        imageMode(CENTER);   
    }

    function draw() {
        background(255);
        tint(255, 255); 


        var mm = map(mouseX, 0, width, -100, 100);
        var mx = map(mouseX, 0, width, 100, -100);
        var mz = (width/2)+mx;

        image(bg, mz, height/2,fsW, fsH);

        fg.loadPixels();
        fg.updatePixels(mm, 0,fsW, fsH);
        fg.mask(msk);
        image(fg, width/2, height/2,fsW, fsH);
        fg.updatePixels(0, 0,fsW, fsH);

    }

    function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
        fsH = windowHeight + 200;
        fsW = fsH * 2;
    }