• Parametric Design
• 2D
• Zeichnen I

Zeichnen I

Zeichenfläche

Als erstes müssen wir unsere Zeichenfläche erstellen (canvas). Hierzu haben wir das createCanvas Kommando, welches wir in der setup Funktion ausführen können. Alle Größenangaben in p5js sind immer in Pixel:

function setup() {
  createCanvas(400, 400);
}

Wenn du ein Kommando abgeschlossen hast, vergesse nicht das Semikolon nach der runden Klammer.

Hintergrund

Zu Beginn ist eure Zeichenfläche leer. Wir können unserer Zeichenfläche eine vollflächige Füllung geben. Hierfür nutzen wir das background Kommando zu Beginn der draw Funktion:

function draw() {
  background(220);
}

Die background Funktion unterscheides sich dahingehend von der createCanvas Funktion, dass wir unterschiedliche Werte als Farbe angeben können (siehe nächster Abschnitt).

Farben

In p5js können wir Farben auf unterschiedliche Art definieren:

1. Graustufen: Eine Zahl zwischen 255 (weiß) und 0 (schwarz)

background(150);

2. Rot, Grün, Blau (RGB): Drei Zahlen von 0 bis 255

background(255, 0, 0);

3. CSS-Farben: Name der Farbe

background('red');

JavaScript geht bei allem Text den wir schreiben immer davon aus, dass es sich hierbei um Kommandos handelt. Damit wir z.B. der background Funktionen einen wirklichen Text (string) übergeben können, müssen wir den Text in Anführungszeichen setzen. Ihr könnt dafür dopplte oder einfach Anführungszeichen nutzen, wichtig ist nur, dass am Anfang und Ende die selben Anführungszeichen stehen.

4. Hexadezimal RGB: HEX-Text

background('#ff0000');

5. RGB + Alpha (Transparenz): rgba als Text, Alpha liegt hier zwischen 0 and 1

background('rgba(255,0,0,0.5)');

JavaScript nutze Englische Zahlen, deshalb müssen wir einen Punkt und kein Komma nutzen.
Deutsch: 0,5 > Englisch: 0.5

Dies sind die wichtigsten Farbangaben, welche wir nutzen werden. Darüber hinaus gibt es aber noch weitere Möglichkeiten, die ihr in der Dokumentation findet.

Formen

In der p5js werden diese einfachen Formen auch als 2D primitives beschrieben. Alle Formen werden in dem Koordinatensystem unserer Zeichenfläche erstellt. Der Ursprung unseres Koordinatensystems liegt in der oberen linken Ecke (0/0). Die Einheit aller Zahlen sind immer Pixel.

Punkt

point(20, 20);

Ein Punkt hat keinen Radius. Um die größe eines Punktes zu vergrößern, müssen wir den strokeWeight erhöhen (siehe unten).

Linie

line(10, 10, 40, 40);

Ellipse

ellipse(20, 20, 5, 10);

x und y beschreiben bei Ellipse und Kreis nicht die obere-rechte Ecke sondern den Mittelpunkt

Kreis

circle(20, 20, 5);

Rechteck

rect(10, 10, 40, 20);

Quadrat

square(10, 10, 40);

/lectures/2d/drawing/shapes/sketch.jsView on GitHub

Füllungen & Linien

Code wird in allen Programmiersprachen immer von oben nach unten ausgeführt. p5js hat Standardeinstellungen für Farben: Füllungen und Linien sind immer schwarz. Wir können die Einstellungen für Farben und Linien jederzeit ändern. Nachdem wir z.B. die Füllung ändern, werden alle Formen die wir danach zeichnen mit den neuen Einstellungen gezeichnet.

fill(255, 0, 0);

stroke und fill akzeptieren die selben Parameter wie das background Kommando.

stroke(255, 0, 0);

Neben den Farben können wir auch die Linienstärke verändern:

strokeWeight(5);

https://...View on GitHub

Kreisbögen

Eine etwas kompliziertes Kommando ist der Kreisbogen (arc):

arc(100, 100, 50, 50, 0, Math.PI, OPEN);

Die Winkel werden standardmäßig nicht in Grad sondern in Radians angegeben. 360 Grad sind 2 * Math.PI. Ein einfacher Weg sich Gradzahlen umzuwandeln ist:
Math.PI / 180 * YOUR_ANGLE.

/lectures/2d/drawing/arc/sketch.jsView on GitHub

Inspiration: Hilma af Klint

/lectures/2d/drawing/klint/sketch.jsView on GitHub

Zurück zum Anfang