I created an example with a filter (one picture overlays another)
Deployed work here: https://cranky-bassi-59e8b2.netlify.app/
To follow the cursor behind the mouse, I used the following code
const circle = new PIXI.Graphics()
.beginFill(0xFFFFFF)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
circle.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
focus = new PIXI.Sprite(texture);
focus.scale.set(1.5, 1.5);
function getMousePosition() {
return app.renderer.plugins.interaction.mouse.global;
}
let xVelocity = 0.1;
let yVelocity = 0.1;
let mousePosition = getMousePosition();
let speed = 11;
let angle = 45;
let moveTicker = PIXI.Ticker.shared;
moveTicker.autoStart = false;
moveTicker.add(() => {
mousePosition = getMousePosition();
let dx = (mousePosition.x - focus.x) - (focus.width / 2);
let dy = (mousePosition.y - focus.y) - (focus.height / 2);
angle = Math.atan2(dy, dx);
xVelocity = Math.cos(angle) * speed;
yVelocity = Math.sin(angle) * speed;
focus.x += xVelocity;
focus.y += yVelocity;
})
However, this function does not work correctly when the cursor is stationary (the focus twitches at the slow mouse speed). What I'm talking about can be seen on the deployed site
How can I remove this behavior?
Update (resolved):
Need just replace ticker code to
focus.x += .1 * (mousePosition.x - focus.x - (focus.width / 2));
focus.x = Math.round(100 * focus.x) / 100;
focus.y += .1 * (mousePosition.y - focus.y - (focus.height / 2));
focus.y = Math.round(100 * focus.y) / 100;