Intro til P5js

Materiale

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

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

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);