Skip to content

U0302 Das Typografische Ornament

Aufgabenstellung:

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.

Mein Ergebnis:

U302-1

U302-2

U302-3

Schließlich habe ich den vorherigen Code wieder umprogrammiert, sodass statt Quadraten nun Dreiecke entstehen. Für diese Aufgabe habe ich außerdem die Rotation randomisiert, da mir das für den Effekt dieser Aufgabe sehr wichtig erschien.

Ich finde es dabei ziemlich interessant, dass es manchmal so wirkt, als wären mehr als nur drei Dreiecke zu sehen – besonders dann, wenn sich die Dreiecke überlappen und neue Spitzen hervorschauen.

Mein Favorit ist vielleicht überraschenderweise die achte Zelle mit den drei kleineren Dreiecken. Diese wirken fast unabhängig voneinander, während es in den meisten anderen Zellen eher so wirkt, als würden die Dreiecke „aufeinander losgehen“.

Insgesamt würde ich aus diesen drei Aufgaben sagen, dass mir die Kreise am besten gefallen. Sie erzeugen meiner Meinung nach die harmonischsten Beziehungen, vermutlich aufgrund der geringeren Anzahl an Punkten.

PFont font;
String fontName = "";
String sampleChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
ArrayList<String> fontList = new ArrayList<String>();

int cols = 4;
int rows = 3;
char[] ornamentLetters = new char[cols * rows];
int[] ornamentPatterns = new int[cols * rows];

boolean needsRedraw = true;

void setup() {
size(1920-200, 1080-200);
smooth();
textAlign(CENTER, CENTER);
loadFonts();
pickRandomFont();
randomizeOrnaments();
}

void draw() {
if (needsRedraw) {
    background(255);
    drawFontLabel();
    drawOrnamentsGrid();
    needsRedraw = false;
}
}

void loadFonts() {
String[] fonts = PFont.list();
for (String f : fonts) {
    fontList.add(f);
}
}

void pickRandomFont() {
fontName = fontList.get(int(random(fontList.size())));
font = createFont(fontName, 32);
}

void randomizeOrnaments() {
for (int i = 0; i < ornamentLetters.length; i++) {
    ornamentLetters[i] = sampleChars.charAt(int(random(sampleChars.length())));
    ornamentPatterns[i] = int(random(5));
}
}

void drawFontLabel() {
fill(0);
textFont(font, 32);
textAlign(LEFT, TOP);
text("Font: " + fontName, 20, 20);
}

void drawOrnamentsGrid() {
float margin = 70;
float cellW = (width - 2 * margin) / cols;
float cellH = (height - 2 * margin) / rows;

int index = 0;
for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
    float cx = margin + x * cellW + cellW / 2;
    float cy = margin + y * cellH + cellH / 2;
    float radius = min(cellW, cellH) * 0.25;
    drawOrnament(cx, cy, radius, ornamentLetters[index], ornamentPatterns[index]);
    index++;
    }
}
}

void drawOrnament(float cx, float cy, float radius, char letter, int pattern) {
pushMatrix();
translate(cx, cy);
textAlign(CENTER, CENTER);
fill(0);
noStroke();

int count = int(random(10, 15));

switch (pattern) {
    case 0: // kreis muster
    for (int i = 0; i < count; i++) {
        float angle = TWO_PI / count * i - HALF_PI;
        float x = cos(angle) * radius;
        float y = sin(angle) * radius;
        pushMatrix();
        translate(x, y);
        rotate(angle + HALF_PI);
        textSize(radius * 1.5);
        text(letter, 0, 0);
        popMatrix();
    }
    break;

    case 1: // Spiral with decreasing spacing
    float angle = -PI / 2;
    int spiralCount = 50;

    for (int i = 0; i < spiralCount; i++) {
        float r = map(i, 0, spiralCount, 0, radius);
        float x = cos(angle) * r;
        float y = sin(angle) * r;
        float size = map(i, 0, spiralCount, radius * 0.5, radius * 0.01);
        float step = map(i, 0, spiralCount, PI / 10, PI / 100); // big steps → small steps

        textSize(size);
        pushMatrix();
        translate(x, y);
        rotate(angle + HALF_PI);
        text(letter, 0, 0);
        popMatrix();

        angle += step;
    }
    break;


    case 2: // welle
    float spacing = radius * 0.2;
    int waveCount = 15;
    for (int i = 0; i < waveCount; i++) {
        float x = i * spacing - waveCount * spacing / 2;
        float y = sin(i * 0.5) * radius * 0.4;
        float angle2 = radians(-15 + i * 3); // rotation
        float size = map(i, 0, waveCount, radius * 0.6, radius * 0.4);
        textSize(size);
        pushMatrix();
        translate(x, y);
        rotate(angle2);
        text(letter, 0, 0);
        popMatrix();
    }
    break;

    case 3: // matrix
    int gridSize = 6;
    float cellSize = radius * 0.5;
    float startX = -cellSize * (gridSize - 1) / 2;
    float startY = -cellSize * (gridSize - 1) / 2;

    for (int row = 0; row < gridSize; row++) {
        for (int col = 0; col < gridSize; col++) {

        float x = startX + col * cellSize;
        float y = startY + row * cellSize;
        float angleToCenter = atan2(-y, -x);

        pushMatrix();
        translate(x, y);
        rotate(angleToCenter + HALF_PI);
        textSize(radius*0.8);
        text(letter, 0, 0);
        popMatrix();
        }
    }
    break;

    case 4: // dreieck
    int triangleRows = 5;
    float spacingT = radius * 0.5;
    float baseY = -spacingT * triangleRows / 2;

    for (int row = 0; row < triangleRows; row++) {
        for (int col = 0; col <= row; col++) {
        float x = (col - row / 2.0) * spacingT;
        float y = baseY + row * spacingT;

        pushMatrix();
        translate(x, y);
        rotate(int(random(0,180))); // upright letters
        textSize(radius * 0.75);
        text(letter, 0, 0);
        popMatrix();
        }
    }
    break;

}
popMatrix();
}


void keyPressed() {
if (key == 's' || key == 'S') {
    saveFrame("302_###.png");
}
if (key == 'f' || key == 'F') {
    pickRandomFont();
    randomizeOrnaments();
    needsRedraw = true;
}
if (key == 'o' || key == 'O') {
    randomizeOrnaments();
    needsRedraw = true;
}
}