Moving an image within a mask with p5.js

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!!!!

Tagged:

Answers

  • edited July 2016

    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;
        }
    
Sign In or Register to comment.