So I’m creating this animated character who needs to have their pupils stay inside the whites of their eyes. Since you can’t use mask() on a graphics object, I have to convert the pupils to an image using createImage and copy(), and then apply the mask() function. My code was running buttery smooth with pretty much no lag, but the moment I added this tiny bit of masking code, the framerate started stuttering. Now, I’ve optimized this as much as I can, the only time I’m masking the eyes are when the eyes are actually moving and need to be redrawn, but this still creates a noticeable slowdown and jittery movements that were not present before. There has got to be a better solution to this.
This is the code that is causing the slowdown and it is run every frame while the pupils are moving.
let pupils = gc.pupils.cnv; // the createGraphics object for the pupils
let whites = gc.eyes.cnv; // the createGraphics object for the whites
let pupilsImg = createImage(pupils.width, pupils.height);
pupilsImg.copy(pupils, 0, 0, pupils.width, pupils.height, 0, 0, pupils.width, pupils.height);
pupilsImg.mask(whites);
image(whites, 0, 0);
image(pupilsImg, 0, 0);
If there is not another way to create like a clipping mask in p5js for graphics, im going to pull my hair out lol. Maybe is there some sort of hacky html canvas thing i can try?