Ein Smiley zeichnen mit ps

Zeichnen eines Smiley-Gesichts mit p5.js

In diesem Artikel erfahren Sie, wie Sie mit der p5.js-Bibliothek eine einfache, aber charmante Zeichnung erstellen: ein lächelndes Gesicht. p5.js ist eine JavaScript-Bibliothek, mit der sich ganz einfach interaktive Grafiken und Animationen erstellen lassen. Es ist ideal für Künstler, Designer und Entwickler, die codebasierte visuelle Projekte erstellen möchten.

Was ist p5.js?

p5.js ist eine Bibliothek, die darauf abzielt, die Welt der visuellen Programmierung zugänglich zu machen. Es bietet eine Reihe von Funktionen, mit denen Sie auf einfache Weise Formen zeichnen, Animationen erstellen und mit dem Benutzer interagieren können. Obwohl es in JavaScript geschrieben ist, müssen Benutzer keine Experten in dieser Sprache sein, um mit der Erstellung auffälliger Grafiken zu beginnen.

Grundstruktur einer Skizze in p5.js

Eine Skizze in p5.js hat zwei Hauptfunktionen:

1. setup(): Wird zu Beginn einmal ausgeführt. Hier initialisieren wir die Leinwand, legen Farben fest und bereiten alle notwendigen Elemente vor.
2. draw(): Läuft in einer Schleife, Bild für Bild. Hier platzieren wir die Anweisungen, die wir kontinuierlich wiederholen möchten (wie eine Animation). In unserem Fall benötigen wir keine Animation, also lassen wir es leer.

Das Projekt: ein lächelndes Gesicht

Das Ziel besteht darin, ein lächelndes Gesicht mit einfachen Formen zu zeichnen: einem großen Kreis für das Gesicht, zwei kleineren Kreisen für die Augen und einem Bogen für den Mund.

Schritt 1: Erstellen Sie die Leinwand

Als erstes definieren wir die Größe der Leinwand. In diesem Fall verwenden wir eine Größe von 400x400 Pixel und legen einen schwarzen Hintergrund fest.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

Schritt 2: Zeichnen Sie das Gesicht

Das Gesicht ist einfach ein großer Kreis. Um einen Kreis in p5.js zu zeichnen, verwenden wir die Funktion ellipse(), die die Koordinaten seines Mittelpunkts sowie seine Breite und Höhe benötigt. In unserem Fall zeichnen wir den Kreis in der Mitte der Leinwand mit einem Durchmesser von 200 Pixeln.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

Schritt 3: Zeichnen Sie die Augen

Die Augen sind zwei kleine weiße Kreise. Wir können die gleiche ellipse()-Funktion verwenden, aber dieses Mal geben wir ihnen eine weiße Füllung und platzieren sie leicht nach oben und an den Seiten der Gesichtsmitte.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

Schritt 4: Zeichnen Sie das Lächeln

Für das Lächeln verwenden wir schließlich die Funktion arc(). Mit dieser Funktion können Sie einen elliptischen Bogen zeichnen, der in diesem Fall wie ein Lächeln aussieht. Wir passen die Koordinaten so an, dass die Kurve zentriert ist und wie ein Mund aussieht.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

Der vollständige Code:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

Abschluss

Dieses einfache Beispiel zeigt, wie wir mit ein paar Zeilen Code mit p5.js attraktive Grafiken erstellen können. Obwohl dieses Projekt grundlegend ist, können die hier verwendeten Prinzipien skaliert werden, um viel komplexere und detailliertere visuelle Darstellungen zu erstellen. Wenn Sie mehr experimentieren möchten, können Sie versuchen, die Größe von Elementen zu ändern, Farbe hinzuzufügen oder sogar eine Animation in draw() zu erstellen.

Erstellen Sie Ihre eigene Version dieses Smileys und entdecken Sie, was p5.js zu bieten hat!

Das obige ist der detaillierte Inhalt vonEin Smiley zeichnen mit ps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!