Is it possible to do a rotation animation with image masks?

jshaw3

Hey all,

I was looking at doing some image animation and transitions with image masks. The effect I'm working towards is having an image mask rotate depending on where a user's mouse is positioned around the border of a circle. So as the user moves their mouse around the circle's border the image mask rotates revealing a previously covered part of the bottom image. To do this, the image mask would need to be able to rotate dynamically based on the user's interactions with the sketch. Being able to rotate the image mask would prevent having to create a mask for every possible angle of the circle.

From what I could find, there wasn't a way to rotate or transform an image mask before it is applied to an image in a P5.js sketch. Is this possible with the current p5.js library?

Referencing the image mask example from the documentation is there a solution to rotate the preloaded image before you apply it to the image?

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Would be something like the following sudo code...

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    // SUDO CODE:
    // =======
    // Rotate the maskImage 90degrees via rotate(PI/2.0);
    // Apply the newly rotated mask to the image
    // END OF SUDO Code
    // =======
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Thanks!

GoToLoop

• Class p5.Image doesn't have method rotate(): https://p5js.org/reference/#/p5.Image
• So you're gonna need a p5.Graphics instead.
• Use createGraphics() to get 1: https://p5js.org/reference/#/p5/createGraphics

GoToLoop

Here's some snippet to help you out getting started: :bz

// Forum.Processing.org/two/discussion/26164/
// is-it-possible-to-do-a-rotation-animation-with-image-masks#Item_2

// GoToLoop (2017-01-29)

"use strict";

const FOLDER = 'assets/';
let photo, cloned, masker, rotated;

function preload() {
  photo = loadImage(FOLDER + 'rockies.jpg', img => {
    cloned = img.get();
    cloned.loadPixels();
    img.loadPixels();
  });

  masker = loadImage(FOLDER + 'mask2.png', img => {
    rotated = createGraphics(img.width, img.height);
    rotated.image(img, 0, 0);
  });
}

function resetPhoto() {
  cloned.pixels.set(photo.pixels);
  cloned.updatePixels();
}

function rotateMask(rot=0) {
  rotated.clear().resetMatrix().rotate(rot).image(masker, 0, 0);
}