Pubblicare uno sketch su Glitch.me

Glitch.me

Registrazione e Log in

Se non si è già registrati (e non si usa abitualmente GitHub) si consiglia di farlo attraverso l’opzione “Email Magic Link”: Glitch.com Sign up

Altrimenti si può entrare direttamente: Glitch.com Log in

Creazione sito web su Glitch.com

Definire nome dominio di terzo livello

Test sito

Modifica e creazione file di codice

File “index.html”

È il primo file letto dal browser e contiene le informazioni sulla pagina, tutti gli elementi (canvas, testi, immagini, ecc.) e i riferimenti ai codici JavaScript e CSS salvati in file esterni. Nello sketch di base è già presente buona parte del codice ma le informazioni strettamente dipendenti dallo sketch (evidenziate in maiuscolo) devono ovviamente essere ridefinite:

File “style.css”

È il file che definisce l’aspetto (colori, font, dimensioni, posizioni, ecc.) di tutti gli elementi inseriti nel corpo del file “index.html”. In linea di massima si può evitare di modificarlo ma sono stati messi in evidenza alcuni valori che possono tornare utili per impostare proprietà cromatiche o tipografiche compatibili con la grafica del proprio sketch.

File “script.js”

Contiene script usati per implementare l’interazione nella pagina HTML. Nel caso specifico serve a gestire l’attivazione e la disattivazione dell’audio e l’apertura e la chiusure del pannello delle informazioni.

// NON MODIFICARE E NON CANCELLARE

window.addEventListener("load", function() {
  
  let audioButton = document.getElementById("pulsante-audio");
  if (audioButton) {
    stopPropOf( audioButton );
  }
  let infoButton = document.getElementById("pulsante-info");
  stopPropOf( infoButton );
  let infoPanel = document.getElementById("pannello-info");
  stopPropOf( infoPanel );
  
  if (getAudioContext().state == 'suspended') {
    let audioIcon = document.querySelector("#pulsante-audio > span");
    if (audioIcon) {
      audioIcon.className = "lnr lnr-volume";
    } 
  }
});

function stopProp(e) {
    e.stopPropagation();
}
function stopPropOf( element ) {
  element.addEventListener("click", stopProp, false);
  element.addEventListener("mousedown", stopProp, false);
  element.addEventListener("mouseup", stopProp, false);  
  element.addEventListener("mousemove", stopProp, false);  
}

function apriChiudiInfo() {
  var info = document.getElementById("pannello-info");
  if (info.classList.contains("aperto")) {
    info.classList.remove("aperto")
  } else {
    info.classList.add("aperto")
  }
}

function attivaDisattivaAudio() {
  if (getAudioContext().state == 'suspended') {
    getAudioContext().resume();
    document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume-high";
    attivaAudio();
  } else {
    if (getOutputVolume() > 0) {
      outputVolume(0);
      document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume";
      disattivaAudio();
    } else {
      outputVolume(1);
      document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume-high";
      attivaAudio();
    }
  }
}

function attivaAudio() {
  // può essere ridefenitita in sketch.js 
}

function disattivaAudio() {
  // può essere ridefenitita in sketch.js 
}

Modifica contenuto pannello informazioni

Creazione sketch p5.js

Aggiunta del file “sketch.js”

È il codice dello sketch p5.js che può essere definito esattamente come succederebbe nel Web Editor. Il codice si potrebbe inserire anche dentro “script.js” ma le prime volte è meglio tenere separata la gestione dell’interattività della pagina da quella dello sketch vero e proprio.

// Questo codice può essere totalmente sostituito con
// un codice già pronto o può essere usato come base
// per uno sketch che cambia visualizzazione in relazione
// alle parti del brano audio definite con addCue().
//
// Crediti musicali:
// https://freemusicarchive.org/music/Bauchamp/Loop_Mania_Sampler_Pack/130_od_beat

let sound;
let soundPart;  // parte corrente dell'audio
let fft;
let centro;

function preload() {
  sound = loadSound("audio.mp3");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();

  fft = new p5.FFT();

  sound.addCue(0.01, cueReached, "bum");   // parte "bum" all'inizio (0.0 sembra far perdere la notifica al riavvio)
  sound.addCue(4.2, cueReached, "bumcha"); // parte "bumcha" a partire dal secondo 4,2
  sound.addCue(7.8, cueReached, "cha");    // parte "cha" a partire dal secondo 7,8

  sound.playMode("restart"); // evita sovrapposizioni audio
  sound.setVolume(0.5); // solo per non spaventare la nonna
  sound.loop(); // audio che parte subito

  setupResizable();
}

function cueReached(val) {
  soundPart = val;
}

function setupResizable() {
  centro = createVector(width/2, height/2);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  setupResizable();
}

function draw() {
  
  fft.analyze();  // analizza frequenze (per getEnergy())
  
  // sfondo (in base alla parte dell'audio)
  if (soundPart == "bum") {
    background(192, 32, 0); // rosso scuro
  } else if (soundPart == "bumcha") {
    background(192, 155, 240); // violetto
  } else if (soundPart == "cha") {
    background(120, 210, 250); // azzurro
  }

  // cerchio spesso (se parte dell'audio è "bum" o "bumcha")
  if (soundPart == "bum" || soundPart == "bumcha") {
    let eBass = fft.getEnergy("bass");
    let diamBass = map(eBass, 0, 255, 0, 400);
    strokeWeight(12);
    stroke(0);
    circle(centro.x, centro.y, diamBass);
  }

  // cerchio sottile (se parte dell'audio è "bumcha" o "cha")
  if (soundPart == "bumcha" || soundPart == "cha") {
    let eTreble = fft.getEnergy("treble");
    let diamTreble = map(eTreble, 0, 255, 0, 800);
    strokeWeight(2);
    stroke(255);
    circle(centro.x, centro.y, diamTreble);
  }
}

// FUNZIONI CHIAMATE ATTRAVERSO ICONA ALTOPARLANTE

function attivaAudio() {  // se l'audio viene riattivato...
  sound.loop(); // riavvia il brano
}

function disattivaAudio() {  // se l'audio viene disattivato...
  sound.pause(); // metti in pausa il brano
}

Aggiunta file audio

Metainformazioni (per social network e motori di ricerca)

Modifica metainformazioni

Aggiungere immagine (di anteprima)

Verifica metainformazioni

Le verifiche si possono fare anche con altri siti, come Social Share Preview o Meta Tags