How to erase current render sprite

[dovigod]

Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en 

So, I tried to clone the brush masking effect.

I succeed to make a mask, make brush effect.

The problem is that, I can't remove current brush sprite. 

I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology)....

Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this?

````

import * as PIXI from 'pixi.js';

import { Point } from '@pixi/math';

 

const screenSize = {

width: window.innerWidth,

height: window.innerHeight

};

let brushWidth = (window.innerHeight / window.innerWidth) * 150;

let brushHeight = (window.innerHeight / window.innerWidth) * 200;

 

const app = new PIXI.Application({

width: window.innerWidth,

height: window.innerHeight,

resolution: window.devicePixelRatio,

autoDensity: true

});

 

document.body.appendChild(app.view);

 

app.loader

.add('background', '/jpeg/mask.jpeg')

.add('mask', '/png/effel-gray.png')

.add('bristle1', '/png/brush6.png')

.add('bristle2', '/png/bristle2.png')

.load(() => {

setup();

});

 

const setup = () => {

const brushTexture = app.loader.resources.bristle1.texture;

 

 

const brush = new PIXI.Sprite(brushTexture);

 

 

 

brush.width = brushWidth;

brush.height = brushHeight;

brush.anchor.set(0.5,0.5);

 

const backgroundTexture = app.loader.resources.background.texture;

const maskTexture = app.loader.resources.mask.texture;

const background = new PIXI.Sprite(backgroundTexture);

background.x = app.renderer.screen.width / 2;

background.y = app.renderer.screen.height / 2;

background.anchor.x = 0.5;

background.anchor.y = 0.5;

background.width = window.innerWidth;

background.height = window.innerHeight;

 

const mask = new PIXI.Sprite(maskTexture);

mask.width = app.renderer.screen.width;

mask.height = app.renderer.screen.height;

mask.x = app.renderer.screen.width / 2;

mask.y = app.renderer.screen.height / 2;

mask.anchor.x = 0.5;

mask.anchor.y = 0.5;

mask.width = window.innerWidth;

mask.height = window.innerHeight;

 

app.stage.addChild(mask);

app.stage.addChild(background);

 

const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height);

 

const renderTextureSprite = new PIXI.Sprite(renderTexture);

 

app.stage.addChild(renderTextureSprite);

 

background.mask = renderTextureSprite;

 

app.stage.interactive = true;

app.stage.on('pointerdown', pointerDown);

app.stage.on('pointerup', pointerUp);

app.stage.on('pointermove', pointerMove);

 

let dragging = false;

 

const originVector = new Point(1, 0);

let vector;

function pointerMove(event) {

if (dragging) {

brush.position.copyFrom(event.data.global);

 

const originPos = {

x : event.data.global.x - window.innerWidth / 2,

y : -(event.data.global.y - window.innerHeight / 2)

}

 

 

 

const vx = originPos.x;

const vy = originPos.y;

 

vector = new Point(vx, vy);

vector = normalizeVector(vector);

 

const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y);

 

const angle = Math.acos(dotProd);

const rotationMatrix = new PIXI.Matrix()

rotationMatrix.rotate(angle);

brush.rotation = angle;

 

app.renderer.render(

brush,

{

renderTexture,

clear: false

},

false,

null,

false

);

 

 

}

}

 

function pointerDown(event) {

dragging = true;

pointerMove(event);

}

 

function pointerUp(event) {

dragging = false;

brush.width = brushWidth;

console.dir(app.renderer)

app.renderer.managedTextures[4].destroy();

 

 

 

}

 

window.addEventListener('resize', () => {

screenSize.width = window.innerWidth;

screenSize.height = window.innerHeight;

 

app.renderer.resize(window.innerWidth, window.innerHeight);

app.renderer.stage.width = window.innerWidth;

app.renderer.stage.height = window.innerHeight;

});

};

 

const getMagnitude = (x , y) => {

return Math.sqrt(x*x + y*y);

}

 

const normalizeVector = (vector) =>{

const magnitude = getMagnitude(vector.x , vector.y);

vector.x /= magnitude;

vector.y /= magnitude;

 

return vector;

}

`````