1 Intro til p5.js og programmering

Hvis du aldrig har prøvet at programmere før, er det her et godt sted at begynde. I dette forløb lærer du at programmere på en nem og visuel måde. Men endnu vigtigere, så lærer du også at forstå hvad det digitale stof din computer er lavet af er, og hvad det igen giver dig af muligheder. Du lærer at programmere med sproget “Javascript” – når du er færdig med forløbet, kan du kaste dig over nye og vildere sprog, men dette er et godt sted at begynde. Det er nemlig Internettets primære programmeringssprog.

Visualisering lavet i p5.js

Før du går i gang, skal du have et program du kan skrive kode med. Der er mange gode gratis programmer derude, her skal du bruge Brackets og browseren Chrome. Bagefter skal du downloade selve kodefilerne – de er vedhæftet nederst på siderne.

Lad os starte med et ultrasimpelt program, og så udvide det efterhånden.

Gør præcis sådan her

  1. Download og installér Brackets – og Chrome hvis du ikke har den i forvejen.
  2. Download mappen med filer nederst på denne side og udpak den (det er en zip fil).
  3. Læg mappen i dine dokumenter eller på skrivebordet, så du har en mappe der hedder “1.1 Farver” og du ved hvor den er.
  4. Åbn Brackets
  5. Træk hele mappen “1.1 Farver” over på Brackets (husk at det skal være den udpakkede mappe – ikke zip-filen!)
  6. I venstre side af Brackets kan du nu se oversigten over filer – klik på “sketch.js”, det er der det hele sker.
  7. Klik på det lille lyn i øverste højre side af Brackets – nu åbner Chrome programskitsen i et vindue.
  8. Træk Brackets og Chrome hen ved siden af hinanden som på billedet – nu kan du se koden til venstre og resultatet til højre
  9. Hver gang du trykker “Gem” i brackets, opdateres dit program i Chrome. Du kan se hvad du programmerer.
  10. Fra nu af skal du følge kommentarerne direkte i sketch.js – læs, løs opgaverne og du er i gang!

Hent koderne her: 1.1 Farver

Opgaver

  • Prøv at ændre størrelse på programmets canvas, ved at ændre i de tal der står i parantesen efter createCanvas
  • Prøv at ændre baggrundsfarven til en ren grøn
  • Prøv at slet metoden noStroke() – hvad sker der nu?
  • Prøv i stedet at skriv:
    stroke(100,0,200);
    ..der hvor der stod noStroke(); Hvad sker der nu?
  • metoden fill() tager en mærkelig parameter: ‘#fae’. I virkeligheden svarer det til en farvekode – se om du kan google #fae og oversætte den til tre tal, ligesom der står i metoden background.
  • På den måde kan metoder ofte tage flere forskellige slags parametre – og man skal kigge i referencen for at se hvilke.
  • Åbn referencen til p5.js . Find metoden rect() – se om du kan tegne en firkant over cirklen.
  • Metoden fill() virker ligesom en farvevælger. Man kan vælge en ny farve før man tegner noget – fx din firkant. Prøv at indsætte fill(100,100,0) før du tegner firkanten – hvad sker der nu?
  • Prøv så at indsætte en fjerde parameter i din fill:
    fill(100,200,50,150);

Leave a comment