Szablony z kodu

Szablon z kodu rysuje grafikę programem zamiast wgrywać gotowy obraz. Używa p5.js, biblioteki JavaScript stworzonej do nauki programowania przez rysowanie. Kilka linijek wystarcza na geometryczny wzór, który na wydruku wygląda jak papier marmurkowy albo tkanina.

Krok po kroku

1. Otwórz Karty biblioteczne → Szablony i przejdź do zakładki KOD (P5.JS).
2. Edytor startuje z przykładowym kodem: ciemne tło i jasne przerywane linie.
3. Zmieniaj kod. Podgląd odświeża się chwilę po każdej zmianie.
4. Uzupełnij pola szablonu (nazwa, krój pisma, tekst na grafice) i kliknij Zapisz.

Dwa przyciski w rogu edytora:

• Wygeneruj losowy wzór (ikona iskier) wstawia gotowy kod z losowym wzorem. Dobry punkt wyjścia do własnych zmian.
• Resetuj kod (strzałka) przywraca kod startowy.

Link „p5.js editor” pod edytorem otwiera oficjalny edytor p5.js. Przydaje się do dłuższych eksperymentów z podglądem i konsolą.

Jak zbudowany jest kod

Program ma dwie funkcje:

function setup() {
  createCanvas(600, 600);
  noLoop(); // rysujemy tylko raz
}

function draw() {
  background(35, 45, 85);   // ciemne indygo
  stroke(245, 245, 235);    // biała nić
  noFill();
  strokeWeight(2);
  for (let y = 20; y < height; y += 20) {
    line(0, y, width, y);
  }
}

setup() uruchamia się raz i ustawia płótno. draw() rysuje. noLoop() sprawia, że rysunek powstaje raz, co jest potrzebne do druku. Kolory podaje się w RGB: trzy liczby od 0 do 255.

Gdy kod ma błąd, edytor pokazuje komunikat z jego treścią. Jeśli komunikat podpowiada, użyj przed funkcjami rysującymi przedrostka p., na przykład p.line(...).

Pomysły na pierwsze wzory

• Kratka: dwie pętle for z liniami poziomymi i pionowymi.
• Kropki: circle(x, y, 5) w pętli po siatce.
• Fale: sin() zmieniające wysokość linii wzdłuż szerokości płótna.
• Losowość: random() w kolorach albo położeniu. Każde uruchomienie da inną kartę. Żeby wzór się powtarzał, ustaw na początku randomSeed(7).

Do nauki od zera dobrze nadaje się dział „Tutorials” na stronie p5js.org. To dobry pierwszy projekt programistyczny dla dziecka: efekt widać od razu, a wynik można wydrukować i włożyć do własnej książki.

Gotowy wzór możesz udostępnić innym czytelnikom jako szablon publiczny.