Grafiske projekter (turtle, p5.js)

Informatik C · STX · C-niveau · Programmering

💻 Grafiske projekter (turtle, p5.js)

Turtle-grafik (Python's turtle-modul) = klassisk lærings-grafik baseret på LOGO (Papert 1960'erne). En "skildpadde" tegner streger på skærm via kommandoer.

Grundkommandoer: forward(100), backward(50), left(90), right(90), penup(), pendown(), pencolor("red"), pensize(3). Eksempler: Kvadrat: ``python\nimport turtle\nt = turtle.Turtle()\nfor _ in range(4):\n t.forward(100)\n t.right(90)\n`` Trekant, hexagon, polygon n-sidet via samme mønster (vinkel = 360/n). Spirograph (kombiner cirkler), Mandelbrot-fraktal (rekursion), Koch-snefnug, Sierpinski-trekant (rekursive mønstre). p5.js (JavaScript, baseret på Processing) = moderne web-baseret kreativ kodning. Setup() + draw()-funktioner kører 60 fps.

Eksempel: ``js\nfunction setup() { createCanvas(400, 400); }\nfunction draw() { ellipse(mouseX, mouseY, 50, 50); }\n`` Tegner cirkler hvor musen bevæger sig.

Anvendelser: Datavisualisering (D3.js mere kraftfuld), Generativ kunst (Casey Reas, Joshua Davis), Spil-prototyping (asteroids, pong), Læringsmateriale (interaktive simulationer).

Uddannelse: TheCodingTrain (Daniel Shiffman) er fantastisk YouTube-kanal for p5.js.

Skoleprojekter: klassisk sluteksamens-projekt — fraktaler, klima-visualisering, interaktiv kunst.

Læringsmål

• Skrive variable af forskellige datatyper
• Anvende kontrolstrukturer (if/else, for, while)
• Skrive funktioner med parametre og return
• Anvende lister og dictionaries
• Bygge et komplet program (quiz, beregner)

Sådan kan du arbejde med emnet

• Tegn et hus med vinduer og dør ved hjælp af Python turtle
• Lav en simpel animation med p5.js, der viser en bold, der hopper
• Diskutér, hvad der er fordelen ved grafisk output i forhold til tekst-baseret output

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.