Simulazione sull’espansione del contagio da Coronavirus (COVID-19)

Se stai cercando informazioni sul Coronavirus (COVID-19) ti raccomando di visitare i seguenti siti ufficiali:

Informazioni sul Coronavirus in Italia (Ministero della Salute)

Informazioni sul Coronavirus nel mondo (Organizzazione Mondiale della Sanità)

Panoramica delle condizioni del Coronavirus (Organizzazione Mondiale della Sanità)

Domande e risposte sul Coronavirus (Organizzazione Mondiale della Sanità)

Io non sono un medico e il presente articolo è stato ispirato da quello pubblicato sul The Whashington Post: Why outbreaks like coronavirus spread exponentially, and how to “flatten the curve” 

Quello che mi interessa in questa sede è dare uno spunto di programmazione a tutti quelli che, come me, ora sono chiusi in casa ed hanno voglia di ingannare il tempo con qualcosa di diverso dal solito (insomma, buttandosi a fare un po’ di programmazione!).

Spero che questo sia anche un ottimo esempio del perché, in questo momento, dobbiamo fare di tutto per restare il più possibile a casa ed evitare il contatto con gli altri, per la nostra e la loro salute, anche se sono nostri familiari o amici.

Fatte queste premesse arriviamo a noi: quello che vogliamo fare è costruire un simulatore, similmente a quanto dimostrato dal The Whashington Post, su come si possa espandere un’epidemia e quanto sia utile ridurre al minimo l’interazione tra i vari membri della popolazione.

Il simulatore è costruito interamente in JavaScript utilizzando l’elemento canvas del HTML5.

La versione interattiva del simulatore, realizzato come illustrato nell’articolo, si trova in fondo all’articolo

Quello che vogliamo costruire è un simulatore come questo di seguito:

I parametri in input che vogliamo passare al simulatore saranno:

  1. la popolazione totale (800 nel mio caso)
  2. il numero di malati iniziali (ne basta anche solo 1)
  3. il numero di quelli che restano fermi
  4. il tempo di guarigione in millisecondi (3000 nel mio caso)

Giocando un po’ con il simulatore ci accorgeremo subito del perché restare a casa è in questo momento fondamentale.

Partendo dai parametri precedenti e impostando a 0 il numero di quelli fermi otterremo una curva simile alla seguente:

In questo caso il contagio ha raggiunto un picco massimo del 81% della popolazione, infettando tutti quanti alla fine della simulazione. Nella realtà questo picco rappresenta il massimo impatto sul sistema sanitario, che nella realtà sarebbe al collasso se dovesse avvenire qualcosa di simile.

Se aumentiamo il numero della popolazione che sta ferma (200 individui, ovvero il 25%) abbiamo una curva simile alla seguente:

Notiamo che il picco massimo è sceso leggermente, arrivando al 68%, ma restando comunque molto alto.

Attuando misure più restrittive e fermando il 75% della popolazione, ossia 600 individui su 800, avremo una curva come la seguente:

Il picco si è dimezzato in questo caso, arrivando ad un massimo del 39%. Con misure ancora più restrittive, arrivando a fermare 700 individui, quindi l’87,5% della popolazione, si arriva a picchi ancora inferiori, ma non inesistenti (si parla del 21%):

Questo modello rappresenta, sebbene in linea di massima, molto bene la situazione attuale. Le misure restrittive servono principalmente per evitare il collasso del sistema sanitario e dare la possibilità ai medici di occuparsi di tutti quanti i pazienti più gravi, cosa che in caso contrario sarebbe impossibile. Il contagio allungherà così la sua presenza nel tempo, ma verrà anche abbattuto il suo impatto sulla società.

Inutile dire come questa simulazione sia molto approssimativa e non tiene conto di altri fattori, tra il quale anche il decesso dei malati.

Detto tutto questo arriviamo al codice vero e proprio. Anzitutto creiamo l’interfaccia in HTML nel modo seguente:

Procediamo adesso con il codice in JavaScript, che riporto di seguito con i commenti all’interno del codice:

Infine riporto di seguito l’esempio funzionante, per chiunque lo volesse testare al volo (inserisci i parametri e premi INIZIA):

Popolazione Malati iniziali Fermi T. guarigione

Con un po’ di pazienza e qualche altro accorgimento (per esempio che i pallini non possano essere generati fuori dalle pareti) si può implementare la simulazione per avere anche diverse zone isolate.In questo caso notiamo come una zona isolata aiuti ulteriormente a ridurre il numero di contagiati e mantenere anche parte della popolazione sana, benché nessuno stia fermo.

Per costruire la zona isolata possiamo predisporre le pareti nel modo seguente:

Dobbiamo inoltre prendere qualche altro accorgimento, ma questo lo lascio per chi ha voglia di provarci per conto proprio. 🙂

Vedi articolo

[javascript] Realizzare un gioco di carte tipo Memory utilizzando jQuery

Obiettivo: realizzare un semplice gioco di carte tipo Memory, utilizzando JavaScript e il framework jQuery.

Per chi non conoscesse il Memory, il gioco consiste nel cercare di indovinare le coppie di carte uguali. All’inizio possono venir mostrate tutte le carte (se vogliamo dare un’aiuto iniziale) che poi vengono coperte; a quel punto si tirano su due carte per volta per vedere se sono uguali: se lo sono le lasciamo scoperte, altrimenti le ricopriamo e procediamo col sollevare un’altra coppia e così via.

La versione giocabile del gioco, realizzato come illustrato nell’articolo, si trova in fondo all’articolo

Il gioco può essere elaborato in diverse varianti, a fini di questo semplice esercizio prendiamo in considerazione le seguenti regole:

  1. Al primo turno vengono mostrate per un attimo tutte le carte, dopodiché vengono nascoste
  2. Quando il giocatore solleva due carte uguali queste vengono lasciate scoperte e vengono assegnati dei punti
  3. Se le carte non sono uguali le ricopriamo nuovamente
  4. Per ogni coppia di carte scoperte assegniamo dei punti, determinati anche in base allo scorrere del tempo (prima si scoprono e più punti si guadagnano); diamo un punteggio maggiorato se le carte vengono trovate uguali in sequenza
  5. Una volta che tutte le carte sono state scoperte il gioco finisce

Prima di procedere oltre nello sviluppo del programma vediamo di cosa avremo bisogno (e cosa ho utilizzato):

Detto questo il risultato che vogliamo ottenere sarà simile a questo qua:

Costruiamo adesso l’idea del programma, che andremo a sviluppare come una singola classe in JavaScript che conterrà tutte le varie funzioni.

Il funzionamento lo potremmo riassumere in questo modo:

Cominciamo quindi costruendo la nostra pagina in HTML che conterrà lo script, per farla utilizziamo il prototipo base di Bootstrap nel modo seguente:

Alla riga 15 abbiamo il pezzo di codice che riguarda il contenitore del gioco, nel mio caso un div. Questa parte si ricollega a quella direttamente utilizzata nel javascript, nel file carte.js.

Affinché la classe funzioni in questo modo dobbiamo far sì che il costruttore accetti per argomento un dizionario e lo utilizzi per parametrizzare le opzioni dell’oggetto. Cominciamo quindi costruendo anche la nostra classe nel modo seguente:

Nel nostro costruttore dichiareremo le impostazioni come una variabile globale this.impostazioni = {}. Faccio notare che, a differenza di altri linguaggi di programmazione, le variabili (eccettuati i casi dei getter e dei setter) non possono essere dichiarate a livello di classe, ma esclusivamente dentro i metodi. Il prefisso this fa sì che la variabile sia globale, sebbene con alcune specifiche eccezioni che vedremo.

Implementiamo ulteriormente la classe nel modo seguente:

Per far sì che le impostazioni dell’utente si sovrappongano alle impostazioni predefinite utilizziamo l’istruzione this.impostazioni = Object.assign({},this.impostazioni,impostazioni). In questo modo uniamo i due dizionari in un nuovo dizionario vuoto e trascriviamo tutto su this.impostazioni. In questo caso è molto importante l’ordine, difatti this.impostazioni viene assegnato prima di impostazioni, dizionario che contiene la parametrizzazione a livello utente. Così le nuove impostazioni andranno a sovrascrivere quelle precedenti, creando il dizionario definitivo delle impostazioni.

Adesso andiamo a creare il metodo di caricamento nella maniera seguente:

Qui stiamo utilizzando due metodi che non abbiamo ancora dichiarato, ovvero this.creazioneStile() e this.creazioneHome(). Con this.contenitore = $(this.impostazioni.contenitore); intercettiamo il contenitore predefinito in precedenza e applichiamo, successivamente gli stili di base. Avrei potuto utilizzare anche un file CSS separato per la parametrizzazione degli stili, ma allo scopo di esercizio ho preferito fare tutto tramite JavaScript all’interno della classe stessa.

Delle istruzioni precedenti è molto importante passare l’opzione this.contenitore.css("position", "relative"); che definirà la posizione del contenitore come relativa. In questo modo potremo utilizzare internamente i riferimenti assoluti per posizionare i vari elementi. Senza la dichiarazione di posizione relativa in modo esplicito, gli elementi interni si sarebbero posizionati rispetto al primo oggetto genitore del contenitore che abbia una posizione dichiarata esplicitamente.

Per il metodo this.creazioneStile() procediamo nel modo seguente:

Sostanzialmente creiamo una sezione <style></style> all’interno del codice dentro la quale andremo ad aggiungere tutti gli stili. Per evitare sovrapposizioni esterne al contenitore anteponiamo ad ogni stile il descrittore in CSS del contenitore con this.impostazioni.contenitore. Infine aggiungiamo il gruppo di stile nell’intestazione con l’istruzione $('html > head').append(stile);

Dentro questo metodo procederemo ad aggiungere via via i vari stili di cui abbiamo bisogno.

Per il metodo this.creazioneHome() procediamo aggiungendo la seguente porzione di codice:

In questo metodo andremo a creare this.creazioneGioco() che verrà richiamato al click su START nella schermata di inizio. Quello che mi interessa in particolare durante questo passaggio è l’utilizzo di this. All’interno dell’evento click this si riferisce all’elemento oggetto del click. Di conseguenza non è più utilizzabile per riferirsi agli oggetti della classe. Per poterlo utilizzare dobbiamo riassegnarlo ad una variabile locale nel metodo genitore, come per esempio var questo = this;

In questo modo dentro l’evento di click potremo utilizzare l’istruzione questo.creazioneGioco(); che richiama un metodo della classe medesima (che dobbiamo ancora creare).

Per la creazione del gioco procediamo nel modo seguente:

Siccome il gioco potrà essere creato diverse volte, per esempio quando si riavvia durante la partita, oppure dopo che si è vinto, ci dobbiamo assicurare che tutte le variabili di gioco vengano inizializzate, ed eventualmente reimpostate, qui.

I metodi che mi interessano in particolare sono:

  1. this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini); che ci consente di creare le 16 carte di cui avremo bisogno. Ricordiamoci che le carte sono in coppie quindi le 8 carte iniziali dovranno essere duplicate. Per farlo voglio unire lo stesso dizionario, dentro this.impostazioni.immagini, a se medesimo. Affinché la funzione $.merge non crei un puntatore sul vettore, continuando ad aggiungere le solite immagini ad ogni riavvio successivo e quindi scombinando il gioco, bisogna usare il trucco di chiamare il metodo con un vettore vuoto a cui viene accodato il vettore originale, con l’istruzione $.merge([], this.impostazioni.immagini). Adesso abbiamo creato un vettore completamente nuovo, che potremo poi accodare al solito vettore di prima ripetendo il passaggio una seconda volta. Se non si procede in questo modo al primo riavvio del gioco si rischieranno di avere 3 o 4 carte dello stesso tipo, perché in totale non saranno più 16 ma 32, poi 48 ecc.
  2. this.carte.sort(() => Math.random() - 0.5); che ci permette di ordinare casualmente le carte. Non è un metodo particolarmente efficiente e non produce nemmeno un livello di casualità particolarmente affidabile. Per generare una password non sarebbe quindi molto opportuno, ma per gli scopi che ci servono ai fini del gioco va benissimo, specialmente per la sua brevità di scrittura. Questa scrittura è anche la medesima di this.carte.sort(function(){ return Math.random() - 0.5; });
  3. $('#combo'+this.impostazioni.idunivoco).hide(); che nasconde il contenitore delle combo (poi vedremo meglio)
  4. for(var i = 0; i < 16; i++ ) this.creaCarta(i); che inserisce le carte nell’ordine casuale determinato dal primo punto

Procediamo adesso con la creazione del menu utilizzando this.creazioneMenu();

Faccio notare che il metodo di “restart” è praticamente identico al metodo che abbiamo visto per lo “start” nella home. Stessa procedura. Nel menu abbiamo aggiunto una voce per il punteggio corrente, una per il tempo trascorso e il tasto che consenta di ricominciare.

La creazione del timer implicherà due diversi passaggi, nella maniera seguente:

Il metodo contatoreTimer() si richiamerà su se stesso ogni 500 millisecondi su se stessa, aggiornando lo stato del gioco e dichiarando infine la conclusione dello stesso. In tale contesto andremo anche a calcolare il tempo trascorso e ad aggiornarlo nella visualizzazione.

Arriviamo adesso alla parte più importante, quella dove creiamo le carte e definiamo il funzionamento del gioco. Ricordiamoci che ogni carta dovrà essere cliccabile.

Per gestire la rotazione delle carte stiamo utilizzando jQuery Flip, che ci permette sostanzialmente di ruotare gli elementi sia manualmente che ad ogni click.

Per ogni carta, procedendo in ordine, definiamo quindi le singole proprietà di CSS e attribuiamo la caratteristica flip. Dopodiché al click su ogni carta procediamo con l’impostazione della struttura di gioco. Anzitutto verifichiamo che il gioco sia iniziato e che la carta sia cliccabile. Se la carta è giocabile e non è ancora stata aperta, apriamola con $(this).flip(false). Leggiamo il nome della carta con var cartagiocata = $(this).attr('data-nome'). Se la carta attuale non è ancora stata impostata, allora impostiamola e blocchiamo la carta con $(this).attr('data-giocabile',0). In caso contrario vuol dire che abbiamo già aperto una carta e quindi dobbiamo verificare se il risultato sia corretto o meno. Se la carta attuale è uguale a quella giocata allora vuol dire che è tutto corretto; blocchiamo quindi la carta, aumentiamo il conteggio delle carte aperte consecutivamente con questo.consecutivi++, incrementiamo il punteggio con questo.incrementaPunteggio() e conteggiamo il numero totale di carte aperte (8 coppie trovate equivale alla fine del gioco). Se le carte non sono uguali, allora diamo 800 millisecondi all’utente per poterle vedere entrambe e poi richiudiamole e reimpostiamole giocabili.

Nel suo complesso il codice che avremo creato sarà il seguente (ho incluso alcuni altri commenti specifici nel codice, per spiegare i singoli passaggi):

Per chiunque volesse cimentarsi nel gioco ne riporto di seguito anche la versione giocabile. Inutile dire che ci sarebbero ulteriori possibilità di perfezionamento e che nel gioco ci sono anche alcuni bug che accadono quando si clicca troppo rapidamente tra una carta e l’altra.

Facendo un po’ di prove per ora il meglio che sono riuscito a ottenere, senza usare sotterfugi come screenshot e simili, è stato il seguente risultato:

Vedi articolo

[javascript] Disegnare sistema solare con Three.js e WebGL

Three.js è una fantastica libreria javascript per il rendering interattivo in 2D e 3D su HTML5. Qualche giorno fa mi sono trovato a voler riprodurre dei fittizi sistemi stellari ed ho deciso di riportare di seguito un esempio semplificato per chiunque volesse provare da se. Il risultato che vogliamo ottenere è il seguente (zoom con rotellina del mouse, tasto sinistro per ruotare, tasto destro per spostare):


      

Già che c’ero ho inserito anche un paio di esempi per confronto con sistemi stellari realistici: in particolare il nostro sistema solare con i suoi otto pianeti principali in proporzione, una seconda versione con i pianeti ingranditi, ma proporzionati sempre al Sole ed infine il sistema Glise 581 sempre in proporzione corretta.

Inutile dire che si tratti di una semplificazione estrema (le orbite sono circolari, anziché essere ellittiche, e giacciono tutte sul medesimo piano), ma è sufficiente a darci un’idea della vastità dello spazio. 🙂

Detto questo mettiamoci all’opera.

Anzitutto procuriamoci Three.js e, già che ci siamo, jQuery (non è indispensabile, ma mi divertirò ad unirli insieme).

Adesso creiamo il contenuto della nostra pagina index.htm

Creiamo anche un file main.css per il foglio di stile ed uno main.js per il codice javascript. 

Colleghiamo le librerie jQuery, three.min.jsOrbitControls.jsthree.interaction.js.

Infine inseriamo un div che farà da contenitore per il nostro rendering. 

Potremmo usare anche un canvas, ma Three.js ci permette di aggiungere un rendering anche al comune DOM in HTML.

Fatto tutto questo sistemiamo velocemente il CSS inserendo il seguente codice:

Inutile dire che ci potremmo divertire a personalizzarlo nei modi più disparati, ma per il momento è quanto ci basta per creare un riquadro nero di 800px di lato.

Fatto tutto questo possiamo cominciare a lavorare sullo script. Definiamo anzitutto il minimo indispensabile:

In questo modo abbiamo definito la camera, la scena (è dove aggiungeremo tutti gli oggetti), il renderer che produrrà l’elemento DOM da aggiungere al suddetto div, i controlli che ci permetteranno di muovere la telecamera rispetto alla scena e il sistema di interazione (per sviluppi futuri).

Per far funzionare il tutto creiamo una funzione chiamata init(), il nome è comunque a piacere, che lanciamo all’inizio, ed una funzione animate() che richiamiamo subito dopo.

Grazie a requestAnimationFrame( animate ) animiamo tutto il sistema. Dopo approfondiremo.

Intanto cominciamo disegnando un singolo corpo nello spazio (banalmente una sfera).

Per poter gestire l’oggetto appena creato aggiungiamolo al vettore pianeti che dichiariamo come variabile globale.

Per aggiungere un grosso oggetto al centro ci sarà sufficiente quindi usare, dentro la funzione init() alla riga evidenziata:

Gli oggetto saranno aggiunti su un piano cartesiano tridimensionale, di coordinate x, y e z. La posizione (0,0,0) è quindi all’origine degli assi del piano cartesiano. La telecamera punta direttamente verso questo origine ad una distanza sull’asse z di 10.

Proviamo ad aggiungere una seconda sfera con:

A questo punto vogliamo aggiungere anche il cerchio dell’orbita, che appunto non è altro che una circonferenza (nel nostro caso semplificato eh!):

La nostra funzione accetta come argomento il raggio dell’orbita, che sarà disegnata centrata in (0,0,0).

La circonferenza è composta di 64 segmenti che collegano altrettanti vertici. Creiamo quindi la geometria nella qual inseriamo le coordinate dei vertici, il tutto sarà poi riempito con il materiale di tipo LineBasicMaterial.

Integriamo la funzione in quella per creare i singoli pianeti, utilizzando un argomento apposito per poter decidere se aggiungerla o meno.

Con Math.sqrt(x*x + y*y) calcoliamo il raggio per ciascuna orbita, ossia la distanza del corpo sul piano xy rispetto all’origine degli assi.

Adesso proviamo ad aggiungere i seguenti pianeti:

Dovremmo poter vedere un sistema statico, simile a quello dell’esempio.

Adesso cominciamo ad animarlo, preparando anzitutto la funzione che farà ruotare i pianeti. Per farlo ruotare utilizziamo delle coordinate polari, dove ci sarà sufficiente aumentare l’angolo theta.

La funzione ruota accetta un oggetto m e un valore per la “massa”, che ci permetterà di fare variazioni sulla velocità globale del sistema. Dal momento che la velocità dei pianeti varia con l’inverso della distanza, secondo la seguente formula:

v_{o}\approx {\sqrt {{\frac {GM}{r}}}}

Possiamo approssimare il moto angolare con una variazione di theta come segue:

Quindi applichiamo il movimento per ogni singolo corpo creando una specifica funzione:

In questo modo facciamo due cose. Con:

Facciamo ruotare i corpi attorno a se stessi (rotazione).

Con:

Li facciamo ruotare attorno alla stella (rivoluzione).

Aggiorniamo infine la funzione animate():

Infine aggiungiamo lo sfondo stellato generando dei punti casuali nello spazio tutto intorno con:

Ed impostiamo la telecamera di base:

In questo modo posizioniamo la telecamere con l’inquadratura leggermente inclinata e di lato rispetto al sistema.

L’intero script che utilizziamo è il seguente:

Se abbiamo fatto tutto bene otterremo il risultato di sopra.

Vedi articolo