Esempio d'uso minimo di p5play.js

Tenere premuto il tasto del mouse e spostare il cursore contro il cubo o la base.

    let cubo;   // oggetto che cade
let palla;  // oggetto che rimbalza
let base;   // piano statico

function setup() {
    new Canvas(300, 300);

    cubo = new Sprite(120, 100, 30, 30);  // (x, y, larghezza, altezza)
    cubo.bounciness = 0;                  // cubo non rimbalzante 
    palla = new Sprite(180, 100, 36);     // (x, y, diametro)
    palla.bounciness = 0.8;               // palla molto rimbalzante 
    base = new Sprite(150, 260, 240, 20, "static");

    world.gravity.y = 3;
}

function draw() {
    background(220);

    if (mouse.pressing()) {
        palla.moveTowards( mouse );
    }
}
  

  new Canvas(300, 300);

Crea il canvas associato al “mondo” che conterrà gli oggetti e li farà interagire fra di loro.

  cubo = new Sprite(120, 100, 30, 30);  // x, y, larghezza, altezza
cubo.bounciness = 0;                  // cubo non rimbalzante 
palla = new Sprite(180, 100, 36);     // x, y, diametro
palla.bounciness = 0.8;               // palla molto rimbalzante 
base = new Sprite(150, 260, 240, 20, "static");

Crea gli oggetti definendone le proprietà geometriche e fisiche. Gli oggetti creati vengono inseriti automaticamente nel “mondo” che li gestirà.

  world.gravity.y = 3;

Imposta la forza di gravità del “mondo” a 3. Il valore 0 imposta la totale assenza di gravità.

  if (mouse.pressing()) {
    palla.moveTowards( mouse );
}

Se il tasto del mouse è premuto, sposta la palla verso il cursore del mouse.
La “variabile” mouse viene creata e gestita automaticamente da p5play e contiene le proprietà x e y, altre proprietà e metodi che includono anche gli eventi di input.

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
    • planck.min.js
    • p5play.min.js
  • index.html
  • sketch.js