Wie man eine sprachempfindliche Roboteranimation in p5.js schreibt

JavaScript ist die Sprache des Internets. Ohne Front-End-Entwicklung zu arbeiten ist unmöglich. Für Anfänger, besonders für Kinder, kann es schwierig sein, sich an die Syntax der Sprache zu gewöhnen.

Für Anfänger kann es sogar ein Hindernis sein, einen lokalen Server im Browser zu installieren und auszuführen. Was wäre, wenn es eine Möglichkeit gäbe, etwas mit JavaScript cool zu machen, ohne etwas zu installieren? Geben Sie p5.js ein, eine Codierungsbibliothek, die für Kreativität konzipiert wurde.

So erstellen Sie einen animierten, animierten Roboterkopf mit einigen einfachen Codierprinzipien.

Was ist p5.js??

Die p5.js-Bibliothek wurde von dem in Los Angeles ansässigen Künstler Lauren MacCarthy erstellt. Es ist so konzipiert, dass es eine ähnliche Plattform bietet wie Processing, für kreativen Ausdruck und Kunst. Klare Tools und gut erläuterte Tutorials sowie Referenzdokumente machen es für Anfänger perfekt.

Ob Sie Animationen, Musik, einfache Spiele oder sogar eine Verbindung zu externer Hardware erstellen 8 Amazing Hardware Projects With Processing und p5.js 8 Amazing Hardware Projects With Processing und p5.js DIY-Elektronik ist mehr als nur Arduino und Raspberry Pi. In diesem Überblick behandeln wir einige der coolsten Projekte, die Sie mit Processing und p5.js machen können! Lesen Sie mehr, p5.js kann helfen.

Der p5.js-Editor

Öffnen Sie zunächst Ihr Browserfenster und navigieren Sie zum Web-Editor p5.js. Vor dem Start gibt es zwei optionale Schritte.

1. Sie müssen bei p5.js angemeldet sein, um Ihre Skizzen zu speichern. Es empfiehlt sich daher, ein Konto zu erstellen. Die Anmeldung ist kostenlos. Sie können sich bei Bedarf mit Ihrem Google- oder GitHub-Konto anmelden.

2. Klicken Sie oben rechts auf das Einstellrad. Hier können Sie das Thema und die Textgröße für alle dunklen Themenliebhaber ändern.

Der p5.js-Editor kombiniert einen Code-Editor, eine Konsole und ein Ausgabefenster im selben Bereich. Bisher sind zwei Funktionen für Sie eingerichtet.

Grundlagen von p5.js

Jede p5.js-Skizze beginnt mit zwei Elementen. Das Konfiguration() Funktion und die zeichnen() Funktion. Für diejenigen von Ihnen, die zuvor ein Arduino programmiert haben, ist dies bekannt!

Funktionssetup () createCanvas (500, 500); 

Das Konfiguration() Funktion läuft beim Start Ihres Programms. In diesem Fall erstellt das Setup eine quadratische Leinwand mit 400 Pixel. Ändern Sie dies in (500, 500). für einen etwas größeren Bereich zu arbeiten.

Das Setup wird nur einmal ausgeführt und dient zum Erstellen der für Ihr Programm erforderlichen Teile zusammen mit den Anfangswerten für Ihr Programm.

Funktion draw () Hintergrund (220); 

Das zeichnen() Methode wird jeden Frame genannt. Dies funktioniert ähnlich wie die Schleifenfunktion in Arduino oder die Aktualisierungsfunktion in Unity 3D. Alles, was sich in Ihrer Skizze ändern muss, geschieht hier. Für den Moment wird der Hintergrund jedes Bild neu gezeichnet. Oben sehen Sie zwei Symbole, spielen und stoppen. Klicken abspielen.

Dies ist das bisherige Programm - eine 500 × 500-Leinwand mit grauem Hintergrund,

Eine Form erstellen

Das Arbeiten mit Formen in p5.js unterscheidet sich ein wenig von den voreingestellten Formobjekten, die im Tutorial für die Mo.js-Webanimation verwendet werden. Um eine einfache Ellipse zu erstellen, fügen Sie diese dem Code in der hinzu zeichnen() direkt unterhalb der Stelle, an der Sie die Hintergrundfarbe einstellen.

Funktion draw () Hintergrund (220); Ellipse (250,250,50)

Das Ellipse() Methode braucht mehrere Argumente. Die ersten beiden sind die X- und Y-Position auf der Leinwand. Da die Leinwand 500 Pixel breit ist, wird die Ellipse in der Mitte eingestellt, wenn Sie diese beiden Werte auf 250 setzen. Das dritte Argument ist die Breite des Kreises - in diesem Fall 50 Pixel.

Sie haben also einen Hintergrund und einen Kreis, aber das sieht nicht besonders gut aus. Zeit, das zu beheben.

Einen Stil hinzufügen

Beginnen Sie mit dem Ändern der Hintergrundfarbe. Die Zahl in Klammern steht für einen Graustufenwert. 0 ist also schwarz und 255 ist weiß, dazwischen liegen verschiedene Grauschattierungen. Um den Hintergrund schwarz zu machen, ändern Sie diesen Wert in 0.

Funktion draw () Hintergrund (0); Ellipse (250, 250, 50); 

Wenn Sie jetzt auf play klicken, wird der Hintergrund schwarz. Um dem Kreis eine Farbe zu geben, möchten wir die RGB-Werte (Rot, Grün und Blau) individuell beeinflussen. Erstellen Sie einige Variablen oben in Ihrem Skript (direkt vor dem Start vor der Setup-Funktion), um diese Werte zu speichern.

var r, g, b;

Stellen Sie in der Setup-Funktion den Wert von ein r zu 255, und geben Sie den anderen einen Wert von 0. Die kombinierte RGB-Farbe ist hellrot!

r = 255; g = 0; b = 0;

Fügen Sie a hinzu, um die Farbe auf den Kreis anzuwenden füllen() Aufruf der Draw-Methode, kurz bevor der Kreis gezeichnet wird.

 füllen (r, g, b); Ellipse (250, 250, 50);

Klicken Sie jetzt auf abspielen, und Sie sollten einen roten Kreis auf schwarzem Hintergrund sehen.

Den Kreis zu machen ist ein guter Anfang, aber durch das Hinzufügen von Interaktivität wird es wirklich interessant!

Klicken Sie hier, um die Farbe zu ändern

Das Hinzufügen von Code für einen Mausklick ist in p5.js recht einfach. Erstellen Sie eine neue Funktion unterhalb der zeichnen() Methode.

Funktion mousePressed () r = zufällig (256); g = zufällig (256); b = zufällig (256);  

Das mousePressed () hört auf alle Mausklicks und führt den Code in den Klammern aus. Das zufällig() Funktion gibt einen zufälligen Wert zwischen 0 und einer gegebenen Zahl zurück. In diesem Fall setzen Sie die Werte für r, g und b bei jedem Mausklick auf einen Wert zwischen 0 und 255.

Führen Sie den Code erneut aus und klicken Sie einige Male mit der Maus. Der Kreis sollte die Farbe ändern, wenn Sie dies tun.

Jetzt reagiert Ihre Animation auf Mausklicks, aber was ist mit der Stimme des Benutzers??

Sprachsteuerung einrichten

Die Verwendung des Systemmikrofons wird mit der Soundbibliothek p5.js vereinfacht. Erstellen Sie oben in Ihrem Skript eine neue Variable namens mic.

var r, g, b; var mic;

Fügen Sie diese Zeilen zu Ihrem hinzu Konfiguration() zuzuweisende Funktion mic zum Audioeingang.

mic = new p5.AudioIn () mic.start (); 

Wenn Sie jetzt auf "Spielen" klicken, wird ein Dialogfeld mit der Berechtigung zum Zugriff auf das integrierte Mikrofon angezeigt.

Klicken ermöglichen. Je nachdem, welchen Browser Sie verwenden, können Sie sich an Ihre Wahl erinnern oder Sie müssen ein Bestätigungsfeld anklicken. Jetzt ist das Mikrofon eingerichtet und es ist Zeit, es einzusetzen.

Skalierung nach Volumen

Um die Lautstärke des Mikrofons als Wert in Ihrem Programm zu verwenden, müssen Sie es als Variable speichern. Ändere dein zeichnen() Methode, um so auszusehen:

function draw () var micLevel = mic.getLevel (); Hintergrund (0); füllen (r, g, b); Ellipse (250, 250, 50 + micLevel * 2000);  

Zu Beginn der Funktion wird eine neue Variable aufgerufen micLevel erstellt und der aktuellen Mikrofonamplitude zugeordnet.

Die Ellipse hatte eine feste Breite von 50 Pixel. Jetzt ist 50 Pixel die minimale Breite, addiert zum micLevel-Wert, der jeden Frame aktualisiert. Die Anzahl, mit der sich der micLevel multipliziert, hängt von der Empfindlichkeit Ihres Mikrofons ab.

Experimentieren Sie mit höheren Werten - ein Wert von 5000 führt zu einer dramatischeren Skalenänderung!

Hinweis: Wenn dies für Sie nicht funktioniert, ist Ihr Mikrofon möglicherweise nicht richtig eingestellt. Der Browser verwendet das Standardmikrofon des Systems. Möglicherweise müssen Sie die Toneinstellungen ändern und die Aktualisierung durchführen.

Roboter konstruieren

Jetzt haben Sie alle Werkzeuge, um den Roboter zu erstellen. Bewegen Sie zuerst die von Ihnen erstellte Ellipse und fügen Sie eine weitere hinzu, um die Augen zu erstellen.

 Ellipse (150, 150, 50 + micLevel * 2000); Ellipse (350, 150, 100 + micLevel * 2000); 

Das “Zähne” sind eine Reihe von Rechtecken, die sich vom unteren Rand des Bildschirms erstrecken. Notiere dass der rect () Methode erfordert einen zusätzlichen Parameter für seine feste Breite.

 rect (0, 500, 100, -100-micLevel * 5000); Rect (400, 500, 100, -100-Micropegel * 5000); Rect (100, 500, 100, -100-Micropegel * 3000); Rect (300, 500,100, -100micLevel * 3000); rect (200, 500,100, -100-micLevel * 1000); 

Diesmal möchten Sie nur die Höhe der Zähne ändern und das geben “lächelnd” Wirkung müssen sie unterschiedliche Empfindlichkeiten haben. Die minimale Höhe beträgt -100 (da sie von der Unterseite der Leinwand heraufkommt), daher muss der micLevel auch eine negative Zahl sein.

Klicken Sie auf Wiedergabe, und Sie sollten ein fast fertiggestelltes Robotergesicht sehen!

Möglicherweise müssen Sie Ihre Multiplikatorzahlen noch einmal optimieren, um die besten Ergebnisse zu erzielen.

Finishing Touches hinzufügen

Fügen Sie den Augen noch mehr Pupillen hinzu Ellipse() Anrufe. Verwenden Sie eine andere füllen() um sie weiß zu machen. Fügen Sie dies Ihrem hinzu zeichnen() Methode unter der “Zähne” Du hast gerade erst erschaffen.

füllen (255); Ellipse (150, 150,20 + micLevel * 1000); Ellipse (345,150,30 + micLevel * 1000); 

Um dem ganzen Stück eine kleine Definition zu geben, ändern Sie schließlich das Strichgewicht in Ihrem Konfiguration() Funktion

Schlaggewicht (5); 

Das ist es!

Wenn etwas nicht funktioniert, überprüfen Sie Ihren Code gründlich, und Sie können den gesamten Code aus diesem Lernprogramm im p5-Editor anzeigen, falls erforderlich.

Mit p5.js vorwärts gehen

Dieses Anfänger-Tutorial behandelt einige grundlegende Konzepte mit p5.js und zeigt, wie einfach es ist, kreativ zu sein. Wie immer kratzt dieses Projekt kaum die Oberfläche von allem, was p5.js kann.

Wenn Sie sich mit p5.js viel Zeit für die Erstellung von Grafiken aufwenden, ist dies eine gute Zeit, da Sie sich mit dem Denken als Programmierer und mit der JavaScript-Syntax vertraut machen. Dies sind alles wichtige Fähigkeiten, die Sie mitbringen sollten, wenn Sie sich entschließen, voll und ganz zu tauchen und wirklich JavaScript wirklich lernen. Lernen Sie wirklich JavaScript mit 5 Top-Kursen von Udemy. Lernen Sie JavaScript mit 5 Top-Kursen von Udemy. Wenn Sie einen Grund haben, JavaScript zu lernen, könnten diese fünf hervorragenden Kurse von Udemy der ideale Ort für Ihre Codierungsreise sein. Weiterlesen !

Erfahren Sie mehr über: Codierungs-Tutorials, JavaScript.