Tutorial: Bouncing Balls mit P5.js und ECMAScript 6 (ES6)

Ich hatte es mir ja schon so lange vorgenommen, endlich mal etwas mit JavaScript anzustellen und speziell mit P5.js, dem JavaScript-Mode von Processing, denn schließlich ist JavaScript das nächste, große Ding. Irgendwie hat mich der Aufwand aber immer wieder abgeschreckt, aber gestern hatte ich mich endlich aufgerafft: Ich habe ein P5.js-Progrämmchen geschrieben und dabei auch darauf geachtet, daß ich möglichst viel von den neuen Features, die seit ECMAScript 6 (ES6) die JavaScript-Welt bereichern, in das Script eingebaut wurden. Es gibt let und const und Klassen.

let und const definieren Variable und Konstanten mit einem lokalen Scope, das heißt im Gegensatz zum globalen var kann man damit einem anderen JavaScript-Programm, das eventuell auf der gleichen Seite aufgerufen wird, nicht mehr dazwischenfunken.

Mit class kann man ab ES6 endlich Klassen konstruieren, wie man sie in ähnlicher Form auch von Java oder Python kennt. Ich bin mir nicht sicher, ob JavaScript damit etwas von seinen funktionalen Fähigkeiten einbüßt, aber als jemand, der bisher hauptsächlich in Python herumprogrammiert hat, ist mir diese neue Klassenkonstruktion vertrauter.

Was habe ich gemacht? Ich habe ein Programm geschrieben, daß dreißig kleine Bälle über den Bildschirm hüpfen läßt, die jeweils von den Canvas-Rändern zurückgestoßen werden. Dafür habe ich erst einmal eine Klasse Ball entworfen:

class Ball {

    constructor() {
        this.r = random(7, 15);
        let x = random(this.r, width - this.r);
        let y = random(this.r, height - this.r);
        this.loc = createVector(x, y);
        let velx = random(-3, 3);
        let vely = random(-3, 3);
        this.vel = createVector(velx, vely);
        // Farben
        const a = 200;  // Alpha
        const colors = [color(230, 96, 55, a), color(17, 42, 106, a),
                  color(183, 116, 64, a), color(212, 251, 69, a),
                  color(252, 75, 200, a), color(159, 53, 233, a),
                  color(57, 218, 56, a), color(67, 253, 133, a),
                  color(78, 148, 42, a), color(67, 254, 211, a),
                  color(74, 143, 186, a), color(52, 99, 234, a)]
        this.c = random(colors);
    }
    
    move() {
        this.loc.add(this.vel);
        }
        
    checkEdges() {
        if (this.loc.y >= height - this.r) {
            this.vel.y *= -1;
            this.loc.y = (height - this.r);
        } else if (this.loc.y <= this.r) {
            this.vel.y *= -1;
            this.loc.y = this.r;
        }
        if (this.loc.x >= width - this.r) {
            this.vel.x *= -1;
            // this.dx = random(-3, 3);
            this.loc.x = (width - this.r);
        } else if (this.loc.x <= this.r) {
            this.vel.x *= -1;
            this.loc.x = this.r;
        }
    }

    show() {
        noStroke();
        fill(this.c);
        ellipse(this.loc.x, this.loc.y, 2*this.r, 2*this.r);
    }
}

Neu ab ES6 ist, daß nicht nur der constructor(), sondern alle Klassenmethoden keine function-Deklaration mehr brauchen, sondern nur mit ihrem Namen definiert werden. Und so habe ich der Klasse neben dem constructor() noch die Methoden move(), checkEdges() und show() spendiert.

Die Vektor-Funktionen von P5.js unterscheiden sich in der Syntax ein wenig von denen von Processing. Hier hilft ein Blick in die Dokumentation.

Das Hauptprogramm ist wieder von erfrischender Kürze:

let balls = [];
const numOfBalls = 30

function setup() {
    let myCanvas = createCanvas(640, 360);
    myCanvas.parent("myCanvas");
    for (let i = 0; i < numOfBalls; i++) {
        balls.push(new Ball());
        }
}

function draw() {
    background("#2b3e50");
    for (let ball of balls) {
        ball.checkEdges();
        ball.move();
        ball.show();
    }
}

Will man einen P5.js-Canvas in eine Webseite wie dieser einbetten, muß man mit

    let myCanvas = createCanvas(640, 360);
    myCanvas.parent("myCanvas");

dem Canvas ein div zuweisen, in das dieser eingebettet wird. Im HTML-Code der Seite steht dann an der Stelle, wo der Canvas ausgegeben werden soll:

<div id="myCanvas"></div>

Die letzten Zeilen in der draw()-Funktion, beginnend mit

    for (let ball of balls) {

entsprechen ziemlich genau dem Python-Aufruf

    for ball in balls:

das heißt, sie iterieren über das gesammte Array balls[] und rufen jedes einzelne Element nacheinander auf.

Es hat Spaß gemacht, sich an JavaScript und P5.js zu versuchen. Besonders viel Spaß macht es natürlich, daß man das Ergebnis direkt in eine Webseite einbinden kann. Dies wird daher definitiv nicht mein letztes Experiment sein – vielleicht versuche ich mich auch noch an anderen JavaScript-Frameworks, Phaser wäre dafür ein Kandidat.

Es war anfangs schwierig für mich, mich in die doch etwas von Python abweichende Synatx von JavaScript einzufummeln. Sollte ich daher irgend etwas umständlich formuliert haben, bitte ich um Mittielung in meinen (Email-) Kommentaren. Das komplette Programm findet Ihr in meinem noch etwas unaufgeräumten GitHub-Repositorium zu P5.js.

2 (Email-) Kommentare

Anstelle von let balls = [] kann auch const balls = [] verwendet werden. (dito auch const myCanvas = createCanvas(…))
Hintergrund: In Javascript hat „const" nur die Bedeutung einer konstanten Referenzierung - ist das ein Array oder Objekt, kann das Array oder Objekt selbst durchaus geändert werden, man kann nur der Konstanten z.B. „balls“ selbst nichts anderes mehr zuweisen.
Siehe auch https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/const
Beste Grüße und noch viel Spass beim Experimentieren

– Thomas O. (Kommentieren) (#)

Danke!

– Jörg Kantel (Kommentieren) (#)

(Kommentieren)