Lav generativ kunst med kode

Generativ kunst er kunst, hvor du laver reglerne, og computeren maler. Du bestemmer, hvad der må ske. Tilfældigheden bestemmer resten. Derfor bliver hvert billede helt unikt.

Sådan gør du

1. Gå ind på editor.p5js.org. Det er en gratis editor i browseren til p5.js – et JavaScript-bibliotek, der er lavet til at tegne med kode. Du kan starte med det samme uden konto.
2. Slet koden i venstre side, og indsæt koden nedenfor. Tryk på ▶ (Play) øverst.
3. Se billedet vokse frem. Funktionen draw() kører igen og igen – op til 60 gange i sekundet – og hver gang tegner den én ny cirkel et tilfældigt sted.
4. Klik én gang på billedet, så det lytter efter tastaturet. Tryk på S for at gemme dit kunstværk som et billede, og på N for at starte forfra på et nyt lærred.
5. Gør det til dit eget: skift circle ud med square, ændr tallene i random(5, 60), eller giv baggrunden en ny farve.

Eksempel (p5.js)

// Generativ kunst: computeren maler med tilfældige cirkler
let farvetone = 0;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  noStroke();
  background(240, 60, 15);
}

function draw() {
  const x = random(width);
  const y = random(height);
  const stoerrelse = random(5, 60);
  const tone = (farvetone + random(-20, 20) + 360) % 360;

  fill(tone, 80, 100, 40);
  circle(x, y, stoerrelse);

  farvetone = (farvetone + 0.3) % 360;
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('min-kunst', 'png');
  }
  if (key === 'n' || key === 'N') {
    background(240, 60, 15);
  }
}

💡 Farverne er i HSB: farvetone (0-360, rundt i farvecirklen), mætning og lysstyrke (0-100). Det sidste tal i fill(), 40, gør cirklerne gennemsigtige, så farverne blander sig.

💡 Vil du gemme koden online, skal du have en gratis konto. Er du under 13 år, så opret den sammen med en forælder – og vælg et brugernavn, der ikke er dit rigtige navn. Du kan også bare kopiere koden over i en tekstfil på din computer.

Fik du lyst til mere JavaScript? Fortsæt med JavaScript – gør din hjemmeside levende.