ngx-acuw
Version:
Angular components using WEBGL (threejs)
82 lines • 12 kB
JavaScript
import { Texture } from 'three';
export class TouchTexture {
constructor() {
this.size = 64;
this.maxAge = 120;
this.radius = 0.15;
this.trail = new Array();
this.initTexture();
}
/**
* Initializes the texture for the touch area
*/
initTexture() {
this.canvas = document.createElement('canvas');
this.canvas.width = this.canvas.height = this.size;
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = 'black';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.texture = new Texture(this.canvas);
this.canvas.id = 'touchTexture';
this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
}
/**
* Updates the trail
*/
update() {
this.clear();
// age points
this.trail.forEach((point, i) => {
point.age++;
// remove old
if (point.age > this.maxAge) {
this.trail.splice(i, 1);
}
});
this.trail.forEach((point, i) => {
this.drawTouch(point);
});
this.texture.needsUpdate = true;
}
clear() {
this.ctx.fillStyle = 'black';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
addTouch(px, py) {
let force = 0;
const last = this.trail[this.trail.length - 1];
if (last) {
const dx = last.x - px;
const dy = last.y - py;
const dd = dx * dx + dy * dy;
force = Math.min(dd * 10000, 1);
}
this.trail.push({ x: px, y: py, age: 0, force });
}
drawTouch(point) {
const pos = {
x: point.x * this.size,
y: (1 - point.y) * this.size
};
let intensity = 1;
if (point.age < this.maxAge * 0.3) {
intensity = this.easeOutSine(point.age / (this.maxAge * 0.3), 0, 1, 1);
}
else {
intensity = this.easeOutSine(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7), 0, 1, 1);
}
intensity *= point.force;
const radius = this.size * this.radius * intensity;
const grd = this.ctx.createRadialGradient(pos.x, pos.y, radius * 0.25, pos.x, pos.y, radius);
grd.addColorStop(0, `rgba(255, 255, 255, 0.2)`);
grd.addColorStop(1, 'rgba(0, 0, 0, 0.0)');
this.ctx.beginPath();
this.ctx.fillStyle = grd;
this.ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
this.ctx.fill();
}
easeOutSine(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91Y2gtdGV4dHVyZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1hY3V3L3NyYy9saWIvaW1hZ2UtYXMtcGFydGljbGVzL3NjcmlwdHMvdG91Y2gtdGV4dHVyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBR2hDLE1BQU0sT0FBTyxZQUFZO0lBVXZCO1FBQ0UsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksS0FBSyxFQUFTLENBQUM7UUFFaEMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDL0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUNuRCxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBNkIsQ0FBQztRQUNwRSxJQUFJLENBQUMsR0FBRyxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUM7UUFDN0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRS9ELElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRXhDLElBQUksQ0FBQyxNQUFNLENBQUMsRUFBRSxHQUFHLGNBQWMsQ0FBQztRQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLElBQUksQ0FBQztJQUNoRixDQUFDO0lBRUQ7O09BRUc7SUFDSCxNQUFNO1FBQ0osSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBRWIsYUFBYTtRQUNiLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQzlCLEtBQUssQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNaLGFBQWE7WUFDYixJQUFJLEtBQUssQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRTtnQkFDM0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO2FBQ3pCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUM5QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQ2xDLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEdBQUcsT0FBTyxDQUFDO1FBQzdCLElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQsUUFBUSxDQUFDLEVBQVUsRUFBRSxFQUFVO1FBQzdCLElBQUksS0FBSyxHQUFHLENBQUMsQ0FBQztRQUNkLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDL0MsSUFBSSxJQUFJLEVBQUU7WUFDUixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUN2QixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUN2QixNQUFNLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLENBQUM7WUFDN0IsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxHQUFHLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNqQztRQUNELElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsRUFBRSxFQUFFLEdBQUcsRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQVk7UUFDcEIsTUFBTSxHQUFHLEdBQUc7WUFDVixDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSTtZQUN0QixDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJO1NBQzdCLENBQUM7UUFFRixJQUFJLFNBQVMsR0FBRyxDQUFDLENBQUM7UUFDbEIsSUFBSSxLQUFLLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxFQUFFO1lBQ2pDLFNBQVMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7U0FDeEU7YUFBTTtZQUNMLFNBQVMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNsRztRQUVELFNBQVMsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDO1FBRXpCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLE1BQU0sR0FBRyxTQUFTLENBQUM7UUFDbkQsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEVBQUUsTUFBTSxHQUFHLElBQUksRUFBRSxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDN0YsR0FBRyxDQUFDLFlBQVksQ0FBQyxDQUFDLEVBQUUsMEJBQTBCLENBQUMsQ0FBQztRQUNoRCxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUMsRUFBRSxvQkFBb0IsQ0FBQyxDQUFDO1FBRTFDLElBQUksQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEdBQUcsR0FBRyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRU8sV0FBVyxDQUFDLENBQVMsRUFBRSxDQUFTLEVBQUUsQ0FBUyxFQUFFLENBQVM7UUFDNUQsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNqRCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUZXh0dXJlIH0gZnJvbSAndGhyZWUnO1xyXG5pbXBvcnQgeyBUcmFpbCB9IGZyb20gJy4vdHJhaWwnO1xyXG5cclxuZXhwb3J0IGNsYXNzIFRvdWNoVGV4dHVyZSB7XHJcbiAgLy8gVmFyaWFibGVzXHJcbiAgcHJpdmF0ZSBzaXplOiBudW1iZXI7XHJcbiAgcHJpdmF0ZSBtYXhBZ2U6IG51bWJlcjtcclxuICBwcml2YXRlIHJhZGl1czogbnVtYmVyO1xyXG4gIHByaXZhdGUgdHJhaWw6IFRyYWlsW107XHJcbiAgcHJpdmF0ZSBjYW52YXMhOiBIVE1MQ2FudmFzRWxlbWVudDtcclxuICBwcml2YXRlIGN0eCE6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRDtcclxuICBwdWJsaWMgdGV4dHVyZSE6IFRleHR1cmU7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgdGhpcy5zaXplID0gNjQ7XHJcbiAgICB0aGlzLm1heEFnZSA9IDEyMDtcclxuICAgIHRoaXMucmFkaXVzID0gMC4xNTtcclxuICAgIHRoaXMudHJhaWwgPSBuZXcgQXJyYXk8VHJhaWw+KCk7XHJcblxyXG4gICAgdGhpcy5pbml0VGV4dHVyZSgpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogSW5pdGlhbGl6ZXMgdGhlIHRleHR1cmUgZm9yIHRoZSB0b3VjaCBhcmVhXHJcbiAgICovXHJcbiAgaW5pdFRleHR1cmUoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNhbnZhcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xyXG4gICAgdGhpcy5jYW52YXMud2lkdGggPSB0aGlzLmNhbnZhcy5oZWlnaHQgPSB0aGlzLnNpemU7XHJcbiAgICB0aGlzLmN0eCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoJzJkJykgYXMgQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEO1xyXG4gICAgdGhpcy5jdHguZmlsbFN0eWxlID0gJ2JsYWNrJztcclxuICAgIHRoaXMuY3R4LmZpbGxSZWN0KDAsIDAsIHRoaXMuY2FudmFzLndpZHRoLCB0aGlzLmNhbnZhcy5oZWlnaHQpO1xyXG5cclxuICAgIHRoaXMudGV4dHVyZSA9IG5ldyBUZXh0dXJlKHRoaXMuY2FudmFzKTtcclxuXHJcbiAgICB0aGlzLmNhbnZhcy5pZCA9ICd0b3VjaFRleHR1cmUnO1xyXG4gICAgdGhpcy5jYW52YXMuc3R5bGUud2lkdGggPSB0aGlzLmNhbnZhcy5zdHlsZS5oZWlnaHQgPSBgJHt0aGlzLmNhbnZhcy53aWR0aH1weGA7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBVcGRhdGVzIHRoZSB0cmFpbFxyXG4gICAqL1xyXG4gIHVwZGF0ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuY2xlYXIoKTtcclxuXHJcbiAgICAvLyBhZ2UgcG9pbnRzXHJcbiAgICB0aGlzLnRyYWlsLmZvckVhY2goKHBvaW50LCBpKSA9PiB7XHJcbiAgICAgIHBvaW50LmFnZSsrO1xyXG4gICAgICAvLyByZW1vdmUgb2xkXHJcbiAgICAgIGlmIChwb2ludC5hZ2UgPiB0aGlzLm1heEFnZSkge1xyXG4gICAgICAgIHRoaXMudHJhaWwuc3BsaWNlKGksIDEpO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuXHJcbiAgICB0aGlzLnRyYWlsLmZvckVhY2goKHBvaW50LCBpKSA9PiB7XHJcbiAgICAgIHRoaXMuZHJhd1RvdWNoKHBvaW50KTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMudGV4dHVyZS5uZWVkc1VwZGF0ZSA9IHRydWU7XHJcbiAgfVxyXG5cclxuICBjbGVhcigpOiB2b2lkIHtcclxuICAgIHRoaXMuY3R4LmZpbGxTdHlsZSA9ICdibGFjayc7XHJcbiAgICB0aGlzLmN0eC5maWxsUmVjdCgwLCAwLCB0aGlzLmNhbnZhcy53aWR0aCwgdGhpcy5jYW52YXMuaGVpZ2h0KTtcclxuICB9XHJcblxyXG4gIGFkZFRvdWNoKHB4OiBudW1iZXIsIHB5OiBudW1iZXIpOiB2b2lkIHtcclxuICAgIGxldCBmb3JjZSA9IDA7XHJcbiAgICBjb25zdCBsYXN0ID0gdGhpcy50cmFpbFt0aGlzLnRyYWlsLmxlbmd0aCAtIDFdO1xyXG4gICAgaWYgKGxhc3QpIHtcclxuICAgICAgY29uc3QgZHggPSBsYXN0LnggLSBweDtcclxuICAgICAgY29uc3QgZHkgPSBsYXN0LnkgLSBweTtcclxuICAgICAgY29uc3QgZGQgPSBkeCAqIGR4ICsgZHkgKiBkeTtcclxuICAgICAgZm9yY2UgPSBNYXRoLm1pbihkZCAqIDEwMDAwLCAxKTtcclxuICAgIH1cclxuICAgIHRoaXMudHJhaWwucHVzaCh7IHg6IHB4LCB5OiBweSwgYWdlOiAwLCBmb3JjZSB9KTtcclxuICB9XHJcblxyXG4gIGRyYXdUb3VjaChwb2ludDogVHJhaWwpOiB2b2lkIHtcclxuICAgIGNvbnN0IHBvcyA9IHtcclxuICAgICAgeDogcG9pbnQueCAqIHRoaXMuc2l6ZSxcclxuICAgICAgeTogKDEgLSBwb2ludC55KSAqIHRoaXMuc2l6ZVxyXG4gICAgfTtcclxuXHJcbiAgICBsZXQgaW50ZW5zaXR5ID0gMTtcclxuICAgIGlmIChwb2ludC5hZ2UgPCB0aGlzLm1heEFnZSAqIDAuMykge1xyXG4gICAgICBpbnRlbnNpdHkgPSB0aGlzLmVhc2VPdXRTaW5lKHBvaW50LmFnZSAvICh0aGlzLm1heEFnZSAqIDAuMyksIDAsIDEsIDEpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgaW50ZW5zaXR5ID0gdGhpcy5lYXNlT3V0U2luZSgxIC0gKHBvaW50LmFnZSAtIHRoaXMubWF4QWdlICogMC4zKSAvICh0aGlzLm1heEFnZSAqIDAuNyksIDAsIDEsIDEpO1xyXG4gICAgfVxyXG5cclxuICAgIGludGVuc2l0eSAqPSBwb2ludC5mb3JjZTtcclxuXHJcbiAgICBjb25zdCByYWRpdXMgPSB0aGlzLnNpemUgKiB0aGlzLnJhZGl1cyAqIGludGVuc2l0eTtcclxuICAgIGNvbnN0IGdyZCA9IHRoaXMuY3R4LmNyZWF0ZVJhZGlhbEdyYWRpZW50KHBvcy54LCBwb3MueSwgcmFkaXVzICogMC4yNSwgcG9zLngsIHBvcy55LCByYWRpdXMpO1xyXG4gICAgZ3JkLmFkZENvbG9yU3RvcCgwLCBgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpYCk7XHJcbiAgICBncmQuYWRkQ29sb3JTdG9wKDEsICdyZ2JhKDAsIDAsIDAsIDAuMCknKTtcclxuXHJcbiAgICB0aGlzLmN0eC5iZWdpblBhdGgoKTtcclxuICAgIHRoaXMuY3R4LmZpbGxTdHlsZSA9IGdyZDtcclxuICAgIHRoaXMuY3R4LmFyYyhwb3MueCwgcG9zLnksIHJhZGl1cywgMCwgTWF0aC5QSSAqIDIpO1xyXG4gICAgdGhpcy5jdHguZmlsbCgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBlYXNlT3V0U2luZSh0OiBudW1iZXIsIGI6IG51bWJlciwgYzogbnVtYmVyLCBkOiBudW1iZXIpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIGMgKiBNYXRoLnNpbih0IC8gZCAqIChNYXRoLlBJIC8gMikpICsgYjtcclxuICB9XHJcbn1cclxuIl19