Skolekoding.no > Tekstkoding > p5.js > Kurs > 2. Tegne

---

2.1 Koordinatsystem

På ungdomsskolen bruker vi ofte et koordinatsystem som har origo midt på arket. Positiv x-akse er mot høyre. Positiv y-akse er oppover.

I p5.js, og de fleste andre språk, er origo oppe i venstre hjørne.  Positiv x-akse er til høyre, som vi er vant til, men positiv y-akse er nedover! De negative verdiene er utenfor vinduet oppe og til venstre.

På ungdomsskolen bruker vi mm og cm som mål på aksene. I p5.js bruker vi punkter (pixler). 100 punkter tilsvarer typisk omtrent 2 cm på en PC-skjerm.

---

2.2 Figurer

Vi tegner figurer med instruksjoner, slik som ellipse() som du brukte på forrige side. Her er flere instruksjoner:

point(x, y); punkt med koordinatene (x, y)
line(x1, y1, x2, y2); linje fra (x1, y1) til (x2, y2)
ellipse(x, y bredde, høyde); ellipse med sentrum i (x, y). Høyde er valgfri. Med bare bredde settes høyden lik bredden.
circle(x, y, radius); 
rect(x, y, bredde, høyde); rektangel, (x, y) angir det øvre venstre hjørnet
triangle(x1, y1, x2, y2, x3, y3); trekant, hjørnenes rekkefølge er likegyldig
quad(x1, y1, x2, y2, x3, y3, x4, y4); firkant, rekkefølge ikke likegyldig

---

2.3 Oppgaver

Åpne editoren

A) Tegn tre sirkler med forskjellig plassering og størrelse.
B) Tegn et punkt, en linje, et rektangel, en trekant og en firkant.
C) Tegn fire sirkler som ligger på linje i samme høyde.
D) Tegn fire sirkler som ligger på linje under hverandre.
E) Tegn fire sirkler som ligger på linje på skrå i vinduet.
F) Tegn fire sirkler som overlapper hverandre.

---

2.4 Rekkefølge

Rekkefølgen på instruksjonene er viktig. Datamaskinen leser programmet fra toppen og nedover. Når vi baker en kake er det viktig at vi putter bakepulver i kakerøra før vi setter kaka i ovnen. På samme måte er rekkefølgen viktig i programmering. Hvis sirklene i forrige oppgave var store, ble de første delvis dekket av de neste.

---

2.5 Oppgave

A) Tegn en snømann som er ca 300 punkter høy.
​B) Bruk alle kommandoene fra forrige avsnitt