Intro til P5js

Materiale

• p5js
• p5 code editor browserbaseret editor der ikke kræver installation.
• p5 reference er dokumentation af de mange funktioner i p5.
• Variabler i javascript bliver grundigt forklaret og bruger et metafor med en kasse, der måske kan hjælpe lidt på forståelsen.
• Variable scope forklaret ved et eksempel.
• P5 Cheat Sheet giver en oversigt over de basale elementer i p5.js.

Tegn på skærmen

Denne video forklarer de grundlæggende principper i computergrafik.

Setup and draw

stateDiagram
    [*] --> Setup
    Setup --> Draw
    Draw-->Draw : render next frame

Tegneprimitiver

• Dokumentation af alle tegneprimitiver i p5.

Her nogle få udvalgte, der formentlig kan bruges til at løse opgaven.

• rect()
• line()
• ellipse()
• arc()

Her er nogle eksempler på hvordan de kan bruges i koden: en linie, et rektangel, en ellipse, et buestykke.

line(x1, y1, x2, y2);
rect(x, y, w, h);
arc(x, y, w, h, start, stop);

Brug af farver

Når du skal tegne kan du vælge egenskaber for din “pensel”. Dette gøres på inden du “maler”, på samme måde som med en rigtig pensel.

• stroke() vælger stregens farve.
• strokeWeight() vælger stregens tykkelse.
• fill() vælger fyldfarven. Denne har kun betydning for lukkede figurer som f.eks. firkanter og cirkler.

Du kan bruge color() til at oprette en farve, og gemme værdien i en variabel, så den nemt kan genbruges forskellige steder i programmet. Her er et eksempel:

  let myColor = color(250, 142, 0)
  fill(myColor);
  circle(100, 150, 42);

• Color Picker (google) kan bruges til at vælge en farve og se hvilke argumenter du skal give til color() funktionen.
• Color Picker - w3schools er en del af en længere forklaring om farver på hjemmesider og computergrafik.
• Adobe Color farvehjul der kan bruges til at sammensætte et farvetema.
• HTML Color Codes forklaring af farver i HTML/CSS.