Dokumentation

Skript Erklärung

Die wichtigsten Funktionen sind in Abschnitte aufgeteilt.

1) Globale Variablen

Variabeln initialisieren

let seed = 20251110; // Abgabedatum: 10.11.2025
let titles;
let h1;
let canvas;
let seedValueEl;

2) setup() und windowResized()

setup() erstellt das Quadrat-Canvas, hängt es an #canvas-wrap und sorgt für höhere Pixeldichte. Bei Fenster-Resize wird die Grösse neu gesetzt und das Bild neu gezeichnet.

function setup() {
    const size = Math.min(window.innerWidth, window.innerHeight) - 120; // Kleinerer Wert Höhe/Breite - 120 Abstand
    const renderer = createCanvas(size, size); // Grösse vom Bild intialisieren
    renderer.parent("canvas-wrap");

    canvas = renderer.canvas;
    canvas.addEventListener("dblclick", () => {
        saveCanvas(`P-${seed}`,'png');
    });

    pixelDensity(6); // Pixel Dichte
    noLoop(); // Statisch
}

function windowResized(){
    const size = Math.min(window.innerWidth, window.innerHeight) - 120; // Gleich wie oben
    resizeCanvas(size, size); // Grösse vom Bild neu setzten
    redraw(); // neu zeichnen
}

3) draw() - Hauptzeichnung

Der Seed fixiert Zufall und Noise. Danach wird die Szene um die Mitte aufgebaut: Layer, Polygone oder Halbmonde, dann Linien als Abschluss.

function draw() {
    randomSeed(seed); // Zufall auf Seed fixieren
    noiseSeed(seed); // Perlin-Noise auf Seed fixieren
    background(0); // Hintergrund Schwarz #000

    // Grund-Säule in der Mitte
    push(); // Transform Zustände kapseln damit sich später nicht alles mitdreht
    translate(width/2, height/2); // Koordinatenursprung in die Mitte
    rotate(radians(random(-8,8))); // Leiche Gesamtdrehung -8 Grad bis 8 Grad damit es nicht zu orthogonal wird

    // Mehrere Layer mit unterschiedlichen Regeln
    const layers = 14; // 14 Layers insgesamt
    for (let i=0;i<layers;i++){
        push(); // abkapseln
        const dx = random(-width*0.18, width*0.18); // Zufällige seitliche Position
        const dy = map(i,0,layers-1, -height*0.35, height*0.35) + random(-10,10); // Zufällige vertikale Position
        translate(dx, dy); // Koordinatenursprung setzten
        rotate(radians(random(-20,20))); // Zufällige Rotation -20 Grad bis 20 Grad
        const w = random(width*0.25, width*0.55); // Zufällige Höhe
        const h = random(height*0.12, height*0.38); // Zufällige Breite

        // Farbpalette mit HSB, Hue-Saturation-Brightness + Alpha
        const hue = random(360);
        const sat = random(60,100);
        const bri = random(75,100);
        colorMode(HSB,360,100,100,100);
        const alpha = random(28,55); // transparenz

        // Abwechselnd Polygone und runde Schnitte
        if (random() < 0.5){
            // Variante A: Polygon
            fill(hue, sat, bri, alpha); // Fläche mit Farbe ausfüllen
            noStroke(); // Kein Rand
            polygon(0,0, w,h, int(random(4,7))); // Zeichnen Polygone mit 4-7 Ecken
            // Dünner weisser Rand
            stroke(0,0,100, 45); // Farbe
            strokeWeight(1); // Dicke
            noFill(); // Keine Füllung
            polygon(0,0, w*0.98, h*0.98, int(random(3,6))); // Polygone aus nur Rand mit 3-6 Ecken
        } else {
            // Variante B: Halbmond
            fill(hue, sat, bri, alpha); // Fläche mit Farbe ausfüllen
            noStroke(); // Kein Rand
            arcLike(0,0, w,h, random(TWO_PI), random(TWO_PI)); // Halbmond zeichnen
            // transparentes Rechteck darüber
            fill(0,0,100, 14); // Farbe
            rectMode(CENTER); // Zentriert
            rect(0,0, w*0.9, h*0.9); // 90% der Breite und Höhe
        }

        pop(); // Jeder Layer hat sein eigenes pop, damit der Rest nicht beeinflusst wird
    }

    // dünne Linien
    stroke(0,0,100, 70); // Farbe
    strokeWeight(1); // Dicke
    for (let i=0;i<6;i++){ // 6 Linien
        push(); // abkapseln
        rotate(radians(random(-40,40))); // drehen Zufällig -40 bis 40 Grad
        line(-width*0.45 + random(-20,20), random(-height*0.45, height*0.45), // Start Koordinaten
            width*0.45 + random(-20,20), random(-height*0.45, height*0.45)); // End Koordinaten
        pop(); // abkapseln
    }

    pop(); // abkapseln
}

4) Formen: polygon() und arcLike()

polygon() zeichnet vieleckige Formen mit leicht unregelmässigen Radien. arcLike() baut einen Halbmond aus zwei Bogenlinien.

// Hilfsfunktionen für Polygone
function polygon(cx, cy, w, h, sides){
    beginShape();
    for (let i=0; i<sides; i++){
        const a = TWO_PI * i / sides + random(-0.08,0.08);
        const rx = w/2 * (0.9 + random(-0.08,0.08));
        const ry = h/2 * (0.9 + random(-0.08,0.08));
        vertex(cx + cos(a)*rx, cy + sin(a)*ry);
    }
    endShape(CLOSE);
}

// Hilfsfunktion für Halbmond
function arcLike(cx, cy, w, h, a1, a2){
    const steps = 40;
    beginShape();
    for (let t=0; t<=steps; t++){
        const a = lerp(a1, a2, t/steps);
        vertex(cx + cos(a)*w/2, cy + sin(a)*h/2);
    }
    for (let t=steps; t>=0; t--){
        const a = lerp(a1, a2, t/steps);
        vertex(cx + cos(a)*w/2 * 0.6, cy + sin(a)*h/2 * 0.6 + 6);
    }
    endShape(CLOSE);
}