Rotera

Rotera

I det här programmet ska vi skapa en figur som roterar på canvasen.

I funktionen setup() skapas en canvas med måtten 400*400 pixlar.

Innan nästa funktion skapas en variabel som heter angle (vinkel) och den sätts till värdet 45.

function setup() {
 createCanvas(400, 400);
}
var angle = 45;

I funktionen draw() bestäms först bakgrundsfärgen med RGB kod.
Därefter bestäms med vilka enheter vi vill ange vinkel  med, här används  grader.  p5.js använder som standard radianer men vi vill använda grader och det ändras genom funktionen angleMode(DEGREES);

function draw() {
 background(0,200,150);
 angleMode(DEGREES);
}

Nästa kod translate(100,100); används för att positionera/förflytta saker på canvasen. Vad som sker är att origo (0,0), som finns uppe i vänstra hörnet av canvasen, förflyttas 100 pixlar i x-led och 100 pixlar i y-led och gör att origo blir placerad enligt bild.  All kod som kommer efter translate() kommer nu att ritas ut med avseende på nya origo. Om en ny translate() läggs till så gäller den för kommande kod.

 

 

 

 

rotate(angle); gör att det som skrivs efter kommer att rotera den vinkel vi angivit i variabeln angle (45 grader i detta fall). Därefter säger vi att angle ska öka med ett varje gång draw() körs. draw() är en  loop vilken körs ca 60 gånger per sekund tills programmet stoppas.

rect(-25, -25, 50, 50); ritar ut en kvadrat vars centrum ligger i origo (den origo som är förflyttad med translate() ).
Rektanglar ritas med övre vänstra hörnet i de x och y-värden som anges för de två första parametrarna för funktionen (här -25, -25).


 Gör kvadraten dubbelt så stor och se hur den roterar.

 Ändra i koden så att den roterar kring sin mittpunkt.

 Ändra hastigheten på rotationen.

 Flytta origo till annan plats på canvasen och rita andra figurer som roterar.