Il sistema "Ghostati" utilizza un'architettura a plugin modulari pensata per separare il nucleo di tracciamento facciale dagli effetti visivi (i "Ghostyles").
Tecnicamente, l'engine principale è una web app Vanilla JS che inizializza la webcam, e utilizza face-api.js per inferire in tempo reale i Landmarks a 68 punti del viso. Il loop di rendering è gestito autonomamente per garantire performance scalabili (FPS controllati).
Og intanto, l'engine richiama l'effetto attivo (il plugin). Ogni Ghostyle è un ES Module (.js) caricato dinamicamente via import(url). Questo significa che i Ghostyle possono essere creati come file locali indipendenti, o addirittura hostati su server remoti e passati via URL.
L'engine fornisce al plugin due cose: le coordinate del volto aggiornate e le API globali offerte da window.Ghostati per semplificare drasticamente la geometria e il disegno su un Canvas dedicato (livello di overlay).
Un plugin Ghostyle per funzionare deve unicamente esportare un paio di funzioni specifiche (gli "Event Hooks"). Questo snippet di codice rappresenta lo scheletro di base per cominciare a sviluppare.
// @name Effetto Base
/**
* [BLOCCO INIT]
* Funzione di inizializzazione locale (Opzionale).
* Chiamata *una sola volta* quando il Ghostyle viene importato in memoria.
*/
export function onInit() {
Ghostati.log('Effetto base caricato correttamente!', 'BASE_STYLE');
}
/**
* [BLOCCO DRAW]
* Funzione principale di rendering.
* L'Engine richiama questa funzione iterativamente nel RAF loop.
*
* @param {CanvasRenderingContext2D} ctx - Il contesto 2D nativo.
* @param {faceapi.FaceLandmarks68} landmarks - Collezione dei landmark spaziali del viso.
* @param {faceapi.Box} box - Il Bounding Box che riquadra tutto il viso.
*/
export function onDraw(ctx, landmarks, box) {
// 1. Estrazione Segmenti (Array di {x,y})
const leftEye = landmarks.getLeftEye();
const rightEye = landmarks.getRightEye();
// 2. Logging temporaneo (opzionale) o manipolazione
// Attenzione: usare Ghostati.log qui scriverà messaggi ad alto rate / frame.
// 3. Staging via ctx standard
ctx.fillStyle = 'rgba(255, 122, 122, 0.45)';
ctx.strokeStyle = 'rgba(255, 122, 122, 0.9)';
// 4. Rendering tramite libreria Helper
Ghostati.drawClosedPath(ctx, leftEye, ctx.fillStyle, ctx.strokeStyle, 2);
Ghostati.drawClosedPath(ctx, rightEye, ctx.fillStyle, ctx.strokeStyle, 2);
}
/**
* [BLOCCO CLEAR]
* Funzione di smontaggio / teardown (Opzionale).
* L'Engine svuota automaticamente il Canvas. Usalo se hai timer o memorie da annullare.
*/
export function onClear(ctx) {
console.log("Ripristino pulizia plugin base.");
}
// @name [Nome] è letta dall'Engine in fase di fetch come fallback se il plugin non ha un id chiaro o necessita di una label UI amichevole. Non è strettamente javascript-eseguibile, ma va in cima al modulo!
export function onInit)
È l'Entry Point primario eseguito all'iniezione nel DOM/Browser dal Plugin Manager. Idealmente usato per scaricare asset aggiuntivi o notificare l'interfaccia via Ghostati.log. Può essere asincrono (async/await).
export function onDraw)
È il cuore pulsante del tuo scrip AR. L'argomento landmarks espone i metodi standard di face-api per ottenere array di coordinate {x,y} suddivise semanticamente: getLeftEye(), getJawOutline(), getNose(), getMouth(). È tutto disegnato su un livello trasparente perfettamente riallineato sulla webcam.
Ghostati
Piuttosto che calcolare le curve Bezier punto per punto, usa le Utility messe a disposizione nell'interfaccia window.Ghostati come drawClosedPath. Ci sono anche funzioni di morphing sofisticate come Ghostati.expandEyePolygon o Ghostati.drawEyeWing per riprodurre eyeliner e sagome senza sforzo matematico.
export function onClear)
L'Engine passa a questo Hook prima di effettuare uno "switch" verso un altro plugin, garantendovi un life-cycle appropriato in cui eliminare custom listeners o fermare calcoli costosi derivati se necessario.
Ghostati non si limita ad applicare il trucco AR in modo cosmetico, ma include uno strumento di Diagnostica e Analisi delle Vulnerabilità progettato per valutare la reale efficacia del Ghostyle nel neutralizzare gli algoritmi di Facial Recognition (CV Dazzle).
face-api) a scansionare questa nuova immagine sintetica per vedere se riesce ad estrarre la stessa identità.rgba() del tuo codice (non li forza al 100% di opacità). Questo significa che se usi colori troppo tenui, c'è un'alta probabilità che il sistema biometrico riesca a "vedere attraverso" il tratto. Nell'archivio locale a schermo è annotata in tempo reale "l'Opacità stimata" del trucco.