JavaScript, HTML, CSS e... !
0 commenti

Generatore di ologrammi in Google Slides

Creare un ologramma per smartphone con Google Apps Script

Mi sono imbattuto ultimamente negli ologrammi 3D per smartphone. Con un visore olografico creato con 4 pezzi di plastica dovutamente ritagliati è possibile trasformare una comune immagine bidimensionale, presente nel proprio smartphone, in una figura 3D.

Il presente tutorial non vuole spiegare la procedura di creazione del visore di ologrammi ne ha la pretesa di approfondire il principio che sta alla base del gioco di luci, bensì quello che riporto di seguito è una funzione in Google Apps Script che ho realizzato per generare in modo automatico su Google Slides un'immagine (nel caso specifico una presentazione) per poter essere vista come ologramma sul proprio smartphone.

Esistono degli strumenti appositi per creare immagini e video adatti ad essere visualizzati come ologrammi, in breve si tratta di inserire un'immagine su uno sfondo nero (quadrato o rettangolare) ad una certa distanza dal centro e ripeterla per tutti e 4 i lati in modo che la parte inferiore dell'immagine utilizzata sia sempre rivolta verso il centro (il risultato sarà quello di due coppie di immagini speculari dove ciascuna immagine è equidistante dall'altra).

L'immagine utilizzata nell'esempio è la seguente, Fig. 1:



ologramma sul proprio smartphone con google slides - immagine di una farfalla

Fig. 1 - Immagine di una farfalla da trasformare in ologramma


Il codice da inserire come script incorporato in una Presentazione Google (Slides) è quello che segue:

function generaOlogramma() {
  
  // SETUP - INIZIO
  var img_id = 'ID_DELLA_TUA_IMMAGINE_SU_DRIVE';
  var img_fix_resize = 200;
  var img_fix_center_distance = 130;
  // SETUP - FINE
  
  var deck = SlidesApp.getActivePresentation();
  var slide = deck.getSlides()[0];
  var shapes = slide.getShapes();
  for (i=0; i< shapes.length; i++) {
   shapes[i].remove(); 
  }
  slide.getBackground().setSolidFill("#000000")
  var img = DriveApp.getFileById(img_id).getBlob();
  var imgTop = slide.insertImage(img);
  var img_w = imgTop.getWidth();
  var img_h = imgTop.getHeight();
  var ratio = img_w/img_h;
  if(img_w > img_fix_resize){
    img_w = img_fix_resize;
    img_h = parseFloat(img_w/ratio);
    imgTop.setWidth(img_w).setHeight(img_h);
  }
  // Recupera le info per centrare l'immagine
  var pageWidth = deck.getPageWidth();
  var pageHeight = deck.getPageHeight();
  var newX = pageWidth/2. - img_w/2.;
  var newY = pageHeight/2. - img_h/2.;
  
  var imgRight = imgTop.duplicate();
  var imgBottom = imgTop.duplicate();
  var imgLeft = imgTop.duplicate();
  
  // Immagine in ALTO
  newXTop = newX;
  newYTop = newY - (img_fix_center_distance);
  imgTop.setLeft(newXTop).setTop(newYTop);
  
  // Immagine a DESTRA
  newXRight = newX + (img_fix_center_distance);
  newYRight = newY;
  imgRight.setRotation(90);
  imgRight.setLeft(newXRight).setTop(newYRight);
  
  // Immagine in BASSO
  newXTop = newX;
  newYTop = newY + (img_fix_center_distance);
  imgBottom.setRotation(180);
  imgBottom.setLeft(newXTop).setTop(newYTop);
  
  // Immagine a SINISTRA
  newXLeft = newX - (img_fix_center_distance);
  newYLeft = newY;
  imgLeft.setRotation(270);
  imgLeft.setLeft(newXLeft).setTop(newYLeft);
}

Il setup dello script prevede l'inserimento dell'ID dell'immagine desiderata presente sul proprio Google Drive ed i parametri relativi alla distanza dal centro della base, nel caso specifico della slide (da modificare in base alla dimensione dell'immagine).

Una volta avviato lo script verrà generata la presentazione che prevede: l'eliminazione di qualsiasi elemento di disturbo nella diapositiva, l'assegnazione del colore di sfondo nero alla dispositiva e l'inserimento dell'immagine, ripetuto per 4 volte, dovutamente posizionata ed orientata. Il risultato è visibile in Fig. 2:



presentazione google per ologramma sul proprio smartphone

Fig. 2 -Presentazione Google per ologramma sul proprio smartphone


Avviando la presentazione il risultato sarà quello in Fig. 3:



presentazione google avviata per ologramma sul proprio smartphone

Fig. 2 -Presentazione Google avviata per ologramma sul proprio smartphone


Posizionando il visore olografico al centro del proprio smartphone è possibile visualizzare il risultato in 3D, come mostra il video che riporto di seguito:

Carino no? Provare per credere :)

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]https://www.appsscript.it[/url] se devi riferirti ad un indirizzo web