U0302 Das Typografische Ornament

Erkunde die verschiedenen Schriftklassifikationen unter dem Gesichtspunkt ein typografisches Ornament zu erstellen.

Wählen Sie vier unterschiedliche Schriften aus. Aus diesen vier Schriften wählen Sie jeweils einen Buchstaben, der sich dazu eignet, wiederholend angeordnet, ein Ornament zu bilden. Nutzen Sie zur Umsetzung Processing. Erstellen Sie von einer Schrift mehrere Ornamentvarianten (mindestens 12), die sie in einer 4x3 Matrix auf einer Grundfläche der Größe 1920x1080px anordnen. Wählen Sie das beste Ornament pro Schrift aus und heben Sie es gegenüber den Varianten hervor.

Es entstehen vier Screens, die mit dem Namen der Schrift über- oder untertitelt sein müssen. Diese werden anschließend in der Gruppe besprochen und die Erkenntnisse geteilt. Erstellen Sie sich hierfür ein Memo, welches festhält: • Was ihnen aufgefallen ist? • Welche Schriften eignen sich, welche nicht? • Macht es einen Unterschied, ob ich Groß- oder Kleinbuchstaben verwende? • Neue Fragen, etc.

Lernziel: Schriftkunde, Abstraktionsvermögen. Schulung des grafischen Verständnisses z.B. für die Logoentwicklung.

Reflexion:

Um ein Ornament zu erstellen, musste ich erstmal wissen, welche Schriften bei mir funktionieren und welche ästhetisch interessante Glyphen haben. Hierzu habe ich mir das Alphabet in mehreren Schriften ausgeben lassen. Besonders q,f Q, X, aber auch einige k und j schauen auf den ersten Blick interessant und routier/spiegel/zerrbar aus. Einige Schriftbeispiele, aus denen ich ausgewählt habe, sind als Bilder angehängt.

Ich bin gescheitert. Die falsche Anzeige der Schrifttypen habe ich behoben und eine schöne Schrift ausgewählt. Ich komme aber mit der rotate Funktion bei Processing nicht klar. Ich wollte eigentlich Buchstaben gestacked anordnen und dann den Stack routieren. Leider bekomm ich nichtmal einen Buchstaben um die eigene Achse routiert und das Rücksetzen des Origin auf, um zu einer neuen Mausposition zu translaten ist fehlgeschlagen. Ich habe jetzt in diese Aufgabe insgesamt 8h reingesteckt, ohne einen Lösungsweg zu sehen und mir fehlt der Abgabe geschuldet, die Zeit mich noch tiefer damit zu beschäftigen, um einen Lösungsweg zu finden. Bilder der Versuche hänge ich an.

Lernziel nicht erreicht Mangels Technologieerprobtheit!!

Code Auswahl:

PFont f;
String[] fontList = PFont.list();
int baseLine = 100;

int fontType = int(random(0, fontList.length));

void setup() {
    size(1200, 1200);

    // Create the font
    fontList = PFont.list();
    printArray(fontList);
    f = createFont(fontList[fontType], 84);
    textFont(f);
    print(textDescent());

    background(240);
      for (int i = 0; i<8; i++){
      textAlign(LEFT);

       f = createFont(fontList[int(random(0, fontList.length))], 84);
      textFont(f);

      fill(55);
      textSize(30);
      text("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", 50, baseLine * i);

     // fill(55);
     // rect(0, 2 * baseLine - textAscent(), width,  textAscent() + textDescent());
      textAlign(RIGHT);

      fill(55);
      textSize(8);
      text(fontList[fontType], 600, 1.1* baseLine * i);
    }

}

void draw() {
   /* background(240);
    textAlign(LEFT);

    for (int i = 0; i<4; i++){
      textAlign(LEFT);

       f = createFont(fontList[int(random(0, fontList.length))], 84);
      textFont(f);

      fill(55);
      textSize(30);
      text("Dieser Text ist in Schaugröße", 50, baseLine * i);

     // fill(55);
     // rect(0, 2 * baseLine - textAscent(), width,  textAscent() + textDescent());
      textAlign(RIGHT);

      fill(55);
      textSize(8);
      text(fontList[fontType], 600, 2* baseLine * i);
    }

     // drawType(); */

}

void drawType() {
  for (int i = 0; i<4; i++){
       f = createFont(fontList[int(random(0, fontList.length))], 84);
      textFont(f);

      fill(55);
      textSize(30);
      text("Dieser Text ist in Schaugröße", 50, baseLine * i);

     // fill(55);
     // rect(0, 2 * baseLine - textAscent(), width,  textAscent() + textDescent());
      textAlign(RIGHT);

      fill(55);
      textSize(8);
      text(fontList[fontType], 600, 2* baseLine * i);
    }
}

Code Ornament:

```

// --- Einstellungen ---

int cols = 4;

int rows =3;

float padding = 10;

float pointSize = 10;

// Berechnete Werte

float cellSize;

float startX, startY;

ArrayList dots;

void setup() {

size(1920, 1080);

dots = new ArrayList();

// Quadratgröße richtet sich nach Höhe

cellSize = (height - padding * (rows + 1)) / rows;

float totalWidth = cols * cellSize + (cols + 1) * padding;

startX = (width - totalWidth) / 2 + padding;

startY = padding;

}

void draw() {

background(200); // Hintergrund leicht grau für Kontrast

// Raster zeichnen

for (int i = 0; i < cols; i++) {

for (int j = 0; j < rows; j++) {

  float x = startX + i * (cellSize + padding);

  float y = startY + j * (cellSize + padding);

  fill(255);

  stroke(0);

  rect(x, y, cellSize, cellSize);

}

}

// Punkte zeichnen

for (Dot d : dots) {

d.display();

}

// Punktgröße anzeigen

fill(0);

text("Punktgröße: " + pointSize, 10, height - 10);

}

void mousePressed() {

// Punkt an Klickposition hinzufügen

dots.add(new Dot(mouseX, mouseY, pointSize));

}

void keyPressed() {

if (key == '+' || key == '=') {

pointSize += 10;

if (pointSize > 1000) pointSize = 1000;

}

if (key == '-' || key == '_') {

pointSize -= 10;

if (pointSize < 2) pointSize = 2;

}

}

// Punktklasse

class Dot {

PVector pos;

float size;

Dot(float x, float y, float s) {

pos = new PVector(x, y);

size = s;

}

void display() {

fill(0);

noStroke();

  PFont f = createFont("Te X Gyre Chorus Medium Italic", 84);
  textFont(f);

  fill(55);
  textSize(30);
  translate(pos.x, pos.y);
  for (int i=0; i < 25; i++){


    text("g", 0 + i*5,0  + i*5);
    rotate(radians(30));
  }
  translate(-1* pos.x, -1 * pos.y);

 // rotate(12);

}

}

```