🎨 WASM Graphics App

Un'applicazione WebAssembly (WASM) scritta in Rust che utilizza Canvas 2D per creare grafica animata nel browser.

✨ Caratteristiche

• Animazioni fluide: Rendering a 60 FPS con cerchi animati
• Gradienti dinamici: Sfondo e cerchi con gradienti colorati
• Interfaccia moderna: Design responsive con effetti glassmorphism
• Controlli interattivi: Avvia/ferma animazione e ridimensionamento
• Performance ottimizzate: Compilato in WebAssembly per massime prestazioni

🚀 Come eseguire

Prerequisiti

• Rust (installato automaticamente)
• wasm-pack (installato automaticamente)
• Un server web locale

Installazione e build

# Navigare nella directory del progetto
cd wasm-graphics-app

# Compilare il progetto WASM
source $HOME/.cargo/env
wasm-pack build --target web --out-dir pkg

# Avviare un server web locale (esempio con Python)
python3 -m http.server 8000
# oppure con Node.js
# npx serve .

# Aprire http://localhost:8000 nel browser

Script di build automatico

# Script per build e avvio automatico
./build_and_run.sh

🛠️ Tecnologie utilizzate

• Rust: Linguaggio di programmazione principale
• WebAssembly: Per performance ottimali nel browser
• wasm-bindgen: Binding tra Rust e JavaScript
• web-sys: Binding per le API del browser
• Canvas 2D: Per il rendering grafico
• HTML5/CSS3: Per l'interfaccia utente

📁 Struttura del progetto

wasm-graphics-app/
├── src/
│   └── lib.rs              # Codice Rust principale
├── pkg/                    # Output WASM (generato)
├── index.html              # Interfaccia web
├── Cargo.toml              # Configurazione Rust
├── wasm-pack.toml          # Configurazione wasm-pack
├── iapp.config.json        # Configurazione progetto
└── README.md               # Questo file

🎮 Controlli

• Avvia Animazione: Inizia l'animazione dei cerchi
• Ferma Animazione: Ferma l'animazione corrente
• Ridimensiona: Cambia casualmente le dimensioni del canvas

🔧 Personalizzazione

Modificare l'animazione

Nel file src/lib.rs, puoi modificare:

• Velocità: Cambia time * 0.5 nella funzione render_frame
• Numero di cerchi: Modifica il loop for i in 0..5
• Colori: Cambia i valori dei gradienti
• Dimensioni: Modifica i parametri radius e arc

Aggiungere nuove forme

// Esempio: aggiungere un rettangolo
context.set_fill_style(&JsValue::from_str("#00ff00"));
context.fill_rect(x, y, width, height);

🐛 Debug

Per abilitare i log di debug:

console_log::init().expect("errore nell'inizializzazione dei log");

📦 Build per produzione

# Build ottimizzato per produzione
wasm-pack build --target web --out-dir pkg --release

🤝 Contribuire

1. Fork del repository
2. Crea un branch per la tua feature
3. Commit delle modifiche
4. Push al branch
5. Apri una Pull Request

📄 Licenza

Questo progetto è rilasciato sotto licenza MIT.

🙏 Ringraziamenti

• wasm-pack per gli strumenti WASM
• web-sys per i binding del browser
• La comunità Rust per l'ecosistema WebAssembly