Formen und Farben (25 Minuten)

Wir beginnen nun, mit p5.js das DHBW-Logo zu zeichnen.

Dabei gehen wir schrittweise vor, indem wir verschiedene p5.js-Funktionen zur Erstellung von Formen in passenden Farben benutzen.

Quadrate (5 Minuten)

Zuerst erstellen wir das rote Quadrat auf der linken Seite des Logos. Dazu können wir die Funktion square() benutzen, die drei Parameter hat:

square(x,y,length);

Mit x und y legen wir die Koordination der linken oberen Ecke des Quadrats fest und width bestimmt die Seitenlänge des Quadrats.

square(75, 140, 120);

Farben und Ränder (4 Minuten)

Die Funktion fill() funktioniert ähnlich wie background(). Durch Angabe eines Farbwerts in fill() wird die Farbe festgelegt, mit der Formen aufgefüllt werden. Für das DHBW-Logo verwenden wir einen bestimmten Wert für die passende rote Farbe:

fill("#EA1E26");

⟶ Vor dem Aufruf von square() einfügen.

Nun haben wir noch einen schwarzen Rand um das Quadrat herum, den wir nicht benötigen. Durch den Aufruf von

noStroke();

vor square deaktivieren wir die Ränder der dargestellten Formen.

Quadrate mit „runden“ Ecken (1 Minute)

Ein vierter Parameter im Aufruf von square() legt die Abrundung der Ecken fest:

square(75, 140, 120, 4);

Somit haben wir bereits das rote Quadrat des Logos erzeugt.

Graues Quadrat (5 Minuten)

Nun soll rechts vom roten Quadrat ein entsprechendes graues Quadrat dargestellt werden.

fill("#73818D");
square(205, 140, 120, 4);

Dreiecke (5 Minuten)

Als Zwischenschritt für die Weiterenwicklung des DHBW-Logos sollen zwei kleinere Dreiecke an den Quadraten gezeichnet werden.

Zunächst ein graues Dreieck unterhalb des roten Quadrats:

fill("#73818D");
triangle(135, 260, 195, 260, 135, 320);

triangle() erwartet 6 Parameter:

triangle(x1, y1, x2, y2, x3, y3);

(x1,y1), (x2,y2) und (x3,y3) legen die Koordinaten der drei Ecken des Dreiecks fest.

fill("#EA1E26");
triangle(205,140, 265, 80, 265, 140);

Vierecke (10 Minuten)

Durch ein Viereck innerhalb des roten Quadrats soll der nächste Teil des DHBW-Logos wie folgt erscheinen:

Die Farbe ist ein dunkles Rot mit dem Wert "#86171C".

Wir zeichnen ein Viereck (engl. „quadrangle“) mit der p5.js-Funktion quad(), die vier Koordinaten und daher acht Parameter benötigt (beim Dreieck waren es drei Koordinaten bzw. sechs Parameter):

fill("#86171C");
quad(195, 145, 195, 260, 135, 260, 135, 200);
// Die ersten Koordinaten des Vierecks stehen hier für die Ecke
// „rechts oben“ und die folgenden verlaufen im Uhrzeigersinn

Rotes Quadrat:
x1: 75
y1: 140
Länge: 120

// Die ersten Koordinaten des Vierecks stehen hier für die Ecke
// rechts oben“ und die folgenden verlaufen im Uhrzeigersinn
quad(
    75 + 120, // x1 rotes Quadrat + Länge (Quadrat)
    140 + 5, // y1 rotes Quadrat + kleiner Abstand
    75 + 120, // x1 rotes Quadrat + Länge
    140 + 120, // y1 rotes Quadrat + Länge
    75 + 120 / 2, // x1 rotes Quad. + halbe Länge
    140 + 120, // y1 rotes Quad. + Länge
    75 + 120 / 2, // x1 rotes Quad. + halbe Länge
    140 + 120 / 2 // y1 rotes Quad. + halbe Länge
  );

quad(195, 145, 195, 260, 135, 260, 135, 200);

const canvasWidth = 600;
const canvasHeight = 600;
const squareSize = 180;
const squareGap = squareSize / 30;
const redSquareStartX = canvasWidth / 2 - squareSize - squareGap;
const redSquareStartY = canvasHeight / 2 - squareSize / 2;
// usw. 

fill("#86171C");
quad(
  205,
  140,
  205 + 120 / 2,
  140,
  205 + 120 / 2,
  140 + 120 / 2,
  205,
  140 + 120 - 5
);

Nun haben wir fast das DHBW-Logo erstellt. Was fehlt noch?

Dreiecke durch Vierecke ersetzen (Optional)

Wer schnell ist bzw. wenn es genügend Zeit gibt, dann besteht eine gute Übung darin, den Code so anzupassen, dass die Hilfslinien für die Koordinaten mit Kommentaren ausgeblendet und die Dreiecke im Code in Vierecke umgewandelt werden. Unser Entwurf sollte entsprechend folgender Abbildung aussehen:

function setup() {
createCanvas(400, 400);
}
 
function draw() {
background("white");
// drawGrid();
 
noStroke();
fill("#EA1E26");
square(75, 140, 120, 4);
 
fill("#73818D");
square(205, 140, 120, 4);
 
fill("#73818D");
quad(
  75 + 120 / 2,
  140 + 120,
  75 + 120,
  140 + 120,
  75 + 120,
  140 + 120 + 5,
  75 + 120 / 2,
  140 + 120 + 120 / 2
);
 
 
fill("#EA1E26");
quad(
  205,
  140,
  205,
  140 - 5,
  205 + 120 / 2,
  140 - 120 / 2 - 5,
  205 + 120 / 2,
  140
);
 
fill("#86171C");
quad(
  75 + 120, // x1 rotes Quadrat + Länge des Quadrats
  140 + 5, // y1 rotes Quadrat + kleiner Abstand
  75 + 120, // x1 rotes Quadrat + Länge des Quadrats
  140 + 120, // y1 rotes Quadrat + Länge des Quadrats
  75 + 120 / 2, // x1 rotes Quadrat + halbe Länge des Quadrats
  140 + 120, // y1 rotes Quadrat + Länge des Quadrats
  75 + 120 / 2, // x1 rotes Quadrat + halbe Länge des Quadrats
  140 + 120 / 2 // y1 rotes Quadrat + halbe Länge des Quadrats
);
 
fill("#86171C");
quad(
  205,
  140,
  205 + 120 / 2,
  140,
  205 + 120 / 2,
  140 + 120 / 2,
  205,
  140 + 120 - 5
);
}
 
function drawGrid() {
stroke("grey");
for (let i = 1; i <= 4; i++) {
  line(0, (400 / 4) * i, 400, (400 / 4) * i); // horizontal line
  line((400 / 4) * i, 0, (400 / 4) * i, 400); // vertical line
}
}

DHBW Logo mit Konstanten