Im trying to clone this website : https://art4globalgoals.com/
Well, I’ve implement scratch card as below, but I can’t figure out how to automatically
trigger dragging event on screen, and erase it. I’ve read Pixi document about renderer or sprite, but couldn’t find idea about it….
I’ll be very grateful if you guys give any hint or suggestion or examples about it..
Also, I want to rotate my brush depending of my movement of mouse.
The idea was to create a vector of my mouse movement, and make a dot product with vector of (1,0) then get the angle, then apply rotation by angle. but whenever I apply angle to it, result seems chaotic.
below , is my code, and results(without rotation applied , with rotation applied)
import * as PIXI from 'pixi.js';
import { Point } from '@pixi/math';
let currentVector = new Point(1, 0);
currentVector = currentVector.set(1, 0);
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 brushTexture2 = app.loader.resources.bristle2.texture;
const brush = new PIXI.Sprite(brushTexture);
// const brush2 = new PIXI.Sprite(brushTexture2);
brush.width = brushWidth;
brush.height = brushHeight;
brush.anchor.set(0.5, 0.5);
// brush2.width = brushWidth;
// brush2.height = brushHeight;
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;
let bristle2Render = false;
let vector;
function pointerMove(event) {
if (dragging) {
brush.position.copyFrom(event.data.global);
brush.width += 1;
const vx = event.data.global.x - currentVector.x;
const vy = event.data.global.y - currentVector.y;
vector = new Point(vx, vy);
vector = vector.set(vx, vy);
const dotProd = vector.x;
const magnitude = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
const angle = Math.acos(dotProd / magnitude);
currentVector = currentVector.set(event.data.global.x, event.data.global.y);
app.renderer.render(
brush,
{
renderTexture,
transform: new PIXI.Matrix().rotate(angle),
clear: false
},
false,
null,
false
);
// if (bristle2Render) {
// brush2.position.copyFrom(event.data.global);
// app.renderer.render(brush2, renderTexture, false, null, false);
// }
// if (brush.width === 100) {
// dragging = false;
// brushWidth = 0;
// }
}
}
function pointerDown(event) {
dragging = true;
pointerMove(event);
}
function pointerUp(event) {
dragging = false;
bristle2Render = false;
brush.width = brushWidth;
}
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;
});
};
