Uso di OpenProcessing

Per poter realizzare e consegnare le esercitazioni è necessario creare prima un proprio profilo su OpenProcessing e unirsi alla classroom del corso.

Creazione del profilo
Unione alla classroom
Creazione dello sketch
Consegna dell’esercitazione
Download dello sketch

Creazione del profilo

collegarsi al sito openprocessing.org;
cliccare sul tasto Join e inserire i propri dati usando il nome reale per evitare ambiguità nelle consegne.

::: figure image full-width

:::

Attraverso il logo

è possibile accedere al pannello principale del sito o, dopo il login, del proprio profilo.

Unione alla classroom

collegarsi all’indirizzo: openprocessing.org/class/57250;
cliccare su +Join e inserire il codice di 6 caratteri segnalato via email o sul gruppo Facebook delle comunicazioni.

::: figure image full-width

:::

Creazione dello sketch

dalla propria home, cliccare sul tasto Create a Sketch;
assicurarsi che la modalità sia impostata su P5js;
usare l’icona ▶ (o
) per visualizzare il risultato e l’icona
per tornare al codice.

::: figure image full-width

:::

Dopo il salvataggio è possibile modificare il codice tornando sullo sketch (

/ My Sketches) e cliccando sull’icona

::: figure image full-width

:::

Consegna dell’esercitazione

spostarsi sulla classroom: openprocessing.org/class/57250 [dopo l’unione alla classroom il link si trova già nel pannello principale];
cliccare sul pulsante Add Sketch relativo all’esercitazione in cui si deve inserire lo sketch;
scegliere lo sketch e confermare.

::: figure image full-width

:::

Evitare di usare il primo Add Sketch che riguarda genericamente l’intera classroom.

Download dello sketch

OpenProcessing permette di scaricare tutti i file necessari per il funzionamento utilizzando l’icona della condivisione/esportazione in alto a destra:

::: figure image full-width

:::

I file scaricati presentano però alcuni problemi con la libreria “p5.js” linkata (ferma alla versione 0.5.0) e sono privi di regole CSS che permettano di avere il canvas centrato nella pagina. Dopo il download conviene quindi modificare il contenuto del file “index.html” in questo modo:

  <html>
<head>
⌊     <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <title>TITOLO DELLO SKETCH</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
            background-color: white;  /* colore sfondo pagina */
        }
        canvas {
            display:block;
            position: absolute;
            width: auto !important;
            height: auto !important;
            max-width: 100%;
            max-height: 100%;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
        canvas:focus {
            outline:0;
        }
    </style> ⌋
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/⌊ 0.6.0 ⌋/p5.js"></script>
    <!-- eventuali altre librerie -->
    <script src="mySketch.js"></script>
</head>
<body>
</body>
</html>

Sarebbe meglio sistemare anche l’ordine dei tag <script> dando la precedenza a quello di “p5.js” e lasciando in fondo quello di “mySketch.js”.